Open Graph Meta Tags: Full Reference and Best Practices
Open Graph tags help control how your website appears when shared on social media. This documentation explains the most important OG tags like og:title, og:type, og:url, and how to use them effectively for SEO and social media optimization.
Quick Start: The four essential Open Graph tags are og:title, og:type, og:url, and og:image. These are required by most social platforms for rich link previews.
Common Open Graph Tags Overview
Essential Open Graph meta tags and their usage
| Tag | Required | Description |
|---|---|---|
og:title | β
Required | The title of your page, shown in the preview |
og:type | β
Required | The type of object (website, article, video, etc.) |
og:url | β
Required | The canonical URL of the page |
og:image | β
Required | Preview image URL, ideally 1200Γ630px |
og:description | β
Required | Short summary of the content |
og:site_name | π Optional | Name of the website (e.g. "OpenGraphPro") |
og:title
The title displayed in social media previews
The og:title tag defines the title shown in social previews. It should match the actual page title and be under 60 characters for optimal display.
Example Usage:
<meta property="og:title" content="How to Optimize OG Tags for SEO" />
Best Practices:
- Should be unique per page
- Should summarize the content clearly
- Keep under 60 characters for full visibility
- Use natural language, not keyword stuffing
og:type
Specifies the content type for proper social media formatting
The og:type tag specifies the type of object. For homepages use website, for articles use article, and for videos use video.other.
Example Usage:
<meta property="og:type" content="article" />
Common Types:
websiteLanding pages, homepagesarticleBlog posts, news articlesvideo.otherVideo contentproductE-commerce productsUsage Notes:
- Used by Facebook and LinkedIn to decide preview layout
- Set to
websitefor most landing pages - Choose the most specific type that matches your content
og:url
The canonical URL to avoid duplicate sharing links
The og:url tag specifies the canonical URL of the page, used to avoid duplicate sharing links and ensure consistent social metrics.
Example Usage:
<meta property="og:url" content="https://www.opengraphpro.com/guides/og-image-size-guide" />
Requirements:
- Must match the final resolved URL
- Use absolute URLs (not relative)
- Should include HTTPS when available
- Avoid tracking parameters when possible
Best Practices for OG Tags
Guidelines for implementing Open Graph meta tags effectively
Essential Requirements:
- Always include at least:
og:title,og:type,og:url,og:image - Use unique OG metadata for each page
- Don't use empty or default placeholder values
- Test with Facebook Sharing Debugger and other validation tools
Complete Example:
<meta property="og:title" content="Ultimate Guide to Open Graph Tags" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://www.opengraphpro.com/docs/opengraph-tags" /> <meta property="og:image" content="https://www.opengraphpro.com/og-tags-guide.jpg" /> <meta property="og:description" content="Learn how to implement OG tags for better social sharing." /> <meta property="og:site_name" content="OG Generator Pro" />
Frequently Asked Questions
Common questions about implementing Open Graph tags
Do I need OG tags if I already have meta tags?
Yes. OG tags are required by platforms like Facebook and LinkedIn for rich previews, while regular meta tags are for browsers and search engines. They serve different purposes and both are necessary.
Can OG tags affect SEO?
Indirectly, yes. Better social previews can improve click-through rates from shared links, which may help engagement metrics. While not a direct ranking factor, they contribute to overall user experience.
What's the difference between og:url and canonical tag?
Canonical tags are for search engines to understand the preferred URL; og:url is for social platforms. They should point to the same page but are used in different contexts.
How often do social platforms update OG tag data?
Most platforms cache OG data for performance. Facebook updates it when shared or when using their debugger tool. For immediate updates, use platform-specific debugger tools to refresh the cache.
Ready to generate your own OG tags?
Create optimized Open Graph tags with proper formatting and validation
Try OG Tag Generator βRelated Documentation
More resources for mastering Open Graph optimization