Open Graph Meta Tags Generator — Create OG Tags in Seconds
Table of Contents
Open Graph meta tags are the hidden instructions you embed in your HTML that tell Facebook, LinkedIn, Pinterest, and Slack exactly how to display your page when someone shares the link. Without them, platforms guess — and they usually guess wrong.
This guide explains the four required OG tags every page needs, the optional tags that improve how your content looks on specific platforms, and how to generate the complete HTML code in under a minute without touching your head element manually.
What Open Graph Meta Tags Actually Do
When someone pastes a URL into Facebook, LinkedIn, or iMessage, the platform's crawler fetches that URL, reads the HTML head section, and looks for Open Graph tags. Those tags provide the title, description, image, and URL that appear in the link preview card.
Without OG tags, platforms fall back to guessing: the page title might come from the HTML title tag, the description might come from the first paragraph of visible text, and the image might come from the first img element on the page — which could be your logo, a tracking pixel, or nothing at all.
The result of missing OG tags is link previews that look like broken links — no image, a garbled title, or a description that has nothing to do with the content. Even if your page is excellent, a bad preview causes people to scroll past it.
OG tags were created by Facebook in 2010 as the Open Graph Protocol. Today every major platform reads them, making them the most universally supported way to control link preview appearance across the web.
The 4 Open Graph Tags Every Page Needs
These four tags are required for a valid Open Graph implementation. Skip any one of them and platforms will either refuse to show a preview or fill in missing values poorly.
- og:title — The title of your content. Can be longer than your SEO title tag since it doesn't need to fit in a SERP result line. Typically 50–95 characters works well.
- og:description — 2–4 sentences describing the page. Facebook shows about 200 characters, LinkedIn shows less. Write for a human scrolling a feed, not for search engines.
- og:image — A full URL to your social image. The recommended size is 1200x630 pixels (1.91:1 ratio). Use HTTPS. Minimum: 200x200 pixels.
- og:url — The canonical URL of your page. This is the URL that gets used when someone clicks the preview card, regardless of where they encountered the post. Use your canonical URL here, not a tracking URL.
A fifth tag — og:type — is technically required but defaults to "website" if omitted. Use "article" for blog posts, "product" for e-commerce, "profile" for author pages.
Sell Custom Apparel — We Handle Printing & Free ShippingOG Image Requirements for Facebook and LinkedIn
The OG image is the most important element in your link preview. A good image drives 2–3x more clicks than a preview without one. Here are the technical requirements:
| Platform | Recommended Size | Minimum | Max File Size |
|---|---|---|---|
| 1200x630px | 200x200px | 8MB | |
| 1200x627px | None | 5MB | |
| Twitter/X | 1200x600px (large) / 800x800 (small) | 144x144px | 5MB |
In practice, a 1200x630 image at JPEG quality 85 hits every platform correctly. Avoid text-heavy images — Facebook crops images differently in mobile vs desktop feeds, and important text at the edges gets cut. Keep key content centered.
Use HTTPS URLs only. Facebook will not load HTTP images. Avoid WebP if you need maximum compatibility — JPEG and PNG are universally supported for OG images.
After setting your og:image, check it using the Open Graph Checker — paste your HTML source and see the exact Facebook and Twitter preview card in your browser.
og:type — What to Set for Different Page Types
The og:type tag tells platforms what kind of content your page represents. The most common values and when to use each:
- website — Default. Use for homepages, landing pages, service pages, and anything that doesn't fit a more specific type.
- article — Use for blog posts, news articles, and any time-stamped content. When you use "article," you can add optional article-specific tags: article:published_time, article:author, article:section, article:tag.
- product — For e-commerce product pages. Enables product-specific metadata like price, availability, and condition when supported by the platform.
- profile — For personal profile pages, author bio pages, or team member profiles.
- video.movie, video.episode, music.song — Specialized types for media content.
When in doubt, use "website." The type mainly affects how platforms categorize your content internally — the visual preview appearance doesn't change dramatically based on og:type alone.
Generate Your Open Graph Tags in Under a Minute
The fastest way to create correct OG tags is to use the Meta Tag Generator. Fill in these fields:
- Page Title — your SEO title (also used as og:title default)
- Meta Description — used as og:description default
- og:image URL — the full https:// URL to your 1200x630 image
- og:type — select website, article, or product from the dropdown
- Canonical URL — used as og:url
The generator outputs ready-to-paste HTML with all OG tags formatted correctly. Copy everything between the opening and closing meta tag lines and paste it into your HTML head element.
After pasting, verify your implementation: copy your full page source, paste it into the Open Graph Checker, and see the Facebook and Twitter preview cards exactly as they'll appear when someone shares your link.
For WordPress sites, you don't need to paste raw HTML — use the SEO plugin's OG settings. For Next.js, extract the values from the generator output and add them to your metadata object. For Shopify, use the SEO fields in the product editor and upload your OG image to the Preferences panel.
Try It Free — No Signup Required
Runs 100% in your browser. No data is collected, stored, or sent anywhere.
Open Free Meta Tag GeneratorFrequently Asked Questions
Are Open Graph tags the same as meta tags?
Open Graph tags are a type of meta tag. They use the property attribute (property="og:title") instead of the name attribute (name="description"). Both live in the HTML head element. Standard meta tags are read by search engines; OG tags are read primarily by social platforms. Both matter for a complete SEO and social setup.
Do Open Graph tags affect Google rankings?
No, OG tags do not directly affect Google search rankings. Google uses your title tag and meta description for SERPs, not OG tags. However, better-looking social previews lead to more shares, which can generate backlinks and traffic — both of which can indirectly affect rankings over time.
Can og:title be different from the title tag?
Yes, and this is often a good idea. Your HTML title tag is optimized for search results — shorter, keyword-focused. Your og:title can be slightly longer and more engaging since social feed previews have different formatting than search result snippets. The generator handles both separately.