OG (Open Graph) Meta Tags control the how your website is previewed on social media like Twitter, Facebook etc.
You can set the global open graph settings in _config.yml
# _config.yml
open_graph:
meta_opengraph_type: "website"
meta_twitter_card: "summary"
meta_twitter_site: "@zerostaticio"
meta_twitter_creator: "@zerostaticio"
OG meta tags are automatically generated for each page. But they can also be defined on a per page basis.
By default the pages title, description and image frontmatter are used
You can override this by using the meta_title, meta_description and meta_image properties in a page frontmatter.
# content/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/og-meta-tags.html -->
<meta property="og:type" content="{{ site.open_graph.meta_opengraph_type }}"/>
<meta property="og:url" content="{{ page.url | absolute_url }}"/>
{% if page.meta_title %}
<meta property="og:title" content="{{ page.meta_title }}"/>
{% elsif page.title %}
<meta property="og:title" content="{{ page.title }}"/>
{% endif %}
{% if page.meta_description %}
<meta property="og:description" content="{{ page.meta_description }}"/>
{% elsif page.description %}
<meta property="og:description" content="{{ page.description }}"/>
{% endif %}
{% if page.meta_image %}
<meta property="og:image" content="{{ page.meta_image | absolute_url }}"/>
{% elsif page.image %}
<meta property="og:image" content="{{ page.image | absolute_url }}"/>
{% endif %}
<meta name="twitter:card" content="{{ site.open_graph.meta_twitter_card }}"/>
<meta name="twitter:site" content="{{ site.open_graph.meta_twitter_site }}" />
<meta name="twitter:creator" content="{{ site.open_graph.meta_twitter_creator }}" />
Designed and built by Rob Austin @ausrobdev in Brisbane, Australia. We stand on the shoulders of giants: Hugo | Jekyll