Open Graph is the protocol originally developed by Facebook (Meta) to standardize the way how web page is shared within Facebook. Over time, other social media platforms including Twitter, LinkedIn and Discord have adopted the Open Graph technology. The goal of the technology is to treat web page as same as other rich objects within it's platform, and make it easier for users to share web pages with others witin the social media platforms.
When a user shares a URL in a Facebook post, Facebook provides a rich preview of the web page before commiting the post. By using Open Graph meta tags to pull in URL, image and description of the web page make it easier to share information cross-platform.
If you're sharing a URL that does not have Open Graph meta tags, social media platforms will attempt to generate a preview from its original content which may not be the best outcome.
What are basic Open Graph Tags?
There are 17 OG tags defined in official documentation developed by Facebook, and other social media platforms added extensions to the original tags. For Facebook, only 4 OG tags are required and others are optionally used to further describe the content.
Example:
<meta property="og:title" content="Title of the Page" />
| Tag Name |
Description |
| og:title |
Title of the web page. This is usually same as the meta <title>tag. |
| og:url |
The canonical URL of the page. |
| og:image |
The URL of the image to be shown in preview. |
| og:type |
Type of page. (i.e. "website", "article".) |
| og:description |
Brief description of the web page. |
| og:video |
The URL of the video that you would like to show. |
