Open Graph Meta Tags

What are Graph Meta Tags and how to use them

Felix Higgs avatar
Written by Felix Higgs
Updated over a week ago

Open Graph Meta Tags allow for some control over how information goes from a third party to a social media platform. This is done by using Open Graph meta tags in the <head> part of the landing page.

These tags can affect conversion and click-through rates. They don't directly affect the on-page SEO but will help with the links on social media.

Facebook Open Graph Meta Tags

og:title

This is the title that shows on the thumbnail. Without this tag, it will use the meta title instead.

eg. <meta property="og:title" content="Your eye-catching title here" />

og:url

This allows you to define one page that all the shares will go to when you have more than one URL for the same.

e.g. <meta property="og:url" content="http://www.yourdomain.com"/>

og:type

This is for describing the kind of object you are sharing (blog post, video, picture, etc.) which is useful as it will determine if your content will appear in a user's interest section of her profile if they 'Like' it.

e.g. <meta property="og:type" content="website" />

og:description

This is where you describe your content, but instead of it showing on a search engine results page, it shows below the link title on Facebook.

Note: This won't affect your SEO.

e.g. <meta property="og:description" content="Your entertaining and descriptive copy here, if your meta description is good, use it." />

og:image

This is how you ensure that a particular thumbnail will be shown when your page is shared.

e.g. <meta property="og:image" content="http://www.yourdomain.com/image-name.jpg"/>

Note: The hosted landing page and hosted image domain must match for the og:image to work.

Advanced Open Graph Tags

og:locale - defines the language

og:site_name - if the page (object) you are sharing is part of a larger netw

og:audio or og:video - to add additional audio or video files to your object

fb:app_id - for linking to a Facebook application (e.g., FB Comments) with the object

LinkedIn

To share the page's content on LinkedIn, the following tags must exist and in their correct format:

  • og:title

    • e.g. <meta property='og:title' content='Title of the article'/>

  • og:image

    • e.g. <meta property='og:image' content='//media.example.com/ 1234567.jpg'/>

  • og:description

    • e.g. <meta property='og:description' content='Description that will show in the preview'/>

  • og:url

There are also image requirements specific to the LinkedIn sharing module:

  • Max file size: 5mb

  • Minimum image dimensions: 1200 (w) x 627 (h) pixels

  • Recommended ratio: 1.91:1

This can be added in the Custom Head HTML section on your landing page.

Twitter Card Tags

twitter:card

Must be set to a value of 'summary'

twitter:site

The Twitter @username the card should be attributed to.

twitter:title

A concise title for the related content.

twitter:description

A description that concisely summarizes the content as appropriate for presentation within a Tweet.

twitter:image

A URL to a unique image representing the content of the page.

twitter:image:alt

A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.

Using Open Graph Tags and Twitter Cards

The Open Graph tags can be added to your landing pages by going to Advanced Settings and inserting them into the Meta Tags under the SEO.

Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com

Did this answer your question?