Open Graph tags for social media optimisation
Open Graph tags are a set of metadata that can be added to a web page to control how it appears when shared on social media platforms, such as Facebook, Twitter, and LinkedIn. These tags provide a way for website owners to customize the title, description, image, and other elements that are displayed when a link to their website is shared. By using Open Graph tags, website owners can ensure that their content is presented in the most engaging and informative way possible, increasing the likelihood that users will click on their links and visit their site.
Quick facts
- Open Graph metadata tags are code embedded on web pages that control how their links are previewed when shared on social media.
- You cannot edit Open Graph tags through your Sendible account. They must be added or edited directly on the site you are linking to.
- You can use the following debuggers to check links ahead of time to see if they are being flagged for issues such as a missing Open Graph tag - Facebook debugger - Twitter Card Validator - LinkedIn Post Inspector.
What are Open Graph tags?
Open Graph tags are metadata embedded in the code of a web page that defines a title, description, and image for the page (among other things) when its URL is shared across the web. Facebook and other social platforms use these tags for creating link previews, as does Sendible.
Open Graph tags are currently used by Facebook, LinkedIn, and Twitter (if Twitter Cards are absent).
<head>
<title>My website</title>
<meta property="og:title" content="Welcome to my website" />
<meta property="og:description" content="If you're new to my website, this is the place to begin." />
<meta property="og:image" content="https://snd-videos.s3.amazonaws.com/199300/1690834304669.jpg" />
</head>
What happens if Open Graph tags are not on the site I am linking to?
If a link used in a post does not contain Open Graph tags, especially the og:image tag, the link preview area may not be able to display a preview image for the link, and you will instead see a checkered white box in place of the intended image.
How do I know if the site I am linking to has Open Graph tags?
There are two ways that we recommend checking a site to see if it has Open Graph tags in place.
The first is to use your browser's 'inspect' function to see if you can find the tag in the source code. Below is a step-by-step guide on how to do this.
How to use the inspector to check a web page for og:image tags.
Alternatively, you can put the link you are using into Meta's debugging tool to have it scrape the web page and determine if the og:image tag is present. If it is not present, you will see a notice indicating that the property is not explicitly provided on the web page you are using.
Please consider adding Open Graph data to your website, as this will give you more control over how the website appears on social media networks and allow for the correct images to be pulled when linking to web pages in your posts.
This article may help you or your web developer alter the website to add Open Graph metadata tags.
