SEO With Hugo (6) Open Graph for Social Media

Open Graph is a protocol that allows website owners to provide specific information about their web pages to social media platforms and search engines. This information is conveyed through meta tags, which are placed in the HTML code of the website. By including these meta tags, website owners can control how their web pages appear when shared on social media platforms and in search engine results.

One of the key benefits of using Open Graph is that it allows website owners to create rich, engaging content that will be displayed prominently when shared on social media. For example, when a web page is shared on Facebook, the Open Graph tags can be used to specify the title, description, and image that will be displayed in the Facebook post. This means that website owners can create a more engaging and attractive experience for users who come across their content on social media.

Another important benefit of Open Graph is that it helps website owners to optimize their web pages for search engines. By including meta tags that provide specific information about the web page, website owners can help search engines to understand the context and relevance of the page. This can lead to higher search engine rankings and more visibility for the website.

In summary, using Open Graph and meta tags that communicate with social media platforms and search engines can help website owners to create more engaging content and improve their search engine rankings. By including these tags in the HTML code of their website, website owners can control how their web pages appear on social media and in search engine results, leading to a better user experience and more visibility for their website.

Implementing Open Graph and Twitter Cards with Hugo

You can find information on how to implement Open Graph with Hugo here. For this to work you’ll need a description, a title, and images associated with the markdown file of your page.

audio: []
date: "2006-01-02"
description: Text about this post
images:
- post-cover.png
series: []
tags: []
title: Post title
videos: []

Hugo uses the page title and description for the title and description metadata. The first 6 URLs from the images array are used for image metadata. If page bundles are used and the images array is empty or undefined, images with filenames matching *feature* or *cover*,*thumbnail* are used for image metadata.

We include Hugo’s internal templates for social media in layouts/partials/head.html:

<!-- Twitter cards -->
{{ template "_internal/twitter_cards.html" . }}
{{ with .Site.Params.twitterSite -}}
  <meta name="twitter:site" content="{{ . }}" />
{{ end -}}
{{ with .Site.Params.twitterCreator -}}
  <meta name="twitter:creator" content="{{ . }}" />
{{ end -}}

<!-- Facebook cards -->
{{ template "_internal/opengraph.html" . }}
{{- if .Params.private -}}
  <meta name="robots" content="noindex, nofollow" />
{{- else if .Params.robots -}}
  <meta name="robots" content="{{ .Params.robots }}" />
{{- end -}}

Where .Site.Params.twitterSite is defined in the YAML configuration file in confit/_default/config.yaml:

params:
  slogan: Digital Marketing Agency in Cambridge focussing on video productions, animated videos, and film making for science and technology.
  twitterSite: '@bullaki2'
  twitterCreator: '@bullaki2'
  social:
    youtube:
      url: 'https://www.youtube.com/bullaki'
      icon: 'icons/bootstrap/youtube.svg'
    # vimeo:
    #   url: 'https://vimeo.com/bullaki'
    #   icon: 'icons/bootstrap/vimeo.svg'
    twitter:
      url: 'https://twitter.com/bullaki2'
      icon: 'icons/bootstrap/twitter.svg'
    github:
      url: 'https://github.com/bullaki'
      icon: 'icons/bootstrap/github.svg'