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 _data/site.yml
# _data/site.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.
# 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.
<!-- src/_includes/framework/og-meta-tags.html -->
<meta property="og:type" content="{{ site.open_graph.meta_opengraph_type }}"/>
<meta property="og:url" content="{{ url }}"/>
{% if meta_title %}
<meta property="og:title" content="{{ meta_title }}"/>
{% elsif title %}
<meta property="og:title" content="{{ title }}"/>
{% endif %}
{% if meta_description %}
<meta property="og:description" content="{{ meta_description }}"/>
{% elsif description %}
<meta property="og:description" content="{{ description }}"/>
{% endif %}
{% if meta_image %}
<meta property="og:image" content="{{ meta_image }}"/>
{% elsif image %}
<meta property="og:image" content="{{ image }}"/>
{% 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