.webp)
Preview your link card before you publish
Open Graph tags like og:title, og:description and og:image decide how your page looks when it is shared. This studio builds them, inspects existing ones, and shows a live preview for Facebook, LinkedIn, X and WhatsApp, so you can fix a weak card before anyone sees it.
Fill in your page details, check the character counts, then copy the generated HTML into your <head>. Everything runs in your browser. Nothing is uploaded or stored.
- Live previews
- Tag inspector
- Copy-ready HTML
- No sign-up
- Mobile friendly
Open Graph & Social Share Studio
Build, inspect and preview social sharing metadata before publishing. Create cleaner link cards for Facebook, LinkedIn, X and WhatsApp.
1. Add your page details
Edit fields below or inspect existing meta tags.
2. Live social previews
See how your link card may appear.
Recommended: 1200 × 630 px (1.91:1)
Learn how Open Graph tags improve link previews across social platforms, and generate the metadata you need in seconds.
Facebook-style preview simulation. Actual appearance may vary by device, crawler and platform updates.
3. Generated Open Graph HTML
Add this code inside the <head> section of your page template.
Implementation: Place the generated tags in the document head, not the page body. Avoid duplicate conflicting OG tags. For Blogger, add the tags to the relevant theme head or use a template conditional so each post outputs its own title, description and image. Always test the published URL with the platforms' own sharing/debugging tools.
Privacy: metadata parsing, preview rendering and code generation run locally in this browser. A remote image URL is loaded by your browser for display. This tool does not publish or submit your page.
What is the Open Graph & Social Share Studio?
The Open Graph & Social Share Studio is a free online Open Graph tag generator, inspector and link preview tool. It helps you create the og: and twitter: meta tags that control how your page looks when someone shares it on Facebook, LinkedIn, X (Twitter) and WhatsApp.
Without these tags, social platforms guess which title, description and image to show, and the result is often a cropped photo, a truncated headline or no image at all. With this studio you fill in your page details, see a live preview, check for common problems, and copy clean, ready-to-use HTML. Everything runs in your browser, so there is nothing to install and no account to create.
Why Open Graph tags matter for SEO and social sharing
Open Graph is a metadata standard first introduced by Facebook and now read by most major platforms and messaging apps. Social tags are not a direct Google ranking factor, but they shape the first impression of your link, and that impression affects clicks, shares and referral traffic.
- Higher click-through from social feeds: a clear title and a sharp image make a link card stand out.
- Consistent branding: you decide the headline, summary and image instead of leaving it to a crawler.
- Fewer broken previews: checking tags before you publish avoids missing images and clipped text.
- Better sharing from messaging apps: WhatsApp and similar apps use Open Graph data to build the preview shown in chats.
Key features
- Live previews for four platforms: switch between Facebook, LinkedIn, X / Twitter and WhatsApp card styles. They are simulations, so real results can differ slightly by device and platform.
- Character counters: the title counter targets 70 characters and the description counter targets 200, so you can spot text that may be cut off.
- Raw HTML tag inspector: paste an existing
<head>or a group of meta tags and the tool reads the title, description, URL, image, type, site name, locale, card type and alt text. Pasted scripts are never executed. - Built-in checks: the tool reports passed checks and issues for the title, description, URL, image, alt text and site name.
- Copy-ready output: copy all generated HTML, copy only the Open Graph block, or download the snippet as an
.htmlfile. - Local image preview: upload an image from your device to see how it fits the card. It is for preview only and is not added to the generated tags.
- Privacy friendly: parsing, previews and code generation happen locally in your browser. The tool does not publish or submit your page.
How to use the tool, step by step
- Enter your page details. Add the page title, meta description, canonical page URL and the public URL of your social sharing image. Choose the OG content type, site name, locale and X card type, and write short image alt text.
- Or inspect existing tags. Open the Raw HTML tags tab, paste your current meta tags and press Inspect pasted tags. The fields fill in automatically so you can review and improve them.
- Check the live preview. Click through each platform tab and read the checks panel. Fix anything flagged, such as a missing image or a very short description.
- Copy the generated HTML. Press Copy all HTML (or Copy Open Graph only) and place the tags inside the
<head>section of your page. - Test the live URL. After publishing, run the page through each platform's own sharing or debugging tool, since platforms cache previews.
Tags the generator creates
| Tag | What it controls |
|---|---|
og:type | The kind of content: article, website, product, profile or video.other. |
og:title | The headline shown on the link card. |
og:description | The short summary under the headline. |
og:url | The canonical address of the page. |
og:site_name | Your brand or publication name. |
og:locale | Language and region, for example en_US. |
og:image and og:image:alt | The preview image and its accessible description. Included when you provide a valid image URL and alt text. |
twitter:card, twitter:title, twitter:description, twitter:image | How the link appears on X: a large image card (summary_large_image) or a compact summary card. |
Best practices for better link previews
- Use a 1200 × 630 px image (about a 1.91:1 ratio) hosted at a public HTTPS address. Keep important text away from the edges.
- Keep titles near 30 to 70 characters and make them specific. Put the main idea first.
- Write descriptions of roughly 70 to 200 characters that tell people what they will get.
- Match
og:urlto your canonical URL so shares and likes consolidate on one address. - Avoid duplicate or conflicting tags. If your theme or plugin already outputs Open Graph tags, remove the extras.
- Add alt text to your image for accessibility.
Using the generated code on Blogger
Blogger themes often output one set of meta tags for the whole site. To give each post its own title, description and image, add the generated tags to your theme's <head> using a template conditional, so each post prints its own values. Place tags in the head, never in the post body, and test a published post URL afterwards.
Who is this tool for?
Bloggers, SEO specialists, web developers, marketers, small business owners and content creators will all find it useful. It suits anyone who publishes links and wants them to look professional on social platforms, whether you are launching a new article, a product page or a landing page.
Frequently asked questions
What are Open Graph tags?
Open Graph tags are meta tags placed in a page's head that tell social platforms which title, description, image and URL to use when the page is shared. They make link cards on Facebook, LinkedIn, WhatsApp and other apps look consistent and intentional.
Is the Open Graph & Social Share Studio free to use?
Yes. The tool is free, needs no sign-up, and runs directly in your browser.
Does the tool upload or store my data?
No. Metadata parsing, preview rendering and code generation happen locally in your browser. If you enter a remote image URL, your browser loads that image for display, but the tool does not publish or submit your page.
What is the best Open Graph image size?
A common recommendation is 1200 × 630 pixels, which gives a 1.91:1 ratio. This size displays well on Facebook, LinkedIn, X and WhatsApp. Host the image at a public HTTPS URL so crawlers can fetch it.
Can I use an uploaded image in my published meta tags?
No. An uploaded image is used for preview only, because its local file address cannot be used by a public website. Upload the image to your site or media host first, then paste its public URL into the image field.
Can I check the meta tags my page already uses?
Yes. Open the Raw HTML tags tab, paste your page's head or meta tags, and select Inspect pasted tags. The tool reads Open Graph, Twitter and common title and description tags and fills in the form so you can review them.
What is the difference between Open Graph and Twitter Card tags?
Open Graph tags (og:) are widely read by Facebook, LinkedIn, WhatsApp and many other services. Twitter Card tags (twitter:) control the card on X. X can fall back to Open Graph values, but setting both gives you more control. This tool generates both sets.
Do Open Graph tags improve Google rankings?
Open Graph tags are not a confirmed direct ranking factor. They improve how your links look and perform on social platforms, which can bring more clicks and shares and support your wider SEO efforts.
Why is my social preview not updating after I changed the tags?
Platforms cache link previews. After updating your tags, use each platform's own sharing or debugging tool to request a fresh scrape of the URL, and confirm there are no duplicate or conflicting tags in your page head.
Where should I paste the generated code?
Paste it inside the <head> section of your page template, not the body. On Blogger, add it to your theme head with a conditional so each post outputs its own title, description and image.
.webp)
