Open Graph & Meta Tag Generator
Generate and preview Open Graph and meta tags for social media sharing. See exactly how your content will look when shared on Facebook, Twitter, LinkedIn, and more.
Required Fields
Recommended: 1200×630px (1.91:1 aspect ratio)
Optional Fields
example.com
My Awesome Product | Brand Name
Discover the best tool for developers. Free, fast, and easy to use. Start building better apps today with our powerful platform.
My Awesome Product | Brand Name
Discover the best tool for developers. Free, fast, and easy to use. Start building better apps today with our powerful platform.
My Brand
My Awesome Product | Brand Name
Discover the best tool for developers. Free, fast, and easy to use. Start building better apps today with our powerful platform.
example.com
My Awesome Product | Brand Name
Discover the best tool for developers. Free, fast, and easy to use. Start building better apps today with our powerful platform.
My Brand
My Awesome Product | Brand Name
Discover the best tool for developers. Free, fast, and easy to use. Start building better apps today with our powerful platform.
Generated Meta Tags
<title>My Awesome Product | Brand Name</title> <meta name="description" content="Discover the best tool for developers. Free, fast, and easy to use. Start building better apps today with our powerful platform." /> <link rel="canonical" href="https://example.com/my-page" /> <meta property="og:title" content="My Awesome Product | Brand Name" /> <meta property="og:description" content="Discover the best tool for developers. Free, fast, and easy to use. Start building better apps today with our powerful platform." /> <meta property="og:url" content="https://example.com/my-page" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="My Brand" /> <meta property="og:locale" content="en_US" /> <meta property="og:image" content="https://example.com/og-image.jpg" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:alt" content="My Awesome Product | Brand Name" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="My Awesome Product | Brand Name" /> <meta name="twitter:description" content="Discover the best tool for developers. Free, fast, and easy to use. Start building better apps today with our powerful platform." /> <meta name="twitter:image" content="https://example.com/og-image.jpg" />
17 lines • 1353 characters
Frequently Asked Questions
What is an Open Graph tag?
Open Graph tags are meta tags that control how URLs appear when shared on social media platforms like Facebook, Twitter, and LinkedIn. They let you customize the title, description, image, and other properties that appear in social previews, ensuring your content looks exactly how you want it when shared.
What size should my og:image be?
The recommended og:image size is 1200×630 pixels with an aspect ratio of 1.91:1. This is the standard size for Facebook and most social platforms. Ensure your image is at least 600×315px for best results, and keep the file size reasonable (under 8 MB) for fast loading.
What's the difference between og:title and the page title?
The page <title> tag controls browser tab text and search engine display, while og:title controls how your page title appears specifically when shared on social media. You can use different text for each to optimize for different contexts — a longer, SEO-focused title in the page title tag, and a shorter, more compelling title in og:title.
Do I need Twitter Card meta tags if I have Open Graph tags?
Yes — Twitter reads its own twitter: tags first before falling back to og: tags. Including both ensures maximum compatibility across platforms. Twitter Card tags give you more control over how your content appears on Twitter/X specifically, including the card type and image sizing.