Adding social metadata to your Hugo sites

Metadata is data (information) about data.

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

This metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

Here’s how your website will look like on Twitter with and without metadata.

No metadata

No metadata

Correct metadata

Correct metadata

You be the judge of what you like better :)

Automatically adding social metadata to Hugo sites

After coming across this list I realized theme components was a thing so I’ve extracted my social metadata commit into a separate component for re-use by the community. It’s available on GitHub at msfjarvis/hugo-social-metadata. The README goes through the installation steps so here I will simply cover what the component is actually adding. Here’s the generated metadata for this very post.

<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@msf_jarvis" />
<meta name="description" content="Optimize social media exposure with the right metadata for your site" />
<meta name="keywords" content="hugo,webdev,static sites," />
<meta property="og:url" content="https://msfjarvis.dev/posts/adding-social-metadata-to-your-hugo-sites/" />
<meta property="og:title" content="Adding social metadata to your Hugo sites &middot; Harsh Shandilya" />
<meta name="twitter:title" content="Adding social metadata to your Hugo sites &middot; Harsh Shandilya" />
<meta name="og:description" content="Optimize social media exposure with the right metadata for your site" />
<meta name="twitter:description" content="Optimize social media exposure with the right metadata for your site" />
<meta name="twitter:url" content="https://msfjarvis.dev/posts/adding-social-metadata-to-your-hugo-sites/" />
<meta name="twitter:image:src" content="android-chrome-512x512.webp" />

Comments