Hacking Meta Data with Blot.Im - Part 1

I've been looking at ways to hack the SEO and Meta Data with Blot.Im. I wanted to hack the meta data in all my posts so I can use Twitter Cards and Open Graph more effectively. Why? I get a two for one benefit right off the bat. I get better SEO and deletion of meta data duplicates that affect Google crawlers.

My changes are already having a huge effect. My bounce rate has dropped from the high 60-70% down to the 5% range. This means people aren't visiting my site and then jumping off, they're searching, finding my content to be relevant, and staying. All this because of some meta data hacking that I'm sharing below.

2016 Bounce Rate

What I'm sharing should be applicable to other CMS type of systems as well.

The Basic Markdown File

It all starts with your blog post. For me that's writing in a markdown format but it doesn't matter what format you choose. What matters is at least 4 bits of metadata.

What I'm talking about is your Title, Date, Permalink Structure, and Tags.

The Title is important because if you do your templates right, your webpage title should be the same as your article title. This is an important aspect of SEO, each webpage should have a unique title.

The Date is important from a personal organization point of view but less so from an SEO standpoint. Unless there is an important need to timestamp your articles, don't do it. Who wants to read an old (but great) article that's timestamped 5 years ago? Date the article for your personal organization but don't show it in the actual blog post.

The Permalink Structure (PS) is all important. This is something I learned over the past few months. I used to have a PS with the /Year/Month/Day/Title format. It was great from a personal organization standpoint but people could see how dated some of my posts were and moved on to more current ones. Do yourself a favor and just use a /Title convention for all your blog posts, it works better.

The last bit of information is Tags and their use is for internal Blog navigation. I use them quite a bit to let my visitors navigate to similar tagged articles. Take the time and think about your tagging structure. Focus on the main category tags and a few subcategory ones and don't go crazy tagging your post with 100's of tags. Tagging does NOT help your SEO.

These 4 items are something you should think about as you write your awesome blog post.

The Blot Markdown File

Because Blot operates different than Wordpress or other CMSs, I have more control in a blog post. For example, at the top of every blog post I have write in those 4 bits of metadata. It looks something like this:

Title: My Blog Article Title

Date: 2016-08-24

Tags: Blogging, CMS, Metadata

Permalink: my blog article title

What was missing from this header file are things like "Author:", "Thumbnail:", and "Description:". I wanted to add these extra bits of metadata into my blog post for several reasons. First, I wanted to show a thumbnail photo when I autopost to Facebook or Twitter. Second, I wanted to show the Author of the blog post, and third I wanted to add a description of the post.

Adding a description to the blog post is crucial in hacking the initial Blot template. The Blot template I'm using doesn't auto generate a HTML tag correctly, which is critical to good SEO. Just as it's important to have a proper webpage title for each post, you must have a good description. Google Search uses that description in it's search results. If you don't have it, your SEO will far from the top page.

So how do you take a description, turn it into metadata in your markdown file, and pass it to the HTML tag automatically?

You have to hack your Blot html templates!

You can define new metadata information easily with Blot by just adding it (i.e. Description:) to your post.

Blot Meta Data Post

For your post to properly show up, you must call that metadata somewhere in the HTML templates. For example, the metadata "Author:" is called in my entry.html page like so:

Blot Entry Author

If I want to call "Author:" anywhere else, you have to use {{{metadata.author}}}. Just leave one set of curly brackets off. Why do I have {{{#metadata.author}}}...{{{/metadata.author}}}? This is a conditional. Without this conditional many of my old posts will break IF there's no entry for Author.

We'll revisit these conditionals later.

The "Description:" metadata was a bit trickier because I didn't define a description for all my posts. I had to come up with a way to drop a summary into the description if I didn't write one. Luckily Blot autogenerates a summary via the { {summary} } tag.

This is where I stumbled at first, I couldn't get this to work with our pestering David the creator of Blot.Im.

Hacking your Page Description

Just open your head.html template and edit the fields with the following. This assumes that you have define a "Description:" metadata entry in your blog post (see above).

Blot Meta Data Description

The reason for the two lines of code is to provide a "catch all" again. I have 100's of posts that don't have "Description:" defined in the markdown post but have an opening paragraph I could use as a description. This is where the { {summary} } metadata comes into play.

At first this didn't work because I was using { {summary} }. The trick is to call it as { {entry.summary} }. Why? Because the "summary" comes from your entry, not anywhere else. You have tell blot where a specific bit of metadata comes from.

The same goes for your "description." You have to tell your blog that your description is coming from your "entry" and that you defined it yourself. This is why you must declare { {entry.metadata.description} }.

I know this was a lot to digest but it's incredibly important. Not only for Blot but for whatever CMS you are using to write in. My goal is not to spend a single dime for advertising but write good content and optimize the SEO. I did it before and I can do it again.

In my next post I apply these metadata methods to hacking Open Graph, Twitter Cards, and your Blot generated Sitemap.

Show Comments