What Are Open Graph Tags and Why They Matter

Open Graph tags decide what title, description, and image show up when a link gets shared on social media. Without them the platform usually grabs something random from the page, and it often looks off.

Summary

Step by step

Add at least og:title, og:description, and og:image to the page.
For the image, use something at least 1200x630 pixels where any text stays readable.
Test the tags with a preview tool to see how the share will actually look before posting.
Update the tags whenever the page content changes. Some platforms cache the old preview for days.

Why it matters

When a link is shared in a chat app, a social feed or a workplace messaging tool, most people see only the small preview card before deciding whether to open it. If that card shows a meaningless title, a scrap of navigation text or a cropped logo, fewer people click. Open Graph tags let you decide what goes on that card, so you control the first impression of every shared link.

Beyond the basic three

og:url states the canonical address of the page, which helps platforms treat the same content shared with different parameters as one page.
og:type describes the content. Most pages use website, blog posts use article.
og:site_name puts your site's name on the card.
Some platforms, such as X (Twitter), look for their own twitter:card tag. Without it you may get a small card instead of a large image.
og:locale tells platforms which language a page is in, useful on multilingual sites.

Common mistakes

Using a relative path for og:image. It needs to be a full URL, domain included.
Storing the image behind a login or in a folder blocked by robots rules, so the platform's crawler can't fetch it.
Giving every page the same title and image, which makes every shared link look identical.
Putting important text near the edges of the image. Some platforms crop to a square or narrower ratio.
Writing a very long description. Platforms usually cut it off after a couple of lines.

An example

You shared a new blog post in a group chat and the preview showed your site's generic logo and homepage description. Looking at the page source, you find og:image is still a fixed value inherited from the template. You make a cover image for the post, put its full URL in the tag, and update the title and description to match the post. Then you check it in a preview tool. If a platform keeps showing the old card, you may need to rescrape the page with that platform's sharing debugger.

When to bring in a developer

If your site loads content with JavaScript after the page arrives, the tags may show up in your browser but stay invisible to the crawlers that build link previews. If preview tools show the tags as empty, they need to be written into the HTML on the server or at build time. That change is quickest with someone who knows how the site is built.