What Open Graph tags do
Open Graph tags set what a shared link looks like: title, description and image. Messengers and social networks build the preview from them.
How it works
When someone shares your link in WhatsApp, Signal, LinkedIn, Facebook, Slack or Teams, the platform fetches the page and builds a preview card. What goes into it comes from meta tags following the Open Graph protocol in the head of the page:
<meta property="og:title" content="Tax advice for freelancers">
<meta property="og:description" content="Practice in Bristol, online appointments available.">
<meta property="og:image" content="https://www.example.com/preview.jpg">Without the tags, the platform guesses: it takes the page title, some text and some image, an icon perhaps or a picture from the cookie banner. Or it shows the bare address. A good preview gets clicked more often.
bytereport checks whether og:title, og:description and og:image are set.
What matters
- All three. Title, description and image belong together. If one is missing, the preview is incomplete.
- An image of at least 1200 × 630 pixels. That is the usual landscape format for large preview cards. Some platforms show smaller images only as a thumbnail or not at all.
- An absolute address for the image.
og:imageneeds the full URL withhttps://. A relative path such as/preview.jpgis not understood everywhere. - A reachable image. The image must not sit behind a login or be blocked in robots.txt.
- Further properties. The protocol also defines
og:url(the authoritative address) andog:type, which iswebsitefor ordinary pages. Many platforms manage without them, but they do no harm.
How to set it up
SEO plugins and many CMSs add the tags themselves and take over the page's title and description. You usually set the image per page, often as the “featured image” or in a “social media” section, with a default image for the whole site. Without a CMS, the three lines go into the <head>:
<meta property="og:title" content="…"> <meta property="og:description" content="…"> <meta property="og:image" content="https://…/preview.jpg">Platforms cache previews. After a change you can make them fetch it again with Facebook's Sharing Debugger or LinkedIn's Post Inspector.