• Docs/
  • Selected guides/
  • SEO Basics

Document started 19/09 by Jovi De Croock

Purpose: after completion being able to make a checklist to provide a seo-compatible website.

SEO

When attempting to make the website seo-compatible I've noticed a few takeaways with regards to server side rendering and react-helmet.

SEO-takeaways

When providing images they should always be a full-url so in our case this would be https://codifly.be/img. For me personally this feels good because then your SEO is always targetted to your production env.

Server side rendering

This is a pretty weird one in my opinion, it feels like the bots get the initial response like it is stated in the index.html (could also be the first x amount of lines). This implies that we need to make sure our arbitrary meta tags are included in there. This however removes the dynamic nature we are looking for with our single-page application.

While testing these things i've grown to assume that the bots also have a limited waiting time. So it's worth trying to reduce the bundle size/browser compilation time as much as possible.

React-helmet

We can reintroduce this dynamic nature utilising the functionality provided by this library.

HTML TAG

When adding a tag through this medium we have to make sure it's in the index.html with data-react-helmet="true". This way we make sure the tag is rendered at the right position in our head tag. Elements that have this tag get removed if they are not present in the <Helmet>. So for static ones you should NOT add this property.

Needs

General

Tags:

  • "keywords" - Keywords for this page.
  • "description" - Description of this page.
  • "author" - Name of the author of this website/article/...
  • "robots" - Options for robots like noindex etc.
  • "mobile-web-app-capable" - Wether or not this website supports mobile web.
  • "apple-mobile-web-app-capable" - Wether or not this website supports apple mobile web.
  • "viewport" - Viewport for this page.

Social

Tags:

  • "og:locale" - Current language.
  • "og:url" - The url of the website.
  • "og:site_name" - The name of the website.
  • "og:type" - One of website/article/...
  • "og:image" - Url path to the image used for facebook links etc.
  • "og:title" - The title when a link in facebook refers to that page.
  • "og:description" - The description when a link in facebook refers to that page.
  • "fb:app_id" - Used to see how many shares and likes this website's fb page has.
  • "twitter:card" - Mostly just "summary".
  • "twitter:title" - Title of the twitter card for this page.
  • "twitter:description" - Description of the twitter card for this page.
  • "twitter:site" - Your twitter @ tag.
  • "twitter:image" - The image url to show in the card for this page.

Speed

Optimize speed by: - gzipping - splitting bundles (common libs - updateable/changeable libs - code (optionally split routes aswell)) - use small images (svg etc)

Dynamics

  • Title
  • Description
  • Keywords
  • og:image
  • og:description
  • og:title
  • og:locale --> if multilingo is supported
  • twitter:image
  • twitter:description
  • twitter:title

Testing

Facebook Twitter Google Google-Mobile Google-Data Total check (10/day) Dependency cost

Sources

react-helmet react-helmet html attributes google-robot

SEO CHECKLIST

Performance

  • Gzipped code
  • Http headers max-age etc
  • No jpegs or big images
  • Code splitted bundles (bare minimum vendor and main)

Tags

  • Your url tags points to your production url
  • Your image contents are urls and no relative paths
  • New page --> new Helmet
  • Your robots.txt and sitemap.xml are well-formed
  • Your keyword is in the title tag, ideally at the front (or close to the front) of the tag
  • Your keyword is close to the beginning of the title tag (ideally the first words)
  • The title tag contains less than the viewable limit of 65 characters (optional but recommended)
  • Your keyword is in the first h1 tag (and your page has an h1 tag)
  • If your page contains additional header tags (h2, h3, etc) your keyword or synonyms are in most of them
  • Any images on the page have an alt tag that contain your chosen keyword
  • Your keyword is in the meta description (and there is a meta description)
  • There is at least 300 words of text on the page
  • Your keyword appears in the URL (if not the homepage)
  • Your keyword appears in the first paragraph of the copy
  • Your keyword (or synonyms — Google recognizes them now) is used other times throughout the page
  • Your keyword density is between .5% and 2.5%
  • The page contains dofollow links to other pages (this just means you’re not using nofollow links to every other page)
  • The page is original content not taken from another page and dissimilar from other pages on your site