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" />
“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.