Open Graph Meta Tag Generator
Create Open Graph and Twitter Card meta tags for better link previews when your website pages are shared on social media and messaging platforms.
Tag Details
Generated Meta Tags
Create Open Graph Meta Tags Online
When someone shares a webpage link on platforms such as Facebook, LinkedIn, X, WhatsApp, Slack, or other messaging apps, the platform can display a preview card with a title, description, image, and website name.
Open Graph meta tags control much of that preview.
Use this Open Graph Meta Tag Generator to enter your page details and create ready-to-use HTML meta tags. Copy the generated code and add it inside the <head> section of your webpage.
What Are Open Graph Meta Tags?
Open Graph tags are HTML meta tags that describe how a webpage should appear when shared. They usually begin with og:.
The most commonly used Open Graph tags are:
og:title— The title shown in the share previewog:description— A short description of the pageog:image— The image displayed in the preview cardog:url— The canonical URL of the shared pageog:type— The type of content, usuallywebsiteorarticleog:site_name— The name of your website or brand
Without these tags, social platforms may choose a title, image, or description automatically. That can result in an incomplete, outdated, or less attractive link preview.
How to Use the Open Graph Meta Tag Generator
Enter the page title you want people to see when the URL is shared.
Add a clear, relevant description of the page.
Enter the full canonical page URL.
Add the URL of your social sharing image.
Select the content type, such as
websiteorarticle.Enter your website or brand name.
Copy the generated Open Graph and Twitter Card meta tags.
Paste them inside the
<head>section of the relevant page.
Open Graph Meta Tag Example
<meta property="og:title" content="Free Online Developer Tools | DevToolbox">
<meta property="og:description" content="Format, convert, test, debug, and inspect data, code, APIs, and web utilities online.">
<meta property="og:image" content="https://www.example.com/images/social-preview.jpg">
<meta property="og:url" content="https://www.example.com/tools/json-formatter">
<meta property="og:type" content="website">
<meta property="og:site_name" content="DevToolbox">Twitter Card Meta Tag Example
Twitter Card tags can help control how your page appears when shared on X.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Online Developer Tools | DevToolbox">
<meta name="twitter:description" content="Format, convert, test, debug, and inspect data, code, APIs, and web utilities online.">
<meta name="twitter:image" content="https://www.example.com/images/social-preview.jpg">Why Use Open Graph Tags?
Create Better Social Sharing Previews
A clear title, description, and image make your shared links easier to understand. This can improve trust and encourage people to click through to your website.
Keep Your Brand Consistent
Set your preferred site name and visual style instead of leaving platforms to select random page content or images.
Control the Correct Image
Open Graph image tags let you select a relevant social sharing image. This is especially useful for blog posts, product pages, landing pages, and promotional content.
Improve Link Presentation Across Platforms
The same webpage can be shared on social networks, chat apps, workplace tools, and messaging platforms. Proper social meta tags give those services better information to build a useful preview.
Best Practices for Open Graph Images
Your Open Graph image should be clear, relevant, and easy to understand at a small size.
For most social sharing cards, use an image with:
A recommended size of 1200 × 630 pixels
A landscape layout
Readable text, if text is included
A clear subject or branded visual
A publicly accessible HTTPS image URL
No important content too close to the edges
Avoid uploading a very small image, a portrait image that may crop poorly, or an image blocked from public access.
Open Graph Title and Description Tips
Keep the Title Clear
Use a title that tells people exactly what the page offers. Avoid vague titles such as “Welcome” or “Learn More.”
Good example:
JSON Formatter & Validator – Format JSON OnlineWrite a Useful Description
Your description should briefly explain the page value. It does not need to repeat the title word for word.
Good example:
Format, validate, and beautify JSON data online with a fast, easy-to-use JSON formatter.Use the Correct Canonical URL
Always use the preferred version of the page URL. For example, do not use a tracking URL, temporary preview URL, or an alternative URL that redirects elsewhere.
Common Open Graph Meta Tag Mistakes
Missing og:image
If no image is specified, social platforms may choose an unrelated image from the page or show no image at all.
Using a Private or Broken Image URL
The image must be publicly available. If it requires login access or is blocked from crawlers, the social platform may not be able to display it.
Reusing the Same Title on Every Page
Every important page should have a specific sharing title and description. Product pages, blog posts, tools, and landing pages should not all use the same generic text.
Using a Different URL in og:url
Use the canonical URL of the page. This helps social platforms recognize that different shared links refer to the same content.
Forgetting Twitter Card Tags
Open Graph tags are widely used, but adding Twitter Card tags gives you better control over previews on X.