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 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"
meta:
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 }}
Designed and built by Rob Austin @ausrobdev in Brisbane, Australia. We stand on the shoulders of giants: Hugo | Jekyll