Techniques to improve SEO for a static website or blog

Published on 2020-07-18
Last updated 2020-08-12

To be found, you need to describe yourself well to computers

SEO is as important as a good mailing-list to reach your (potential) audience.

Over the past 10 years, I’ve made some mistakes and also took home some knowledge about SEO for blogs and websites.

Below I’ve compiled a list of techniques and code-snippets that I personally use (hint: view-source) to improve for organic website traffic and SEO.

To make your content more enjoyable by users (social media sharing, RSS, search results) and descriptive to machines (SEO).

Table of contents
- The head tag

The head tag

HTML5 (of course)

enable it by starting your document with <!DOCTYPE html>

Open Graph protocol

to your <html> attach the attribute prefix="og:http://ogp.me/ns#" to announce that you’re going to specify Open Graph metadata (e.g. og:title, og:type etc)

utf-8

specifies the document’s character encoding

<meta charset="utf-8">

the title tag

add a descriptive title to your web pages. for consistency, I add - News from Chris

<title>... - News from Chris</title>

meta tag “description”

define a description for the page.

It could be an excerpt of the blog post.

Or a default description like this one

<meta name="description" content="A blog about agile, programming, clean code, testing, javascript">

Whatever describes concisely why this web page exists.

feed the robots

helps your website to be crawled by robots

<meta name="robots" content="index,follow,max-video-preview:-1,max-snippet:-1,max-image-preview:large, max-video-preview:-1, max-video-preview:-1">
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />

DNS preconnect

“Pre-heat” a connection to a host.

For example if you have a script or stylesheet loaded from a CDN or images from unsplash.com:

<link rel="preconnect" href="https://images.unsplash.com">

Google Site Verification

Verify your site ownership and get access to Google Search data and Google WebMaster Tools.

<meta name="google-site-verification" content="..." />

Responsive tags and others

Tell the browser how to scale and handle your content:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">

meta tag “author”

describe the author of this document

<meta name="author" content="Christian Fei">

meta tag “keywords”

I think I read somewhere that spiders ignore this tag completely or give it very little relevance, due to its abusive past.

It doesn’t hurt if you include it:

<meta name="keywords" content="Christian Fei,developer,programming,javascript,full-stack" />

Learn about topics like

canonical url
RSS
Icons
schema.org data
Inline CSS and PageSpeed score
manifest.json aka Web App Manifest
Web App meta tags

Twitter meta tags

define stuff like your handle, who wrote this piece, the preview size on twitter etc

<meta name="twitter:site" content="@devcri">
<meta name="twitter:domain" content="cri.dev">
<meta name="twitter:creator" content="@devcri">
<meta name="twitter:card" content="summary">
... read more in the ebook

Open Graph and Facebook

Using the og: meta tags you define in the same way the content as above essentially, using different tags…

<meta property="og:locale" content="en_US" />
<meta property="og:title" content="..." />
... read more in the ebook

Table of contents