SEO Tips for Programming Blogs and Technical Bloggers in 2018

This is an AMP version of this page click here to see the oryginal version.

I’ve noticed that many programming blogs I read don’t implement certain simple SEO techniques, and bloggers could be missing valuable traffic opportunities. I will describe a couple of search engine optimization tips which can improve your technical blog’s SEO ranking and search results position in 2018. I will cover topics like Google’s Featured Snippets, AMP, best rendering speed tips and social media meta tags.

I use jekyll based pixyll template for this blog but most of the tips should be applicable to all custom blog engines. If you use Medium as your only blogging platform (protip: you probably shouldn’t) none of these tips will be applicable.

Here’s what you can do:

Add Open Graph and Twitter meta tags to improve social sharing

Social media sharing is one of the top sources of traffic to my blog. You can affect how your post looks when shared on social media sites by using so-called “Open Graph meta tags”. Which of these Twitter cards would you rather click?

Blogger's post shared on Twitter without correct meta tags

Blogger's post shared on Twitter with correct meta tags

Currently my blog uses the following meta tags:

<meta property="og:locale" content="...">
<meta property="og:type" content="...">
<meta property="og:title" content="...">
<meta property="og:description" content="">
<meta property="og:url" content="...">
<meta property="og:site_name" content="...">
<meta property="og:image" content="...">
<meta property="og:image:width" content="...">
<meta property="og:image:height" content="...">
<meta property="article:published_time" content="..." />

<meta name="twitter:card" content="...">
<meta name="twitter:image" content="...">
<meta name="twitter:site" content="..." />
<meta name="twitter:creator" content="..." />
<meta name="twitter:title" content="..." />
<meta name="twitter:description" content="..." />
<meta name="twitter:url" content="..." />

The best way to check how your page will display on social media sites is to use these tools:

Twitter Card Validator

Facebook Open Graph debugger

Add Accelerated Mobile Pages (AMP) to your blog

Although they are the most hated technology on the Hacker News, Accelerated Mobile Pages are here to stay.

As long as it’s Uncle Google who decides if anyone can find your website, you have to play by his rules. Adding an AMP support is not a rocket science and could be a positive ranking signal which increases your chance of appearing in Google’s search results. Also (together with Structured Data) it is the only way for your website to appear in Google’s Featured Snippets and Chrome’s suggested articles.

A little lightning icon indicates an Accelerated Mobile Page

I added AMP support to this blog using amp-jekyll together with a template from amplify. When your AMP page version is ready you can validate and submit it using this tool:

Validate AMP website

Standard page version on a mobile browser

AMP version on a mobile browser

