Open Graph is a protocol used by social media platforms to generate rich previews when a page is shared. By adding Open Graph meta tags to your HTML, you control how your website appears on platforms like Facebook, LinkedIn, and others.
Table of Contents
Where to add Open Graph tags
Open Graph meta tags are placed inside the <head> section of your HTML document.
Basic Open Graph tags
Here is an example of commonly used Open Graph tags:
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
Explanation of key tags
og:title
Defines the title of the page as it will appear when shared.
og:description
Provides a short description of the page content.
og:image
Specifies the image that will be displayed in the preview.
og:url
Defines the canonical URL of the page.
Optional Open Graph tags
You can also add additional metadata such as:
og:type– defines the type of content (e.g., website, article)og:site_name– name of your websiteog:locale– language and region settings
Example:
<meta property="og:type" content="website" />
<meta property="og:site_name" content="My Website" />
<meta property="og:locale" content="en_US" />
Best practices
- Use high-quality images (recommended size: 1200×630 px)
- Ensure URLs are absolute (include https://)
- Keep titles and descriptions clear and concise
- Make sure each page has unique Open Graph data
Why Open Graph is important
Open Graph improves how your content appears on social media by:
- increasing click-through rates
- improving content visibility
- providing better previews for shared links
Summary
Open Graph meta tags are added inside the HTML <head> section and define how your website appears when shared on social platforms. Proper configuration helps improve presentation, engagement, and visibility of your content.