Open Graph Meta Tags

Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media. They are part of Facebook’s Open Graph protocol and are also used by other social media sites, including LinkedIn and Twitter (if Twitter Cards are absent).

images/articles/html/open-graph-meta-tags.webp

You can add them in the <head> section of a web page. Any tags with og: before a property name are Open Graph tags.

1. Title

The title of your page.

<meta property="og:title" content="Open Graph Meta Tags" />

2. URL

The URL of the content.

<meta property="og:url" content="https://techfry.com/open-graph-meta-tags/" />

3. Image

The URL of an image for the social snippet.

<meta property="og:image" content="https://techfry.com/images/open-graph.jpg" />

Use images with a 1.91:1 ratio and minimum recommended dimensions of 1200 x 630 for optimal clarity across all devices.

4. Type

The type of object you are sharing. For example, article, website.

<meta property="og:type" content="article" />

Use article for articles and website for the rest of your pages.

5. Description

A brief description of the content.

<meta property="og:description" content="Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media." />

Test Open Graph Tags

After you have added all the open graph tags, you need to make sure they are working as expected and are ready for sharing.