Fix Your Link Previews with Open Graph Tags
To control how your page looks when shared, use the ByteTools Open Graph Generator: enter your title, description, URL, image and type, and it builds the complete set of og: meta tags — with a live preview card that mocks up the share before you publish. It runs entirely in your browser with no uploads and no account.
Open Graph is the protocol that decides whether your shared link shows a crisp image, headline and description — or a bare, unclickable URL. When a link on Facebook, LinkedIn, WhatsApp, Slack or Discord looks wrong, it is almost always the OG tags. This guide explains how they work and how to get them right the first time.
What Open Graph tags do and who needs them
Open Graph was created by Facebook so that any platform could read a consistent set of og: tags and build a rich preview card from them. Nearly every major app now understands the protocol, which means one well-formed block of tags governs how your content appears across most of the social web. This matters for developers wiring up share metadata, content teams checking that a campaign looks right, and anyone frustrated that their links keep pulling the wrong image or an old title.
How to generate Open Graph tags in your browser
- Enter the
og:titleandog:descriptionthat should appear on the card. - Paste the canonical page URL and the absolute URL of your share image — 1200×630 pixels is the recommended size.
- Pick a content type such as website, article or product, and optionally set the site name and locale.
- Check the preview card to see roughly how the share will render in a feed.
- Copy the generated tags into your page's
<head>.
The image rules that cause most preview problems
Nearly every broken preview traces back to the image tag. This checklist covers the requirements that trip people up.
| Requirement | What to use | Why it matters |
|---|---|---|
| Dimensions | 1200×630 (1.91:1) | Renders without cropping on Facebook and LinkedIn |
| URL type | Absolute, HTTPS | Relative paths and HTTP are ignored or blocked |
| Accessibility | Publicly reachable | Login-gated or robots-blocked images won't load |
| File size | Under ~8 MB | Large files may be skipped by scrapers |
If you fix the tags but the old preview persists, the platform has cached it — force a refresh with Facebook's Sharing Debugger or LinkedIn's Post Inspector to re-scrape the page.
Key features and benefits
- Complete
og:meta block generated live as you type. - A social share preview card mock-up.
- Support for website, article, product and other
og:typevalues. - Site name and locale tags included when set.
- HTML attribute values escaped correctly.
- Free, private and fully browser-based.
Try the Open Graph Generator now — it's free and runs entirely in your browser.
Frequently asked questions
What size should an Open Graph image be?
Use 1200×630 pixels, a 1.91:1 ratio that Facebook and LinkedIn render without cropping and that stays sharp on high-resolution screens. Keep the file under about 8 MB and always reference it with an absolute HTTPS URL.
Why does my preview show the wrong image?
Platforms cache Open Graph data aggressively. After editing your tags, force a refresh through Facebook's Sharing Debugger or LinkedIn's Post Inspector, and confirm the og:image URL is absolute, publicly accessible and served over HTTPS.
Do Open Graph tags affect Google rankings?
Not directly. Open Graph is a social protocol, not a Google ranking signal. It drives click-through from social platforms, and Google may occasionally use it as fallback metadata, but your title tag and meta description are what handle search itself.
When should I use og:type article instead of website?
Use website for home pages and general pages, and article for blog posts and news stories. The article type unlocks extra properties like article:published_time that some platforms surface; e-commerce items can use product.
Do I still need Twitter Card tags as well?
X falls back to Open Graph for most fields, but you need at least a twitter:card tag to control the card format, such as summary_large_image. Adding both sets gives you full control — pair this with our Twitter Card Generator.
Related free tools
- Twitter Card Generator — rich preview cards for X.
- Meta Tag Generator — core SEO title and description tags.
- Canonical Tag Generator — resolve duplicate URLs.
- JSON-LD Generator — structured data for rich results.
Built by ByteVancer
ByteTools is a free product of ByteVancer, a software and web development studio that builds web apps, SaaS platforms and custom software for businesses. Want polished sharing and SEO built into your product from the start? Explore ByteVancer's services and reach out about your next build.
Recommended reading
Open Graph Generator: Use Cases and Team Workflows
Real scenarios where an Open Graph generator earns its keep: blog launches, product pages, campaign links, and fixing how shares look on Slack and WhatsApp.
Open Graph Best Practices and Mistakes to Avoid
Expert Open Graph tips: pick the right image size, write titles that survive truncation, set og:type right, and dodge the caching mistakes that break previews.
XOR Cipher Use Cases: CTFs, Learning, and Puzzles
Real use cases for the XOR cipher, from CTF challenges and teaching bitwise logic to lightweight obfuscation, with concrete worked examples.
XOR Cipher Tips: Keys, Security, and Common Mistakes
Pro tips and common mistakes for the repeating-key XOR cipher: key length, reuse pitfalls, format choices, and when to switch to real encryption.