This blog post is for backend developers who want to learn the basics of technical SEO. This blog post is for backend developers who want to learn the basics of technical SEO.
A team brainstorming
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.
HTML:
CSS:
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.
PageSpeed insight might be able to help you : https://developers.google.com/speed/pagespeed/insights/?hl=fr
For those of you who understand french, you can learn more about images compression here: https://capsens.eu/blog/optimiser-les-images-pour-le-web-66f2a4824f28
Then activate GZIP compression at the HTTP server’s level:
https://seositecheckup.com/articles/how-using-gzip-compression-helps-your-sites-seo
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.txthttps://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:
User-agent: *
Disallow:
Sitemap: http://www.mywebsite.com/sitemap.xml
A Robots.txt file sample
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” />A twitter card sample
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">OpenGraph tags sample
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>A json/LD sample
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.
Go beyond technical SEO
Many people still believe that stuffing many keywords in a web page is SEO. Google actually hates that.
My last advice would be to go beyond SEO technics: a great user experience is the best (organic) SEO. Regularly create quality content, give users what they want the way they want it. It will make them spend more time on your website which will reduce your bounce rate, attract backlinks, etc. Google will reward you for that.
If some of you want to learn even more about this and design a real SEO strategy, let me give you some keywords to guide your upcoming searches:
Google Panda
Google Penguin
Google Pigeon
Google Hummingbird
Google Payday Loan
Google Mobilegeddon
Google Fred
What’s all this? Google’s algorithms that contribute to ranking your web pages. Yes, PageRank hasn’t been alone for a long time now.
SEO really is a broad, always moving topic and a single blog post can’t cover it all. I hope these beginners guidelines will help you get started.
Thank you for reading!