HTML Meta Tag
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:
Make sure you are in the <head> of your Page.
Add a new Metadata Element.
Type in the OG property ("og:title," "og:type," etc.) into the Property attribute.
Enter the content (the value for the title, type, image URL, URL) in the Content attribute.
Rename the Metadata Element to keep track of it.
Follow the steps above. This is how most OG tags are set up.
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.
Please sign in to leave a comment.