Where do you put Open Graph tags on a website?

Open Graph tags are placed inside the head section of a HyperText Markup Language document. They must be formatted as standard meta elements using the property attribute, such as specifying a title or image property. Most content management systems insert these tags automatically through specialized plugins or theme settings without requiring manual code edits.

What happens if a website does not use Open Graph tags?

If a website lacks Open Graph tags, external platforms will attempt to generate a preview by scraping random text and images from the page. This often results in broken images, incorrect titles, or missing descriptions, which makes shared links appear untrustworthy or unappealing to users.

Is Open Graph the same thing as Schema markup?

No, Open Graph and Schema markup serve different functional purposes on a website. Open Graph controls how links look when shared on social networks and messaging platforms. Schema markup provides structured data directly to search engines to help them understand page content and display rich results in search engine results pages.

Structured Data

Open Graph

Open Graph is a set of metadata tags placed in web pages that controls how titles, descriptions, and preview images appear when links are shared on social platforms and messaging applications.

also called: OG tags, og:image, Open Graph tags

// definition

Open Graph is an internet protocol that allows web developers to turn web pages into rich objects within social networks. It is expressed as specific HyperText Markup Language meta tags placed inside the head section of a web page document. These tags specify core attributes such as title, content type, image location, and target web address, providing external platforms with explicit instructions on how to render link previews.

While standard HyperText Markup Language meta tags exist primarily for web browsers and search engine crawler indexing, Open Graph tags specifically target content distribution across messaging applications and social feeds. It is frequently confused with Schema.org markup, but Open Graph focuses on visual presentation during link sharing rather than defining semantic relationships for search engine indexing.

// why it matters

Without Open Graph tags, social networks and messaging platforms automatically attempt to extract preview text and images from a web page. This automated process often selects irrelevant images, truncated titles, or placeholder text, creating unappealing previews that reduce user engagement. Implementing explicit Open Graph metadata ensures that shared links display accurate visual elements, consistent branding, and concise descriptions across external platforms. This structured presentation increases click-through rates, protects brand consistency, and prevents technical errors when content is distributed across digital communication channels.

// example

An e-commerce website includes Open Graph tags within the HyperText Markup Language header of a product page. The code includes a tag defining the title as Ergonomic Desk Chair and another specifying the product image location. When a customer copies the page address into an instant messaging application, the application reads these tags and instantly renders a formatted preview card instead of a plain link string.

Questions and Answers

Where do you put Open Graph tags on a website?: Open Graph tags are placed inside the head section of a HyperText Markup Language document. They must be formatted as standard meta elements using the property attribute, such as specifying a title or image property. Most content management systems insert these tags automatically through specialized plugins or theme settings without requiring manual code edits.
What happens if a website does not use Open Graph tags?: If a website lacks Open Graph tags, external platforms will attempt to generate a preview by scraping random text and images from the page. This often results in broken images, incorrect titles, or missing descriptions, which makes shared links appear untrustworthy or unappealing to users.
Is Open Graph the same thing as Schema markup?: No, Open Graph and Schema markup serve different functional purposes on a website. Open Graph controls how links look when shared on social networks and messaging platforms. Schema markup provides structured data directly to search engines to help them understand page content and display rich results in search engine results pages.