As a backend developer, my focus mostly goes to implementing new features, fixing bugs, optimizing SQL queries and so forth. What about SEO, though? Well, I’ve never learned that. It is a whole different skill set, a job on its own. Out of curiosity, and because I had the opportunity to build a super tiny one page static website, I took some time to learn about the basics of SEO. Bear in mind I’m not laying down advanced strategies, this is more like bullet points to make sure you’re not shooting yourself in the foot. So here are the things I learned.

Have a valid markup (both HTML and CSS)

This is a basic one, but we all make mistakes. Use tools that check your HTML and CSS for errors and fix them. This was a big issue back in the day when web browsers were not that smart. It’s less of an issue now, but search engines (I mean Google) won’t appreciate invalid markup.

Charset

Announce the charset within the <head> tag.

If it’s UTF-8: <meta charset="utf-8">

Reduce assets load speed

Compression

Lightweight assets are the way to go. Compress images, minify CSS and JS and use CDN versions when possible.

For those of you who understand french, you can learn more about images compression here: https://blog.capsens.eu/optimiser-les-images-pour-le-web-66f2a4824f28

Then activate GZIP compression at the HTTP server’s level:

Caching

Your HTTP server has caching capabilities you shall exploit. Since this is server-specific, I can only advise you read the proper documentation. For example, if you’re running nginx, search for nginx caching .

If that’s too much time-consuming, at least make sure that you’re setting the ETag HTTP header correctly.

CSS at the end of <head>, JS at the end of <body>

You want to load CSS early on because it has a great impact on user experience. Javascript, on the other side, can be really heavy to load; it can wait. You do not want the user to wait for all assets to be loaded before seeing anything on their screen. Let them at least have static content, then Javascript will kick in when it’s loaded. Also, when possible, load your JS scripts asynchronously.

If your CSS is too heavy, load the critical part of if at the end of <head> and the rest after the waterline. We call the waterline the limit of what users see when they load the page without scrolling down.

Use tools to measure the load speed of your website

https://developers.google.com/speed/pagespeed/insights/

And fix things when you can. This is important.

Sitemap

A sitemap is an XML file that lists all public pages for search engines to index them. If you’ve never heard of this, you can craft your first sitemap using tools such as https://www.xml-sitemaps.com. I used to believe that it’s relevant only for websites with many pages, but Google wants a sitemap even for a single-page website (find more about this on the Google Search Console section below).

robots.txt

This one doesn’t have much impact but doesn’t cost much, so there’s not reason why you wouldn’t have one. It just adds up to the means of telling Google you’re abiding to Internet standards.

robots.txt is a text file that must be publicly accessible at https://www.mywebsite.com/robots.txt . It gives search engines both whitelist and blacklist indexing rules. You might also want to explicitly declare the route to your sitemap in this file ( Sitemap: http://www.mywebsite.com/sitemap.xml )

The most simple robots file would be this:

Title

It appears in Google searches, browser tabs, etc. You better have an awesome title. Keep in mind that you need a different title for each page of your website, and keep them under 60 characters.

Little tip here: Google understands when someone searches for “how to”, “review”, “best” and other keywords (we could call them modifiers too). Use them wisely.

<title>Best chocolate chip cookies recipe 2019</title>

Meta tags

Author

The last little website I made was for promoting a small one-person business. Adding an author meta tag cannot hurt.

<meta name="author" content="John Doe">

Description

This is a summary of your web page. This is usually what search engines will display under the title of your page in the search results.

<meta name="description" content="Lorem ipsum">

Twitter Cards

Help Twitter make your web page shareable.

<meta name=”twitter:card” content=”summary” />

<meta name=”twitter:site” content=”@yoursite” />

<meta name=”twitter:title” content=”Your Title” />

<meta name=”twitter:description” content=”Your description.” />

<meta name=”twitter:image” content=”https://where-your-image-is-hosted/name.jpg” />

Open Graph

Help social networks make your web page shareable.

First add the xmlns:og attribute to the <html> tag:

<html xmlns:og="http://ogp.me/ns#">

Then add the following meta tags under <head> :

<meta property="og:title" content="Your webpage title">

<meta property="og:description" content="Your webpage short description">

<meta property="og:site_name" content="Your website name">

<meta property="og:type" content="website">

<meta property="og:url" content="https://www.your-website.com">

<meta property="og:image" content="https://www.your-website.com/images/cover.jpg" />

<meta property="og:locale" content="en_US">

Canonical link tag

Let’s say you have the same page accessible from two different URLs:

https://mywebsite.com/somepage

https://www.mywebsite.com/somepage

From Google’s point of view, this is duplicate content. Google doesn’t like duplicate content.

A canonical <link> solves this problem by telling the search engine which URL is the main one.

<link rel="canonical" href="https://www.mywebsite.com/somepage">

Be careful with this as Google won’t index the other URLs. Either master the subtleties of this or don’t use it.

JSON-LD

This is a great tool for declaring a lot of information about your business. It can contain what type of business you run, address, phone number, exact geographic coordinates (for maps), etc. It also goes under <head> :

<script type="application/ld+json">

{

"@context": "http://schema.org",

"@type": "https://schema.org/XXX",

"address": {

"@type": "PostalAddress",

"addressLocality": "XXX",

"addressRegion": "XXX",

"postalCode": "XXX",

"streetAddress": "XXX"

},

"description": "Your website description",

"name": "Your website name",

"image": "https://www.your-website.com/cover.jpg",

"telephone": "XXX",

"geo": {

"@type": "GeoCoordinates",

"latitude": "XX.XXXXX",

"longitude": "X.XXXXX"

}

}

</script>

There are a lot of information you can declare here, just take a look at the documentation: https://schema.org (the search box is useful too).

Microdata

JSON-LD gives information about a page or a website. Microdata annotates the content of the page. Keep in mind that search engines, powerful as they might be, don’t yet have human-level capabilities of understanding. We need to help them understand the content we expose so that they can help us get the reach we seek.

Want to learn more about this? Read the documentation: https://html.spec.whatwg.org/multipage/#toc-microdata

Images ALT attribute

In addition to images filenames, search engines use alt values to determine what each image represents. It’s also another way to include keywords in your web page (as long as you don’t over do it).

Google Search Console

Search Console tools and reports help you measure your site’s Search traffic and performance, fix issues, and make your site shine in Google Search results.

This is a must do. Create your account and basically follow the steps. You will:

Register your website on https://search.google.com/search-console/about

Add a google-site-verification meta tag to your HTML document

Upload on your server a file Google will generate for you

Register your sitemap

Responsive web design

Google highly favors responsive designs. This is because many users nowadays check your website using their smartphone rather than a computer. To avoid headaches, I’d suggest you adopt a mobile-first approach when designing new websites.

Some documentation: https://developers.google.com/web/fundamentals/design-and-ux/responsive/

HTTPS

Google officially said it’s one of the many things they check. And it doesn’t cost a penny: https://letsencrypt.org/

Avoid popups

Like humans, Google doesn’t like it when something pops up and hinders the user from reading the content they’re trying to reach.