Skip to main content

Open Graph Meta Tags

  • Updated

Prerequisites

HTML Meta Tag

Intro

The Open Graph (OG) protocol helps display your webpage with rich information when shared across social media.

When a URL is shared on Facebook or LinkedIn, if that page has OG tags defined, the link will display the website title, description, and image—all properties that you can define. For example, sharing https://www.the.com/hat on LinkedIn would show:

Basic OG Tags

By adding OG metadata tags to your webpage, it becomes an open graph object. To do this we will use the Metadata Element. There are four OG tags that are required:

  • og:title - The title of your webpage.

  • og:type - The type of your object. The most common ones are "webpage" and "article." Depending on the type you specify, other properties may also be required.

  • og:image - An image URL which should represent your webpage. This image will be shown when the link is shared. Only JPG, PNG, or GIF are supported.

  • og:url - The canonical URL of your object that will be used as its permanent ID. This should match the URL of your webpage.

Learn more about Open Graph protocols.

Using OG Tags on The.com

For each OG tag you want to add:

  1. Make sure you are in the <head> of your Page.

  2. Add a new Metadata Element.

  3. Click Edit.

  4. Type in the OG property ("og:title," "og:type," etc.) into the Property attribute.

  5. Enter the content (the value for the title, type, image URL, URL) in the Content attribute.

  6. Rename the Metadata Element to keep track of it.

Adding an og:title tag

Follow the steps above. This is how most OG tags are set up.

Adding an og:image tag

Follow the steps above. The only extra step is that we need to copy the image file URL.

In the worksheet view, right-click on the icon next to the filename at the top of the page and then select "copy link location." Then, paste that into the Content attribute of the metadata tag and type og:image into the Property attribute.

Note: Only JPG, PNG, and GIF files are supported. The image will not appear if it is not one of these file types.

Learn about Open Graph protocols from Facebook.

Related articles

Comments

0 comments

Please sign in to leave a comment.