SEO Guide for Websites

Sasa Blagojevic

Author at JSGuru

This guide will cover a very important topic for every digital business, search engine optimization. SEO can sometimes appear as a black box, there is a lot of magic behind it and it’s constantly changing and evolving. In this article, we will try to dispel it by leading you through some of the SEO best practices.

Besides the latest Google algorithm updates, working on our company’s website SEO and trying to battle through the avalanche of information is what prompted me to write this guide, if nothing as a reference for future self.

This is by no means a comprehensive guide, I will go over the SEO fundamentals you need to cover if you want a shot at appearing on the Google’s first page and we all know how it is in practice, if you are not on the first page, it’s as if you don’t exist, let’s be honest, how often do you go to the second or the third page? Yeah, thought so…

If you are interested in the history of the Google’s algorithm and how it changed over the time the guys and gals at Moz have organized it in a nice searchable list.

Let’s start from the beginning, what is a search engine?

You know how your website has different pages, and it has a navigation bar that links to every one of them? Well, you can look at Google, or any other search engine for that matter, as the internet’s navigation menu. Google “collects” all the websites from the world and indexes them. But how does he collect them?

Well, there are three ways how Google can discover your website:

From DNS registries — if you’re not familiar with the term DNS, I recommend you read this article. While we’re at it, did you know that Google itself is a DNS registrar although they do not sell domains?
If other websites link to your, Google will follow those links and discover you (unless there is a rel=”nofollow” attribute on them). Those links are called inbound links and they are one of the major factors that determine your SEO ranking.
By adding your website and sitemap to the Google Search Console you are basically telling Google “Hi my name is so and so, and this is my address, here you can see my living room, and that is my kitchen, oh I almost forgot about the porch…” ;).

1. Google Search Console

This should be your first step on your path to SEO glory. Go to the Google Search Console, add your website and go through the verification process, and now you are at your first crossroads. You have two options:

