SEO (search engine optimization) Discover

Published in

DeepQ Research Engineering Blog

3 min readJan 12, 2017

SEO is important for increasing the exposure of our websites, I note some tips to do the SEO for my website, which is built by NodeJs and React architecture.

Proper Headers

One <h1> in one page, this is the emphasised concept to let search engine know the main topic of your page. Take SproutSocial as an example, it has strong and clean usage of <h1> tag: “Schedule. Publish. Analyze”.

Semantic Tags

Adding semantic tags to the content can help search engine to proper index your content. Here lists all the semantic tags:

Alt for Images

Search engine indexes your images with consideration of the alternatives of your image, add alt for all your images:

<img src={banner} alt="seo finds me" />

Facebook Open Graph

This is nothing about search engine, but still very important to viral your website through social network. Many social networks apply open graph to display a rich content while user posts the link of the website:

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

The above metadata should be inserted into <head>, I recommand React-Helmet to help achieving this:

<Helmet
  meta={[
    {name: "description", content: "Helmet application"},
    {property: "og:type", content: "article"}
  ]}
/>

Structured Data

Search engine can promote the website in a rich content format like:

To better tell search engine the content of the website, we should follow Schema.org to add markup into <head>. To generate the markup according to the content of the website, Google provides a helper to manually tag the markup:

Then the helper generates the markup script with json-ld format:

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Product",
  "name" : "About Structured Data Markup Helper",
  "image" : "https://lh6.ggpht.com/xxx",
  "description" : "Structured Data Markup Helper..."
}
</script>

And we can paste the markup script into <Helmet>. After the website is published, we can test the detected structured data by Google’s testing tool:

Sitemap

Now it is time to ask robot to crawl our pages. Take Googlebot as example, we can enter search console and submit sitemap for our pages. To generate the sitemap.xml, we can apply sitemap plugin to programmatically build the sitemap.

After deploying the sitemap.xml, we can submit the url of sitemap.xml to saerch console

Robots

Oppositely, if we have something we don’t want it to be indexed to search engine, add a robots.txt to the website and submit it to search console. Here is a plugin robots-webpack-plugin which is helpful.

Trouble Shooting

If your page is not indexed even you submit the sitemap, you can go to search console and perform Fetch as Google, then you will get what is fetched, rendered and whether the page can be indexed or not.

Summary

SEO is important, but it makes a lot of troubles if we apply React programming. There are:

Single page web app which is rendered by client can’t be indexed to search engine. We should render it universally at both client and server side.
Since React-Router has the same <head> for all pages, we need to assign the <head> according to the given url path. React-Helmet is recommended.