DevToolBox

OG Preview

Open Graph Preview

See exactly how your page will look when shared on Google, Twitter/X, Facebook, LinkedIn, Slack, and Discord.

Meta Tag Inputs

0/90
0/300

Recommended image size: 1200 x 630 px (1.91:1 ratio)

Title: keep under 60 chars for Google; under 70 for Twitter/X

Description: keep under 160 chars for Google; under 200 for social

Google Search

example.com

Page Title

No description provided.

Twitter / X

No image

example.com

Page Title

No description provided.

Facebook / LinkedIn

No image

EXAMPLE.COM

Page Title

No description provided.

Slack

example.com

Page Title

No description provided.

Discord

example.com

Page Title

No description provided.

Generated Meta Tags

<meta property="og:type" content="website" />

<meta name="twitter:card" content="summary_large_image" />
Built with Next.js, Tailwind CSS, and zero external dependencies. Everything runs in your browser.

Frequently Asked Questions

Common questions about OG Preview

Open Graph (OG) tags are HTML meta tags that control how your website appears when shared on social media. They define the title, description, and image shown in link previews on Facebook, Twitter, Slack, Discord, and other platforms.

Enter your og:title, og:description, og:image URL, and site URL. The tool shows live previews of how your link will appear on Google search results, Twitter cards, Facebook posts, Slack messages, and Discord embeds.

The recommended OG image size is 1200x630 pixels. This works well across most platforms. Twitter also supports 1200x600 for summary_large_image cards. Use PNG or JPG format and keep file size under 5MB.

Add meta tags in the <head> section of your HTML. The tool generates the complete HTML code you need. For Next.js, use the metadata export. For WordPress, use an SEO plugin like Yoast.

You Might Also Like