You can either add both of your website versions, a non-www and www version (e.g. https://jsguru.io and https://www.jsguru.io) and choose a preferred one. In our case, we set the preferred one to be the non-www.
Or you can add only one version to the Google Search Console, whichever you prefer, and configure your server to redirect from the other version to your preferred one (e.g. add only https://jsguru.io to Google Search Console, and redirect from https://www.jsguru.io to https://jsguru.io). It must be a permanent redirect so your HTTP Response Code should be 301.

Either way, you must handle both of the domain variants, if you just leave them in the wild, without handling them as previously described, there is a high probability Google will treat them as duplicate content, and duplicate content is penalized.

On the other hand, it would be really bad user experience and detrimental to your brand if you served only one domain variant and your website errored out on the other one.

2. Sitemaps

Sitemaps are, as the name already says, a map of all your website pages represented in a format Google or any other search engine can easily digest. It is a collection of all your links, usually in an XML document, but it can also be in a different format such as HTML for example. Look at them as a skeleton of your website.

There are a lot of free online tools that can generate them for you. After you’ve done that you should submit it to Google Search Console under the Sitemaps section. This will allow Google to index you more easily, but still, be patient, it can take time.

If you have a publishing website like a news magazine or a blog, it would be best if you could find a way to automatically update them to reflect the changes on your website.

Since you can submit as many different sitemaps to Google Search Console as you want, a good approach would be to have at least two sitemaps, one for the “static” part of your website that doesn’t change that often and another one for the “dynamic” part of your website which is updated frequently, like the blog section for example.

In our case we have two sitemaps, one that covers our main navigation and contains links to the pages like Home, About Us, What We Do and so on, and another one for our blog where we publish articles every two weeks.

3. HTTPS vs HTTP

From July 2018 Google Chrome has started to mark websites without HTTPS as non-secure, which could negatively impact your traffic, users might decide to leave your website because they perceive it as insecure, or they might get worried that it’s some kind of a scam, in addition, HTTPS websites are reported to have a slight ranking advantage over HTTP websites.

In the early days of internet getting an SSL certificate and securing your website with HTTPS was a tedious and expensive process, but thanks to the open source community and Let’s Encrypt Foundation it is now both free and easy to set up.

Follow these links for a detailed tutorial how to add HTTPS to your website:

4. Meta tags

Yes, meta tags are still a thing!

The description meta tag allows you to customize the brief description which will be shown in the search results, otherwise, you’re leaving it up to Google to determine what’s important and what will be shown, which can lead to some nasty and completely unrelated descriptions. Traditionally, the description length was capped at 155 characters, but recently Google started to allow more, so to play it safe your description should be between 50 and 300 characters.

Although the keywords meta tag has been obsolete for some time, I still included it, because the SEO tool I use bugged me that it was missing and since I’m a bit OCD I just had to add it.

The og, not to be confused with original gangsta, meta tags are used by Facebook, LinkedIn, and other social media to determine what content will be shown when someone shares your page. Same goes for the twitter meta tags.


<meta name="description" content="JSGuru is a high-quality software development shop where clients come first. We build your desired products and provide excellent, long-term customer support so that you can focus on the core of your business.">

<meta name="keywords" content="software development, web development, mobile development">

<!-- Facebook-->
<meta property="og:url"                content="https://jsguru.io">
<meta property="og:type"               content="website">
<meta property="og:title"              content="JSGuru">
<meta property="og:description"        content="JSGuru is a high-quality software development shop where clients come first. We build your desired products and provide excellent, long-term customer support so that you can focus on the core of your business.">
<meta property="og:image" content="https://jsguru.io/img/jsguru.png" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@jsguru_software">
<meta name="twitter:creator" content="@jsguru_software">
<meta name="twitter:title" content="JSGuru">
<meta name="twitter:description" content="JSGuru is a high-quality software development shop where clients come first. We build your desired products and provide excellent, long-term customer support so that you can focus on the core of your business.">
<meta name="twitter:image" content="https://jsguru.io/img/jsguru.png">

5. Canonical Links

What are canonical links? For all of you who are not familiar with the term, canonical links are HTML tags that you put in the HEAD of your document and their purpose is to point to the original source of the content.

Canonical links can point to a different page/ link from the current page you are on, or they can be self referencing, meaning they can point to the same page you are currently on.

When Google comes across a canonical link that points to a different page it says to him “Hey don’t index this page, the actual source you should index is there.”.

If the canonical link is self-referencing, that signals to Google “Ok this is the definite root of the content”. If Google were to come across the same content again on a different website he would definitely know that your content is actually the original.

<head><title>JSGuru - What We Do</title><link rel="canonical" href="https://jsguru.io/what-we-do">
</head>
<body>
 ...
</body>

Do you remember how I mentioned earlier that we should handle both the non-www and www version of our domain? Well, be careful not to mix them in your canonical links, choose one preferred version and stick with it!

6. Localization — hreflangs

What if you have a multilingual site and you want different language versions served depending on the country of the visitor? How to go about that?

A common, but a discouraged approach is to geolocate the user by his IP address. This is usually done by storing the IP tables in your database and comparing them with the user’s or using a third party service like Ipinfo.

After determining the users location you would store it in a cookie and serve the appropriate language.

This seems like a sensible approach, doesn’t it? But why is it discouraged?

Well, firstly the geolocation by IP is not that precise, especially nowadays when people value their online privacy and are using VPN’s more and more, additionally, some internet providers themselves use proxies when giving out dynamic IPs.

Secondly what if the user is a German but he is in England on a business trip? He would get the English version and we don’t want that.

Thirdly you are taking away the possibility to manually choose the language version from the user.

Last but not the least, you are preventing Google from properly indexing all your website versions because their crawling servers are mainly in the US.

Now that we went over what not do, let’s go over what you should do!

First and foremost, the pages your hreflang links are pointing to should have the same content just in a different language, they should never have a completely different content, that is a NO NO.

When it comes to actual linking, you have two options:

a) Add hreflang link in the head of the HTML document

<!-- English (default) language page -->
<head><title>JSGuru - What We Do</title>
    <link rel="canonical" href="https://jsguru.io/what-we-do">
    <link rel="alternate" 
          hreflang="x-default"  
          href="https://jsguru.io/what-we-do" /><link rel="alternate" 
          hreflang="en" 
          href="https://jsguru.io/what-we-do" />

    <link rel="alternate" 
          hreflang="de" 
          href="https://jsguru.io/de/was-wir-tun" /><link rel="alternate" 
          hreflang="de-ch" 
          href="https://jsguru.io/de/was-wir-tun" /><link rel="alternate" 
          hreflang="de-at" 
          href="https://jsguru.io/de/was-wir-tun" />
</head>
<body>
 ...
</body>

It is important that you add the hreflang links on all pages not just your default language page.

<!-- German Language Page -->
<head><title>JSGuru - Was Wir Tun</title>
    <link rel="alternate" 
          hreflang="x-default"  
          href="https://jsguru.io/what-we-do" /><link rel="alternate" 
          hreflang="en" 
          href="https://jsguru.io/what-we-do" />

    <link rel="alternate" 
          hreflang="de" 
          href="https://jsguru.io/de/was-wir-tun" /><link rel="alternate" 
          hreflang="de-ch" 
          href="https://jsguru.io/de/was-wir-tun" /><link rel="alternate" 
          hreflang="de-at" 
          href="https://jsguru.io/de/was-wir-tun" />
</head>
<body>
 ...
</body>

Be careful not to combine hreflang tags with canonical links which point to different pages, as well. Hreflang tags can only be combined with self-referencing canonical links.

In our code example, we included the canonical link only in our English (default) language page, that’s because that is the original source of our content, the German page shouldn’t include the canonical link because it’s the same content just in a different language, if we were to include it we would just confuse the Google crawler.

b) Add hreflang link to the sitemap

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
   <loc>https://jsguru.io/what-we-do</loc><xhtml:link rel="alternate" 
                hreflang="x-default" 
                href="https://jsguru.io/what-we-do" />
    <xhtml:link rel="alternate"hreflang="de"href="https://jsguru.io/de/was-wir-tun"/>
    <xhtml:link rel="alternate"hreflang="en"href="https://jsguru.io/what-we-do"/>
    <lastmod>2018-08-28T09:24:19+00:00</lastmod><priority>1.00</priority>
