OpenGraph Tags

Refer the OpenGraph specification for details. All the values are derived either from the file metadata or frontmatter. To get all Opengraph tags all you need is to add following in frontmatter, which you’ll be already having for other metadata

title: Current page title
description: Current page description
publishDate: yyyy-mm-dd

And add an image called with name og or else cover image is used as fallback.

Sometimes derived values are not enough and custom values must be provided, to override these values add following in your frontmatter

params:
    og:
        title: OG Title
        description: OG Description
        url: "https://example.com"
        type: website
        determiner: a
        locale: en_US
        locale_alternate: en_US
        site_name: example website
        image:
            url: "https://example.com/images/example.png"
            height: 100px
            width: 100px
            type: image/png
            alt: OG Image for example.com
        article: 
            published_time: 2006-01-02T15:04:05-07:00
            modified_time: 2006-01-02T15:04:05-07:00
            author: John Doe
            section: Blogs
            tags:
                - keyword 1
                - keyword 2
                - keyword 3

As you can see it is tedious to provide so many values for every blog. Kriti derives these values from other front matter and file metadata. Here’s the corrsponding derivations:

  1. og:title: Derived from title in frontematter to provide the value.

  2. og:description: Derived from description in frontmatter.

  3. og:url: Auto generated URL of current page.

  4. og:type: If current page is a blog/article post then “article” else if its an list of articles/homepage then “website”.

  5. og:locale: Defaults to “en_US” it is not derived.

  6. og:site_name: Derived from site’s display title.

  7. og:image: Looks for image called “og” if not then fallback to “cover” image. Relevant metadata, type, height & width is also derived from the image. If any of the value within params.og.video is provided, then no derivation is done and it is expected that user provides rest of the values too.

  8. og:video: Looks for video called “og”, no fallbacks. Relevant metadata, type, height & width is also derived from the video. If any of the value within params.og.video is provided, then no derivation is done and it is expected that user provides rest of the values too.

  9. og:audio: Looks for audio called “og”, no fallbacks. If any of the value within params.og.video is provided, then no derivation is done and it is expected that user provides rest of the values too.

  10. og:article" These tags are only valid if current page is a blog/article not for index/homepages. Values are derived from related frontmatter.