Creating a SEO friendly Sites with ReactJS

The following article will discuss the problem of how you can have a SEO freindly website using ReactJS .

Single Page Application (SPA)

In the old web, sites worked in such a way that the browser needed to request each page of the website separately, forcing the server to generate HTML pages and send them back. Therefore each new request to the server was followed by the endless reload of pages.

As the technologies evolved, Single Page application with the goal of giving user experience similar to desktop applications emerged. In SPA The pages UI and its data can be changed without requiring a server roundtrip to retrieve HTML . Gmail or social nets where switching between pages happen instantly are example of this technology.

Can I depend on google to run my javascript?

The problem of using SPA is base on an old SEO concern which occur by create a page data using Javascript. Historically data that depends on ajax call and executing javascript was not accessible to search engines. While at the moment there are existing methods for dealing with this problem.

Google will run your sites Javascript but you can not depend on it. Google may or may not decide to run your JavaScript, and you don’t want your business to depend on its particular inclination of the day. check this great and simple example: “Does Google execute JavaScript”.

Server Side Rendering in ReactJS

The best solution to have a SEO friendly website using react is to use Server rendering. but what is server rendering?

When a website is first opened, all operations are carried out on the server and the browser gets an HTML with all information (same as with typical websites with static pages which search engines can index). After JS is loaded the web turns into a “single page app” and works respectively.

Take a look this site to know more benefit of using Isomorphic React

To know how to implement server rendering in react read the following pages:

• Asynchronous Server side rendering with React
• how to build an seo friendly website with React
• redux-async-connect

How Do I create important SEO elemets, such as “title”, “meta description”, etc? You can use “react helmet” which is “A document head manager for React” and support document title, meta, link, style, script, noscript, and base tags

What Element are Important to consider?

• h1, h2, h3, … — consider your webpage as and article and make sure it has its heading like and article using h1, h2, h3 , … tags
• title — use helmet to give a related title to your page
• meta description — use helmet to describe your pageOpen Graph Protocol — The Open - Graph protocol enables any web page to become a rich object in a social graph. the most important ones are og:title og:url og:image og:type

So your helmet could be something like

<Helmet 
 title= "Page title"
 meta={[
  {"name": "description", "content": "Description of page"},
  {property: "og:type", content: "article"}
  {property: "og:title", content: "Example title"}
  {property: "og:image", content: "example.com/article.jpg"}
  {property: "og:url", content: "example.com/example"}
 ]}
/>