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.
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
- Table of contents
# The head tag
# HTML5 (of course)
enable it by starting your document with
# Open Graph protocol
<html> attach the attribute
prefix="og:http://ogp.me/ns#" to announce that you’re going to specify Open Graph metadata (e.g.
specifies the document’s character encoding
# 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
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:
Learn about topics like
Inline CSS and PageSpeed score
manifest.json aka Web App Manifest
Web App meta tags
# Social Media Fluff
# Twitter meta tags
define stuff like your handle, who wrote this piece, the preview size on twitter etc
<meta name="twitter:site" content="@christian_fei">
<meta name="twitter:domain" content="cri.dev">
<meta name="twitter:creator" content="@christian_fei">
<meta name="twitter:card" content="summary">
... read more in the ebook
# Open Graph and Facebook
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
More in the book about:
Schema.org meta data for articles
Google WebMasters & Google search console
These are all the tricks I have to share!
I hope you found it useful and managed to see some improvements with the SEO of your site.
Let’s stay in touch: @christian_fei