Open Graph Preview Text Builder
Build and preview the Open Graph title and description tags for social media sharing.
How to use this tool
- Enter og title and og description in the fields above.
- Results update instantly as you type — or click Calculate.
- Read your title characters and the full breakdown beneath it.
Build and preview the Open Graph title and description tags for social media sharing.
How it works
Open Graph (OG) tags are HTML meta tags that control how your page appears when shared on social networks like Facebook, LinkedIn, and messaging apps. The two most important are og:title (the headline shown in the link preview) and og:description (the supporting summary text). This tool lets you type both values and immediately see how they will look in a card-style preview.
Enter your proposed OG title and OG description. The preview shows the rendered card at the dimensions social platforms use — typically around 1200 by 630 pixels for the image area, with 60-90 characters for the title and 155-200 characters for the description. Character counters warn you when you are close to typical cutoff limits.
Optimising OG tags improves click-through rates from social shares. A good OG title is direct and benefit-driven; a good OG description adds context without duplicating the title. Once happy with the copy, paste the values into your CMS or add them manually to your HTML head as meta property tags.
Worked example
Write OG tags for a recipe article
- Enter OG Title: 'Easy One-Pan Chicken Tikka Masala (30 Minutes)'.
- Enter OG Description: 'Creamy, aromatic chicken tikka masala made in a single pan. Ready in 30 minutes with pantry staples — no takeaway needed.'
- Check the preview card to confirm nothing is cut off.
- Copy the values into your CMS meta fields.
A clean social card preview showing title and description within character limits
Common mistakes to avoid
- Making the OG title identical to the page's HTML title tag — they can differ, and OG titles can be more conversational.
- Writing an OG description that merely repeats the title — use the description to add new information or a call to action.
- Exceeding 200 characters in the description, which causes visible truncation on most platforms.
Key terms
- Open Graph protocol
- A metadata standard created by Facebook that lets web pages define how they appear when shared on social platforms.
- og:title
- The Open Graph meta tag that sets the title displayed in a social share card.
- og:description
- The Open Graph meta tag that sets the supporting description text in a social share card.
Frequently asked questions
- What are Open Graph tags?
- Open Graph (OG) tags are meta tags that control how your page appears when shared on social media platforms like Facebook, LinkedIn, and Slack.
- What is the ideal OG title length?
- Facebook recommends 40–60 characters for og:title. Longer titles may be truncated when displayed in link previews.