SEO Meta Tags

Meta tags are automatically generated for each page. But they can also be defined on a per page basis.

By default the pages title and description frontmatter are used to generate the pages <title>

You can override this by using the meta_title, meta_description and meta_image properties in a page frontmatter.

# src/home.md

---
layout: home
permalink: "/"

title: "This title will be displayed on the homepage as a heading and used in the meta title if not overriden."
description: "This title will be displayed on the homepage as a paragraph and used as meta description if not overriden"
image: "/assets/images/homepage.png"

meta_title: "This title will be used only as the meta title"
meta_description: "This description will be used only as the meta description"
meta_image: "/assets/images/social-feature-image.png"

Here is the actual logic we use for the meta tags.

<!-- _includes/framework/global/head/seo-meta-tags.html -->

<title>{% if meta_title %}{{ meta_title }}{% elsif title %}{{ title }} - {{ site.title}}{% else %}{{ site.title }}{% endif %}</title>

{% if meta_description %}
  <meta name="description" content="{{ meta_description }}"/>
{% elsif description %}
  <meta name="description" content="{{ description }}"/>
{% endif %}

{% if meta_keywords %}
  <meta name="keywords" content="{{ meta_keywords }}">
{% endif %}