Open Graph Tags Generator - Social Media Preview
Generate Open Graph meta tags for social media sharing. Preview how your page will look on Facebook, LinkedIn, and more.
How to Use
- Fill in og:title with the title you want shown when shared on social media (can differ from page title).
- Write an og:description that grabs attention — it appears as the excerpt under the title in social previews.
- Add an og:image URL pointing to an image at least 1200×630 pixels for best display quality.
- Enter the canonical og:url for this page (use the full URL including https://).
- Click 'Generate OG Tags' to create the code, check the social media preview, then copy into your HTML <head>.
About Open Graph Protocol
What is Open Graph?
Open Graph (OG) is a protocol created by Facebook in 2010 that enables any web page to become a rich object in a social graph. By adding OG meta tags, you control how your content appears when shared on Facebook, LinkedIn, Slack, Discord, WhatsApp, and many other platforms. Without OG tags, these platforms scrape arbitrary content from your page, often with poor results.
og:image Best Practices
The og:image tag specifies the image shown in the social share preview card. Best practices: use at least 1200×630 pixels for high-resolution displays, keep file size under 8MB, use JPG or PNG format, avoid text-heavy images since they get cropped on mobile. Facebook caches images heavily — use a unique URL when updating an image to force a cache refresh.
og:type Values
The og:type tag describes the type of content. Common values include: 'website' (default, for general web pages), 'article' (for blog posts and news), 'product' (for e-commerce), 'video.movie' or 'video.episode' (for video content), and 'music.song' or 'music.album' (for music). Some platforms like Facebook render richer previews for specific content types.
og:locale and Multilingual
The og:locale tag specifies the language and territory of your content using IETF language tags (e.g., 'en_US', 'zh_CN', 'es_ES'). For multilingual sites, you can use og:locale:alternate to list alternative language versions. This helps social platforms serve the correct language version and improves the sharing experience for international audiences.
Key Features
- Generates all essential OG tags: title, description, image, url, type, site_name, locale
- Live social media preview card showing how the content will appear when shared
- One-click copy of the complete generated HTML code
- Supports all og:type values with a dropdown selector
Common Applications
- Optimizing how blog posts and articles appear when shared on social media
- Creating custom share previews for product pages in e-commerce
- Ensuring brand consistency across all social media sharing
- Debugging why a page's share preview shows incorrect content