OpenGraph Meta Tag Generator

Generate Open Graph and Twitter Card meta tags for better social media sharing. Preview how your page appears on Facebook, Twitter, and LinkedIn.

Basic Information
Page Title 0/95
Description 0/300
Page URL (Canonical)
Type
Locale
Site Name
Image Settings
Image URL Recommended: 1200×630px, under 5MB, JPG or PNG
Image Alt Text
Width (px)
Height (px)
Twitter / X Card
Card Type
Site Handle
Creator Handle
Preview & Code

Facebook / LinkedIn

1200 × 630

example.com

Page Title

Page description will appear here when shared on social media platforms.

Twitter / X

Large Image Card

Page Title

Page description will appear here when shared on social media platforms.

example.com

Checklist

· Title set (50–60 chars)
· Description set (100–160 chars)
· URL set
· Image URL set
· Image alt text provided
· Site name set
Twitter card enabled

What are OpenGraph Meta Tags?

OpenGraph (OG) meta tags are snippets of HTML that control how your web page appears when shared on social media platforms like Facebook, LinkedIn, Slack, and Discord. Introduced by Facebook in 2010, the Open Graph protocol allows any web page to become a rich object in a social graph.

Without OG tags, social platforms scrape your page and pick content randomly — often pulling the wrong image or a truncated description. With properly set OG tags, you control exactly what title, image, and description are shown, leading to significantly higher click-through rates.

How to Use This Generator

  1. 1 Fill in the Basic Information — title, description, URL, and site name.
  2. 2 Add an Image URL with dimensions. Use a 1200×630px image for best results across all platforms.
  3. 3 Select your content type. For blog posts, choose "Article" and fill in author and date fields.
  4. 4 Configure the Twitter Card type. summary_large_image works best for most content.
  5. 5 Click the Code tab, copy the generated tags, and paste them inside your HTML <head>.

Common Use Cases

Blog & News Sites

Use article type with published_time and author tags to enable rich previews and news indexing by Google.

E-commerce Product Pages

Set a compelling product image and description to boost click-through rates from social sharing.

Landing Pages & SaaS

Control your brand impression on social media by setting a professional og:image and consistent site name.

Developer Documentation

Make documentation links stand out in Slack and team chat tools with descriptive OG cards.

Essential OG Tags Reference

TagRequiredDescription
og:titleRequiredTitle of your page. Keep under 60 characters.
og:descriptionRequiredShort description shown in the card preview.
og:imageRequiredURL of the image to display. 1200×630px recommended.
og:urlRequiredCanonical URL of the page.
og:typeRequiredContent type: website, article, video, music, etc.
og:site_nameOptionalName of your overall website or brand.
og:localeOptionalContent language/locale, e.g. en_US.
og:image:altOptionalAccessibility alt text for the OG image.
twitter:cardOptionalTwitter card format: summary or summary_large_image.
twitter:siteOptionalTwitter @username of the website.

Frequently Asked Questions