Open Graph tags are HTML meta tags that tell social platforms and messaging apps how to render a preview when a page's URL is shared — specifying the title, description, image, and type that should appear instead of whatever the platform might otherwise guess. Originally developed by Facebook, the Open Graph protocol is now read by nearly every major social and messaging platform, making it the standard way a retailer controls how its product pages look when shared, pinned, or linked from outside its own site. For e-commerce, well-set Open Graph tags are the difference between a shared product link showing a compelling image and price, or a broken, generic thumbnail.

Why Open Graph Tags Matter for Feed-Driven Pages

Product pages get shared constantly, whether through customer word-of-mouth, affiliate links, influencer posts, or paid social placements, and every one of those shares renders based on Open Graph tags rather than the actual page content a visitor would see on click-through. A product page without properly configured tags might display a stretched logo, a truncated or irrelevant description, or no image at all — undermining click-through rate on a share that otherwise represents free, high-intent distribution. Because product pages are usually generated in bulk from the same catalog that populates the shopping feed, Open Graph values can be templated directly from existing product metadata rather than written by hand for every SKU, making this one of the more scalable wins available to a large catalog.

How Open Graph Tags Work

Open Graph tags live in the <head> of a webpage as <meta property="og:..."> elements, with og:title, og:description, og:image, and og:url covering the core preview fields most platforms read. For a product catalog, these values typically map directly to feed attributes already maintained for Shopping and Meta Catalog — the same title, description, and primary image used in the feed can populate the equivalent Open Graph tags, keeping the two surfaces consistent rather than requiring separate copywriting. Platforms and search engines increasingly cross-reference this structured markup against a broader knowledge graph of entities to understand what a page represents, meaning consistent Open Graph data reinforces machine understanding of a product beyond just the immediate social preview. Because these tags govern how a link behaves anywhere it's shared, they're also a quiet but important part of effective content syndication, where the same product might surface across multiple partner sites or aggregators.

Example

<item>
  <g:id>SKU-10234</g:id>
  <g:title>Organic Cotton Crewneck Sweater - Charcoal, M</g:title>
  <g:description>Soft, breathable organic cotton crewneck in charcoal.</g:description>
  <g:image_link>https://example-shop.com/img/org-sweater-charcoal.jpg</g:image_link>
</item>
<!-- Open Graph tags on the corresponding product page, templated from the feed -->
<meta property="og:title" content="Organic Cotton Crewneck Sweater - Charcoal, M">
<meta property="og:description" content="Soft, breathable organic cotton crewneck in charcoal.">
<meta property="og:image" content="https://example-shop.com/img/org-sweater-charcoal.jpg">
<meta property="og:type" content="product">

Related Concepts

Because Open Graph values so closely mirror existing product metadata, they're best maintained as a template rather than a manual task, and they contribute to how consistently a product's identity is understood across a broader knowledge graph of entities. They're also a quiet enabler of content syndication, ensuring a product looks and reads the same wherever a link to it ends up being shared.