Back

Blog upgrade: Post excerpts, microformats and improving performance

Time for an upgrade

I finally made some time available to work on this blog. There were a couple of things I wanted to improve since I moved to GitHub Pages/Jekyll.

  1. Better looking index page. Before todays change it was a very simple (and boring) bulleted list of links containing the date and title of individual blogposts.
  2. Improved content structure. Having a well defined content structure improves SEO.
  3. Higher performance. Faster page loads makes both users and Google happy.

Index page with blog excerpts

I wanted more body in the index page but I didn't want a huge page with full blog posts. Luckily Jekyll supports the usage of post excerpts out of the box. You add the excerpt seperator to the _config.yml:

excerpt_separator: <!--more-->

And in the content of the post where the excerpt ends you place the seperator:

## Title

This is included in the excerpt.

<!--more-->

This is not included int the excerpt.

Jekyll will use the content before the seperator as the excerpt. This can be used in the index page when iterating the posts as:

{% raw %}
{% for post in paginator.posts %}
  ...
  {{ post.excerpt }}
  ...
{% endfor %}
{% endraw %}

Super easy. Let's continue with structuring the content.

BlogPosting microformat

I stumbled on this page on how to use a blogpost microformat with Jekyll.

Although I heard of microformats before I never really took the time to look into it. It appears that there are microformats for nearly everything! Ranging from the most basic Thing to AdultEntertainment to Volcano (notice the smokingAllowed propery on that one ;) ).

The most useful for blog writers is the BlogPosting microformat. I'm currently using the following properties in the post.html layout:

  • itemscope itemtype="http://schema.org/BlogPosting" on the article element.
  • itemprop="name" on the h1 which contains the blog title.
  • itemprop="datePublished" on the time element.
  • itemprop="auhor" and itemscope itemtype="http://schema.org/Person" on the span which contains my name.
  • itemprop="articleBody" on the div that contains the post body content.

Google provides an online testing tool to verify structured website data. Currently I'm still missing publisher and image data but search engines should already be able to index my blog posts better which will improve SEO.

Improving performance

The last thing on my list was to improve the performance of my blog. YSlow and Google PageSpeed scores were around 80 out of 100 which is not bad to begin with. But both of these tools indicated that using a content delivery network (CDN) would improve performance. I've used CDN solutions for work projects but never considered it for personal projects like this blog.

I found that CloudFlare offers a free plan for personal websites so I signed up right away. I was quite surprised that this free plan still allows a great deal of configuration. A useful feature is the developer mode which disables the caching temporarily so you can see your changes quickly.

The YSlow score for this page is now at 92 and Google PageSpeed is at 85 and I'm quite content with those numbers. Now it's time to write more posts again and get the traffic going!

Back to top