</url>
</urlset>

IMPORTANT — you should always provide the full link including the protocol (also known as an absolute link) to the canonical or hreflang link tags!

You can read more in-depth about localization, hreflang tags and an additional approach to localization I didn’t cover here.

Here are some tools which can be helpful:

7. Images and Videos

When it comes to images you should always add the alt attribute which contains the textual description of the image. The benefits of adding alt attributes are twofold, firstly it will make your website more accessible, the visually impaired people will get the description of the image, and secondly Google will be able to understand the context of your images which will, as a result, increase your visibility in the search results both on the general search and image search.

Same goes for the videos as well. No matter whether you are adding them directly on your website or on platforms like Youtube/Vimeo you should always provide transcripts. Google can’t process images and videos, the only way search engines can discern their content is by textual descriptions.

8. Google Structured Data

If you ever thought about SEO being a black box, wait ‘till you start with Google Structured Data, that is a black Pandora’s box. There’s no closing this lid when you open it.

This is such a vast topic that it deserves a whole new blog post in itself, but I’ll try to cover the basics here and provide you with some helpful links.

Google Structured Data is an implementation of the Schema.org standard for rich data. Google uses this data to fill it’s Knowledge Graph, and show you rich search results a.k.a. Google Rich Cards.

What’s more, you can do everything right and your structured data might still not appear in the search results.

Using structured data enables a feature to be present, it does not guarantee that it will be present. The Google algorithm tailors search results to create what it thinks is the best search experience for a user, depending on many variables, including search history, location, and device type. In some cases it may determine that one feature is more appropriate than another, or even that a plain blue link is best. — per Google’s Policy

You can provide the structured data in three formats, but Google recommends JSON-LD so we will concentrate on that format. Here is an example of how it looks:

<script type="application/ld+json">
    {
         "@context": "http://schema.org",
         "@type":"LocalBusiness",
         "address": {
             "@type": "PostalAddress",
             "addressLocality": "Manhattan",
             "addressRegion":  "NY",
             "postalCode":"10036",
             "streetAddress": "400 Broadway"
         },
         "description": "This is your business description.",
         "name": "Craig's Car Repair",
         "telephone": "555-111-2345",
         "openingHours": "Mo,Tu,We,Th,Fr 09:00-17:00",
         "geo": {
             "@type": "GeoCoordinates",
             "latitude": "20.75",
             "longitude": "13.98"},
             "sameAs" : [
                 "http://www.facebook.com/example",
                 "http://www.twitter.com/example",
                 "http://plus.google.com/example"
             ]
    }
</script>

Here we have an example of LocalBusiness entity which is a subset of Organization entity. You should always try to be as specific as possible with structured data and use the most narrow definition of the entity as in this example. Additionally, you should always try to provide all possible attributes.

You can find example snippets that have been tried and tested by the community on this link, just replace the values with your own.

I also recommend Merkle structured data generation tool for starters, and later when you get a better understanding of how everything works you can expand on the generated data with additional properties.

Another option is to use Data Highlighter, it is a tool within Google Search Console under Search Appearance section, but it is currently only visible in the old view! Google is currently rolling out a new Search Console so I’m not sure about the future of this tool, it is to be determined.

Where should you put your structured data?

Structured data should go in the head of the HTML document.

