If you simply want to preview how your site appears on social media, visit the Preview Your Tags page. However, if you're interested in learning more about Open Graph and Twitter Card tags, including some historical context and simple examples for implementation, please continue reading.

In 2010, Facebook introduced the Open Graph protocol, which enables integration between Facebook and other websites by turning them into rich "graph" objects with similar features as Facebook objects. The Open Graph was initially developed by Facebook and was influenced by several technologies, including Dublin Core, link-rel canonical, Microformats, and RDFa.

Other social media platforms are also leveraging social meta tags. Most of the major platforms, including Twitter, LinkedIn, and Discord, support Open Graph tags, and they are also recognized by messaging platforms like Slack, Teams, WhatsApp, and others.

Twitter has its own set of meta tags known as Twitter Cards, but if the Twitter robots can't find these, they resort to using Open Graph tags instead.

All Open Graph META tags begin with the prefix "og:", followed by the specific property to be defined. The content related to the defined property is placed within the "content" attribute.

<meta property="og:{tagName}" content="{tagValue}">

Let's examine a practical example of a basic set of Open Graph tags commonly used by many websites. For this demonstration, we'll use the tags that are currently implemented on this particular site.

<meta property="og:url" content="http://www.opengraphtester.com/" />
<meta property="og:type" content="website">
<meta property="og:title" content="Open Graph Tester" />
<meta property="og:description" content="Open Graph Tester - This website is a simple helper site for allowing web developers, designers and marketing professionals to maximise their websites and posts before publishing them to social media." />
<meta property="og:image" content="http://www.opengraphtester.com/assets/images/logos/og-image.png" />

The example above shows the minimum set of tags that we recommend including on your site. If you'd like to view how these tags appear on various social media platforms, visit the Preview Your Tags page.

Open Graph supports numerous additional tags, including those for video, music, and more. For more information on the available Open Graph tags, please refer to the Open Graph Protocol page.

Twitter has created its own version, called Twitter Cards, which operates similarly to Open Graph but instead uses "twitter:" tags instead of "og:" tags.

<meta name="twitter:{tagName}" content="{tagValue}">
<meta property="twitter:{tagName}" content="{tagValue}">

As you can see from the example, Twitter employs both the "property" and "name" attributes. A basic illustration of Twitter Card tags would appear as follows.

<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="opengraphtester.com" />
<meta property="twitter:url" content="https://opengraphtester.com/preview/" />
<meta name="twitter:title" content="Open Graph Tester" />
<meta name="twitter:description" content="Open Graph Tester - This website is a simple helper site for allowing web developers, designers and marketing professionals to maximise their websites and posts before publishing them to social media." />
<meta name="twitter:image" content="https://opengraphtester.com/assets/images/logos/og-image.png" />

If your site lacks Twitter Card tags, don't worry as it won't prevent your links from being shared on Twitter. In the absence of Twitter Card tags, Twitter will fall back to using Open Graph tags.

In addition to the above, if Open Graph is unable to find the necessary tags, it will also utilize other sources.

If you're uncertain about which tags to set, visit the Preview Your Tags page and enter your URL. We'll display the tags we found and demonstrate what the tags should look like to maximize the benefits of Open Graph and Twitter Cards.