OG Meta Tags

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

  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 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: "images/homepage.png"

  og_title: "This title will be used only as the og meta title"
  og_description: "This description will be used only as the meta description"
  og_image: "images/social-feature-image.png"

Here is the actual logic we use for the Open Graph tags.

<!-- layouts/partials/framework/head/og-meta-tags.html -->

<meta property="og:type" content="{{ .Site.Params.open_graph.type }}"/>
<meta property="og:url" content="{{ .Permalink }}"/>

{{ if .Params.meta.og_title }}<meta property="og:title" content="{{ .Params.meta.og_title }}"/>{{ else }}<meta property="og:title" content="{{ .Title }}"/>{{ end }}
{{ if .Params.meta.og_image }}<meta property="og:image" content="{{ .Params.meta.og_image | absLangURL }}"/>{{ else if .Params.image }}<meta property="og:image" content="{{ .Params.image | absLangURL }}"/>{{ end }}
{{ if .Params.meta.og_description }}<meta property="og:description" content="{{ .Params.meta.og_description | safeHTML }}"/>{{ else if .Params.description }}<meta property="og:description" content="{{ .Params.description | safeHTML }}"/>{{ end }}

{{ if .Site.Params.open_graph.og_twitter_card }}<meta name="twitter:card" content="{{ .Site.Params.open_graph.og_twitter_card }}"/>{{ end }}
{{ if .Site.Params.open_graph.og_twitter_site }}<meta name="twitter:site" content="{{ .Site.Params.open_graph.og_twitter_site }}"/>{{ end }}
{{ if .Site.Params.open_graph.og_twitter_creator }}<meta name="twitter:creator" content="{{ .Site.Params.open_graph.og_twitter_creator }}"/>{{ end }}