<head>
    <script type="application/ld+json">{...}</script>
</head>

There is one general rule of thumb that you should adhere to, all the data that you’ve put in the script tag, should be actually visible on that page. For more info, you should consult the Google Guidelines.

Here are some links that could be helpful, as well:

Intro to structured cards
Guides
Rich Cards Search Results Testing Tool (currently in beta and limited to following entities: Job posting, Recipe, Course, TV and Movie, Event)
Google Structured Data Validation Tool
Google’s Simple Tutorial on How to Add Rich Cards

9. Google Local Business

Google Business, among other things, is essentially a more user-friendly way of adding LocalBusiness structured data, and you should definitely do it!

If your business has multiple locations you should add all of them. It is best to combine this method and adding structured data manually because if Google’s Knowledge Graph is populated with your social media pages and B2B platforms like Clutch it will automatically link them to your business and your reviews will be shown in the rich results.

There’s nothing much to add here, let’s move on!

10. Blog

Blog is still the Holy Grail of SEO and Digital Marketing. Despite the over-saturation with articles on many topics, this is still the best organic way to build links and increase traffic to your website.

You should try to publish regularly, but you shouldn’t sacrifice quality over quantity, Google’s algorithms have shifted more towards quality vs. quantity in recent years. Not only do they look for quality in the content but the quality of the links that lead to it as well.

When it comes to the blog the only dilemma you can have is whether to host it on a subdomain e.g. jsguru.io or a subfolder https://jsguru.io/blog.

Well, actually it’s not a dilemma, you should host it in a subfolder because subdomains are treated as different domains by Google so they will need to build their own reputation independently of your main domain. There is no value added to you with this approach.

When it comes down to the implementation of the blog you should still, at least partially stick to the old-school server-side rendered approach because Google indexing is two-pass, the second pass is for JS only websites which is a week after the initial pass, especially if your business model is centred around publishing. This has been confirmed by a Googler on Twitter:

Indexing is delayed for pure client side sides. Google indexer is two-pass, first run is without js, then week later it’s with is (or there abouts) – @Paul_Kinlan

11. Google Page Insights

Performance is one of the major factors of your ranking. The lower the load time of your website the higher your ranking will be, especially when it comes to mobile devices.

One great tool you can leverage when it comes to performance tweaking is Google Page Insights.

Some basic and common ways of improving your website performance are:

Minify your javascript and css files.
When adding jpg/jpeg images compress them to 80% of the quality, the difference will not be visible in the web environment but their size will significantly decrease.
If possible use a cookieless (stateless) domain to serve your static assets like images.
Serving different images for different screen sizes. There is no need to load a 1920x1080px image on a 320px wide screen.
Lazy loading images — loading images only when they enter the viewport of the device.
Gzip compression and browser caching (images, javascript, css). Here’s a nice tutorial for improving your page insight rank for ngnix servers. If you’re using apache you should look up mod_deflate and mod_expires extensions.
Use script defer and async.

12. Mobile Responsive and Mobile First Indexing

More and more internet users are coming from mobile devices, actually, they have surpassed the desktop users in general, and according to this trend, Google has shifted its focus on mobile devices several years ago. If you remember Google used to show a tag mobile-friendly in its search results.

Nowadays there is no need for it, and having a mobile-friendly website that offers a pleasant experience on all screen sizes is a no-brainer. In order to offer a better mobile UX, some people have sacrificed the content in the mobile versions of their websites.

With the latest changes to Google Algorithm, now they might pay the price for it. Google has started mobile first indexing, but what does that mean?

Previously Google would crawl the desktop version of the website for indexing, from now on, the mobile version will be used for indexing. So if you left out content to fit everything nicely in the smaller screens, your SEO might suffer.

13. Summary

If you’ve come this far I congratulate you, it has been exhausting for me to write all of this, I can only imagine how it is to read it! Yes, you deserve to pat yourself on the shoulder.

If I wanted you to take anything from this article it would be the following.

The three most important factors for good SEO are:

quality content,
quality traffic and
quality links.

As with everything in life quality trumps quantity, long gone are the days where you could just pay for links on some obscure websites or churn out shallow articles that barely touch the topic they are supposed to cover.

And lastly, have patience, these things take time, Google has no infinite amount of resources, and indexing new websites is not really on the top of their priority list, so it might take a few weeks or even months, to start having some real results.

OMG! I almost forgot I highly recommend you watch this Q&A with Reva from Digital4Startups we had the privilege of hosting her in our offices. The video quality su*ks but the audio is the important part anyway!