SEARCH   RSS

Using custom metadata, it is possible to improve SEO for Blot posts. We will improve our posts SEO by focusing on meta description, canonical links and Open Graph tags.


Improve Blot SEO with Metadata

01 Jan 2021

We will improve our posts SEO by focusing on:

  1. Meta description
  2. Canonical links
  3. Open Graph tags

Each Blot template contain a head.html file, as a machine-processing metadata container inside html <head></head> element. Use Blot administration panel for editing or do it locally, with your favorite editor.

Better Description Meta Tag

Meta descriptions are the short snippets that appear on search results pages like Google and Bing. Use unique descriptions to better describe each page, a big part in attracting and converting organic visitor and. Use long and precise descriptions, between 50 and 150 characters.

Search inside <head></head> block for <meta name=“description”> line. By default, Blot uses {{summary}} property (more about built-in properties), a snippet of text from the first paragraph of the entry.

<meta name=“description” content=“{{>> description}}”>

It is important that your first paragraph to be SEO focused because it will be displayed by Google or Bing as a snippet.

Let’s change this using custom metadata, inside post text / markdown file. Teaser is an built-in property, defined as:
The HTML of the title and the first few items in the entry. You can specify the end of the teaser by inserting the special tag more into your blog post’s file. Everything before more will be included in the teaser.

We will use this property with our custom description, which will be found on top of every post metadata for which we want to use a custom description and not Blot’s default truncated first paragraph:

...
Teaser: Using custom metadata, it is possible to improve SEO score for Blot posts.
...

Let’s return to template’s head.html editing:

<meta name=“description” content=“{{entry.teaser}}”>

Meta description will be updated with our custom teaser line written on post. But if we forget to define a custom teaser line, is better to revert to Blot default mechanism.

{{#entry.teaser}}
<meta name="description" content="{{entry.teaser}}">
{{/entry.teaser}}
{{^entry.teaser}}
<meta name="description" content="{{> description}}">
{{/entry.teaser}}

Basically, when the custom teaser line is missing, your template will use built-in description.

Rel Canonical

The canonical tag is a page-level meta tag that is placed in the <head></head> element of your page. It tells the search engines which URL is the canonical version of the page being displayed, to keep duplicate content out of the search engine index.

A canonical link allows webmasters to prevent duplicate content issues by specifying the “canonical” or “preferred” version of a web page.

Canonical URLs exist to help you deal with duplicate content issues that could affect the performance of your site. More informations about canonical links at Google Developers.

Let’s use canonical tag in our Blot template, because is missing.

Note: If you use Blot for regular blogging, your posts are unique and varied, then all the posts must be indexed. So we will have the lazy man approach - we will explicitly define which posts are not canonical. In our post markdown file, we’ll fill in top metadata structure, but only for non-canonical posts with a new line:

...
Teaser: Using custom metadata, it is possible to improve SEO score for Blot posts.
Canonical: no
...

Again to template’s head.html editing:

{{#entry.metadata.canonical}}
<link rel="canonical" href="{{{blogURL}}}">           
{{/entry.metadata.canonical}}
{{^entry.metadata.canonical}}
<link rel="canonical" title="{{entry.title}}" href="{{{blogURL}}}/{{{entry.slug}}}">
{{/entry.metadata.canonical}}

If our post is a non-canonical type, value returned for <link rel=“canonical”> is your website url. If your post is canonical (and you don’t have to write that new line), the value returned is your post full url (slug or permalink).

For better control and results, I recomment to write and use custom permalinks and not Blot’s generated permalinks (slugs). My post metadata section contains the following lines too:

...
Permalink: /improve-blot-seo—with-metadata
Teaser: Using custom metadata, it is possible to improve SEO score for Blot posts.
Canonical: no
...
My updated relevant <head></head> section:
{{#entry.metadata.canonical}}
<link rel="canonical" href="{{{blogURL}}}">           
{{/entry.metadata.canonical}}
{{^entry.metadata.canonical}}
<link rel="canonical" title="{{entry.title}}" href="{{{blogURL}}}{{{entry.permalink}}}">
{{/entry.metadata.canonical}}

Keep in mind that I use to write permalinks with slash / in front. If you don’t want to do use slash at the beginning, adjust the line {{{blogURL}}}/{{{entry.permalink}}} accordingly, with slash character in it.

Open Graph Meta Tags

Open Graph Meta Tags have absolutely no direct impact on SEO but shared links with proper crafted Open Graph meta tags have the potential to achieve more visibility than those without them. Open Graph provides optimization for social media exposure.

Some Blot templates are updated for Open Graph protocol, some are a not. Let’s look at head.html file of your template and in the <head></head> section, let’s append or replace some minimal setup code:

<meta property="og:type" content="website">
<meta property="og:image" content="{{{thumbnail}}}">
<meta property="og:site_name" content="{{> title}}">
<meta property="og:url" content="{{{blogURL} }}">
<meta name="twitter:site" content="{{> title}} - {{{blogURL}}}"> 
<meta name="twitter:card" content="summary">
<meta name="twitter:title" property="og:title" itemprop="title name" content="{{> title}}">
<meta name="twitter:description" property="og:description" itemprop="description" content="{{> description}}">

Of course, there are certainly other possibilities to achieve the same results, more correctly or even better, with Blot metadata. I’m not a SEO consultant or expert and not a Blot developer.

Big applause for David Merfield, who has created and continuously develop Blot.


Photo:  Myriam Jessier Tags: bloteng