BTW bad news for other backend developers who have to write their own CSS: important! is not permitted and will result in AMP validation error :(

As I mentioned adding Structured Data enables your AMP website to appear in Google’s featured snippet top search result:

Featured Snippet thanks to AMP and Structured Data

This is a BlogPosting entry scaffold I use for this blog:

<script type="application/ld+json">
    "@context": "",
    "@type": "BlogPosting",
    "mainEntityOfPage": {
    "headline": "...",
    "image": {
      "@type": "ImageObject",
      "url": "...",
      "height": 640,
      "width": 1024
    "datePublished": "...",
    "dateModified": "...",
    "author": {
      "@type": "Person",
      "name": "..."
    "publisher": {
      "@type": "...",
      "name": "...",
      "logo": {
        "@type": "ImageObject",
        "url": "...",
        "width": 600,
        "height": 60
    "description": "...",
    "keywords": "..."
A sample structured data for a blog post. Publisher logo must have 60x600 size.

Remember that adding an AMP support and Structured Data does not guarantee that your website will be featured. It has to be in top 10 results for a given search phrase (but not necessarily first). All you can do is double check if Structured Data entry is correct using this tool and make sure that all other mobile and SEO optimisations are in place. So far I managed to see a featured snippet for only one of my blog posts using a bit clunky keywords. But I see a decent traffic coming from source and it means that users see and arrive to my website via Chrome’s suggested articles section.

Backlink from AMP to the original version of the blog post

If your website has an AMP version, visitors might arrive to it not only through Google. I’ve noticed that when I publish links to my blog posts on Twitter, after clicking it on my mobile browser I am redirected to an AMP version, not the original one.

One problem here is that it is an AMP page hosted by you, not a Google CDN. It means that a top link to the original version is missing. You should add it yourself if you want your visitors to have optional access to e.g. Disqus comments, which are not supported on AMP.

Setup Google Analytics for AMP

You need to import a special version of Google Analytics and explicitly track visitor page view to obtain tracking data from AMP pages:

  <script async
  <amp-analytics type="googleanalytics">
    <script type="application/json">
      "vars": {
        "account": "YOUR-GOOGLE-ID"
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"

BTW I still don’t know how to define a trigger entry to differentiate AMP traffic from the standard one in Google Analytics. Tips are appreciated.

Optimise rendering speed and “mobile friendliness”

In 2016 Google announced its “Mobile-first” approach to ranking pages. How fast page loads and feels for mobile users is a crucial ranking signal which should be optimised. These are some great tools allowing you to detect your website’s mobile shortcomings:

Google Page Speed Insights

Mobile-Friendly Test

Web Page Test

Here are a couple of optimizations I successfully applied to this blog:

Leverage browser caching with assets preprocessor

Google’s speed test will not be satisfied as long as you don’t cache your static assets for at least 8 days. To avoid problems with client browsers keeping outdated resources you should use the assets preprocessor. For this blog, I am using jekyll-assets to add digest tags to all the resources. Whenever an asset changes its digest tag in URL is modified so I can cache everything without worrying that outdated version is ever served.

One problem is that you cannot cache external resources like Disqus JavaScript library of Google Analytics itself. There are some hacky ways to overcome it. You could periodically download up-to-date files to your server using scheduled tasks, and add caching headers but I did not try to do it yet.

I use Cloudflare to configure browser caching headers.

Optimize and resize images

This one is quite easy to fix. Just process all your images with Also, make sure they are only as big as needed to display properly in all resolutions. I’ve only just recently removed a 6000x4000 sized image from landing page of Abot - Anonymous feedback bot for Slack.

Reconsider website dependencies

For me an interesting side effect of playing with those optimization tools was that I started thinking more about the code I embed on my websites. Do I really need a fancy live chat support on a landing page when a standard contact form would do? Do I need an interactive like/follow button embedding KBs of spyware my visitors will probably block anyway? Maybe I could just add an icon linking to my account/fan page instead?

It is entirely up to you but spoiling your website mobile friendliness and SEO ranking for a couple of bells and whistles could not be the best tradeoff.

Check the optimization results

After a couple of SEO optimizations Google speed ranking is finally green.

As you can see this blog is quite swifty according to Google speed test. When I started SEO and rendering speed oriented optimization it was around 70. Please note that mobile version assessed here is the standard one, not an AMP.

Use SSL for your blog

There is no excuse on why a technical blog (or any website) in 2018 should not have an SSL support. Since 2014 HTTPS is a ranking signal for the Googlebot. You can check out my other blog posts for tips on how to setup a free wildcard SSL with Cloudflare and serve all browser assets via HTTPS using a simple SSL proxy.

Don’t trust Google Analytics traffic stats

Maybe it’s not standard search engine optimization tip but worth mentioning anyway. Google Analytics is amazing. Only terribly inaccurate:

Google Analytics report ~500% less traffic than Cloudflare

I was surprised to see how much both figures differ. I am targeting tech-savvy users in my blog posts so it probably increases the ratio of ad/tracking blockers enabled, but still, 500% difference is huge. If you make any business decisions based on Google Analytics data remember to take it into account. You can add Cloudflare to your website for free. Contrary to Google Analytics it works by proxying all the traffic through their servers so is impossible to block.

Summary of SEO tips for bloggers

Some people say that there is no such thing as search engine optimization techniques. You just need to create a valuable content. But why not help this valuable content get discovered by optimizing it?

I hope you did not know at least one of those SEO techniques and will notice a traffic increase after applying it to your website. Let me know if I got something wrong or you know other ways to improve a programming blog’s SEO ranking.

Posted by Paweł Urbanek on Feb 16, 2018

Find me on Twitter or GitHub.

This is an AMP version of this page click here to see the oryginal version and comments.