Related articles
The basics of SEO
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.
As a backend developer, I mainly focus on implementing new features, fixing bugs, optimizing SQL queries, etc. But what about SEO? Well, I never learned that. It's a completely different set of skills, a job in its own right. Out of curiosity, and because I had the opportunity to build a very small static one-page site, I took the time to learn the basics of SEO. Keep in mind that I'm not developing advanced strategies, they're more of a point of reference to make sure you don't shoot yourself in the foot. So here are the things I've learned.
Have valid markup (both HTML and CSS)
It's a building block, but we all make mistakes. Use tools that check your HTML and CSS for errors and correct them. This was a big problem back when web browsers weren't that smart. It's less of a problem now, but search engines (I mean Google) don't like invalid tags.
Charset
Announce the charset in the tag <head>.If it's UTF-8: <meta charset="utf-8">
Reduce asset loading time
Compression
Light resources should be preferred. Understand images, reduce CSS and JS, and use CDN versions when possible. Page speed Insight can help: https://developers.google.com/speed/pagespeed/insights/?hl=fr
For those who understand French, you can find out more about compressing images here: https://capsens.eu/blog/optimiser-les-images-pour-le-web-66f2a4824f28.
Then enable GZIP compression on the HTTP server: https://seositecheckup.com/articles/how-using-gzip-compression-helps-your-sites-seo
Caching
Your HTTP server has caching capabilities that you need to take advantage of. As this is server specific, I can only advise you to read the appropriate documentation. For example, if you're using nginx, look for nginx caching. If it's taking too long, at least make sure 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 big impact on the user experience. Javascript, on the other hand, can be really cumbersome to load; it can wait. You don't want the user to wait for all the assets to load before they see anything on their screen. Give it at least some static content, then Javascript will kick in when it's loaded. Likewise, 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 fold. We call the fold line the limit of what users see when they load the page without scrolling.
Use tools to measure the loading speed of your website
https://developers.google.com/speed/pagespeed/insights/
And fix things when you can. It is important.
Site map
A sitemap is an XML file that lists all public pages so that search engines can index them. If you've never heard of it, you can create your first site map using tools like https://www.xml-sitemaps.com. I used to think it was only relevant for websites with lots of pages, but Google wants a sitemap even for a single-page website (for more, see the Google Search Console section below).
robots.txt
This file doesn't have much impact, but it's not expensive. So there's no reason why you shouldn't have one. It's just a way to let Google know that you're complying with Internet standards.
The robots.txt file is a text file that should be available to the public at https://www.mywebsite.com/robots.txt. It gives search engines whitelisted and blacklisted indexing rules. You can also explicitly declare the route to your site map in this file (Site map: http://www.mywebsite.com/sitemap.xml).
The simplest robots file would be the following:
User-agent: *
Disallow:
Sitemap: http://www.mywebsite.com/sitemap.xmlTitle
It shows up in Google searches, browser tabs, etc. You better have a great title. Keep in mind that you should have a different title for each page on your website and that it should be under 60 characters.Quick tip: Google understands when someone searches for “how to,” “how to,” “review,” “best,” and other keywords (you could also call them modifiers). Use them wisely.
<title>Best chocolate chip cookie recipe 2019</title>
Meta tags
Author
The last small website I made was meant to promote a small one-man business. Adding an author meta tag can't hurt.
<meta name="author" content="John Doe">
Description
It's a summary of your web page. This is usually what search engines show under the title of your page in 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
<html>Help social networks make your web page shareable. First add the xmlns:og attribute to the tag:<html xmlns:og="http://ogp.me/ns#"><head>Then add the following meta tags under:
<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 that's 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 tag <link> canonical solves this problem by telling the search engine what the main URL is.
<link rel="canonical" href="https://www.mywebsite.com/somepage">
Be careful with this as Google won't index other URLs. Master the subtleties or don't use it.
JSON-LD
It is a great tool for reporting a lot of information about your business. It can contain the type of business you manage, 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's a lot of information you can report here, just take a look at the documentation: https://schema.org (the search box is also useful).
Microdata
JSON-LD provides information about a page or a website. The microdata annotates the content of the page. Keep in mind that search engines, as powerful as they are, don't yet have human-level comprehension capabilities. We need to help them understand the content we're exposing so they can help us get the reach we're looking for. Want to know more? Read the documentation: https://html.spec.whatwg.org/multipage/#toc-microdata
ALT attribute for images
In addition to image file names, 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 abuse them).
Google search console
Search Console tools and reports help you measure your site's traffic and search performance, fix issues, and make your site shine in Google's search results.Search Console tools and reports help you measure your site's traffic and search performance, fix issues, and make your site shine in Google search results.
It is an essential activity. Create your account and follow the steps. You are going to:
- Save your website to https://search.google.com/search-console/aboutajouter a google-site-verification meta tag to your HTML document
- Upload a file to your server that Google will generate for you.
- Save your sitemap
Responsive web design
Google favors responsive designs. Indeed, many users now consult your website using their smartphone rather than a computer. To avoid headaches, I suggest that you adopt a “mobile-first” approach when designing new websites.Some documents: https://developers.google.com/web/fundamentals/design-and-ux/responsive/
HTTPS
Google has officially declared that this is one of the many things it checks. And it doesn't cost a cent: https://letsencrypt.org/
Avoid popups
Like humans, Google doesn't like anything to pop up and prevents the user from reading the content they're looking for. Go beyond technical SEO
Many people still believe that SEO is about putting lots of keywords into a web page. In fact, Google hates it.
My last piece of advice would be to go beyond SEO techniques: a great user experience is the best (organic) SEO. Create quality content on a regular basis, give users what they want, how they want it. This will allow them to spend more time on your site, which will reduce your bounce rate, attract backlinks, etc. Google will reward you for doing so.
If some of you want to know even more about the subject and design a real SEO strategy, let me give you some keywords to guide your next searches:
- Google Panda
- Google Penguin
- Google Pigeon
- Google Hummingbird
- Google Payday Loan
- Google Mobilegeddon
- Google Fred
What is it? Google algorithms that contribute to the ranking of your web pages. Yes, PageRank hasn't been alone for a long time now. SEO is really a vast and constantly evolving topic, and one blog post can't cover everything. Hopefully, these beginner tips will help you get started.
Thanks for reading!