In 2010, Facebook introduced the Open Graph to foster seamless integration between Facebook and external websites. This integration allows posts to transform into rich objects. In which it has the same capabilities as other Facebook objects.
To integrate Open Graph tags into your web page, you'll typically insert them within the <head> section of your website's code. They can be identified by the prefix "og:" preceding their property names.
These tags are structured as follows:
Each Open Graph tag comprises two key attributes: the property attribute, defining the type of information being provided—and the content attribute, where the actual information is furnished.
Here are three compelling reasons why Open Graph tags are important:
Here’s an open Graph tag from the SEOLeverage website.
It's worth noting that other social media platforms are also focusing on the potential of meta tags. For instance, both Twitter and LinkedIn recognize the significance of tags.
You can use Facebook’s Sharing Debugger to check tags. Also, an agency like SEOLeverage can assist you in checking Open Graph. They use tools to check your Open Graph Meta Data, such as Google Search Console. It's a tool that can provide more detailed information about your Open Graph tags.
At the core of Open Graph meta tags is the Open Graph Protocol. This protocol defines a set of specific markup properties that can be added to your website's HTML code. Each property serves a purpose in conveying information about your content.
Some basic meta tags that should be used for all types of content:
| Tag | Description |
| og:title | It is where you indicate your page's title. This title becomes visible when your page is shared on social platforms like Facebook or Twitter. Pro tip: It should reflect the essence of your article without including any branding elements. |
| og:description | This metadata descriptor has a resemblance to the HTML meta description tag. It serves the same purpose of describing your content. Pro tip: Don’t impose a character limit, but it's advisable to aim for approximately 200 characters. |
| og:url | When posting a link on Facebook, you have the option to incorporate Open Graph tags. These tags serve the purpose of enabling Facebook to showcase details regarding the link. Pro tip: Include an image, title, and description. |
| og:image | The og:image tag adds visual appeal to content, making it more captivating. This tag plays a role in ensuring that your Facebook page displays a specific thumbnail when you share your page. It’s a factor that can significantly boost your conversion rates. Pro tip: The commonly recommended resolution for an OG image is 1200 pixels by 627 pixels, with a ratio of 1.91:1. Be mindful not to exceed the 5MB size limit for image tags. |
| og:type | The og:type tag defines the format of your content, influencing its presentation in the feed. If you don't specify a type, the default setting is "website." |
| og:locale | The locale of the resource defaults to "en_US" but can be customized as needed. If you have alternative language translations available, you can utilize "og:locale:alternate." |
Nowadays, optimizing your online presence is non-negotiable. By understanding these meta tags, you can take a step to outperform your competitors.
If you have any questions about Open Graph tags, you can contact SEOLeverage.
