2016-07-10

Add meta contents in Jekyll blog

In this blog post, we will learn how to add meta content into our Jekyll blog, which will render meta content with respect to each blog post. Awesome, insn’t it!

Well before we get started, lets first understand some basic concepts

• SEO Optimization giude pdf
• Front Matter

Alright, now we have basic understanding, lets dive right into the implementation:

In this post, I will be using basic elements of meta contents i.e. title description and keywords. You can add more as you wish. (For ref: Here is a guide to all meta tags available.)

For <title> we’ll get the value from a Front Matter variable if it is there or else we will use the default:

Note: I have changed { % % } to % % and { { variable} } to { variable }. Otherwise it will render the respective values.

<title>
% if page.title %
	{ page.title }
% else %
	Default Page Title
% endif %
</title>

Similarly, we can define for <meta> description and <meta> keywords as follows:

% if page.desc %
	<meta name="description" content="{ page.desc }" />
% else %
	<meta name="description" content="I’m a Ruby on Rails developer with a passion for coding and ruby standards." />
% endif %

% if page.keywords %
	<meta name="keywords" content="{ page.keywords }" />
% else %
	<meta name="keywords" content="ruby, ruby on rails, git, vim, web design, development, jekyll, Dushyant Agarwal, dushyant" />
% endif %

So you are all set to have meta tags for your individual posts, all you need to do now is add these values in each of your post’s front matter as shown below:

---
layout: post
title:  "Add meta contents in Jekyll blog"
desc: "Add SEO meta contents in Jekyll blog"
keywords: jekyll, meta-tags, seo
---

Hope it helps! :)