The Open Graph protocol is a web standard introduced by Facebook to enable web developers to control how their content appears when shared on social media platforms. By adding specific metadata to web pages, developers can dictate the title, description, image, and other key elements that are displayed in previews.
This is crucial for enhancing the visibility and appeal of shared links, ensuring that they are presented in a compelling and consistent manner across various social media sites. Effective use of Open Graph tags can significantly improve click-through rates and engagement, making it an essential tool for web content optimization.
Adding a tag to your website
When placing a tag on your website, you should place it in the <head> along with any other metadata. The tag used will be a <meta> tag and should look like this pattern:
<meta property=“[NAME]” content=“[VALUE]” />
Open Graph (OG) Meta Tags
The Open Graph protocol specifies five essential tags that are required for basic functionality:
og:title
The title of your page. This is typically the same as your webpage's <title> tag unless you’d like to present it differently.
og:type
The “type” of website you have. Generally this will just be "website"; however, the open graph protocol has a few variations of the “type” of website it supports. This includes types like website, article, or video
og:image
This should be a link to an image that you’d like to represent your content. It should be a high resolution image that the social networks will use in their feeds.
og:url
The URL of the current page.
og:description
A description of your page. Similarly to og:title, this may be the same as your website’s <meta type=“description”> tag, unless you’d like to present it differently.
Testing Your Webpage Preview
Using Facebook's Sharing Debugger, you can test these meta tag values and see how your webpage will be displayed in Facebook.
