Meta Tag Generator
Generate Open Graph and Twitter Card meta tags for your website. Copy and paste into your HTML <head>.
Page Information
0/60 characters
0/200 characters
Recommended: 1200×630 pixels
Generated Code
Enter a title to generate meta tags
How to Use
- 1.Fill in your page information above
- 2.Click "Copy All" to copy the generated code
- 3.Paste into your HTML <head> section
- 4.Use the Validator to test your tags
Understanding Meta Tags for Social Media
Meta tags are the invisible instructions that tell search engines and social platforms how to display your content. When you share a link on Twitter or LinkedIn, these platforms look for specific meta tags to create that preview card. Get them wrong—or leave them out—and your carefully crafted content shows up as a boring text link.
The Open Graph protocol, originally developed by Facebook, has become the standard for social media previews. Twitter has its own tags too, but smart implementations include both to cover all platforms.
Essential Meta Tags Explained
og:title
The headline that appears in social previews. Should be compelling and under 60 characters to avoid truncation. This is different from your SEO title tag—you can optimize each separately.
<meta property="og:title" content="Your Page Title" />og:description
A brief summary shown below the title. Keep it under 155 characters for full display. Focus on what makes the content valuable—why should someone click?
<meta property="og:description" content="Brief description here" />og:image
The preview image URL. Must be absolute (include https://). Recommended size is 1200×630 pixels for optimal display across platforms. This is the single most impactful tag for engagement.
<meta property="og:image" content="https://example.com/image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />twitter:card
Tells Twitter how to display your content. Use "summary_large_image" for a big preview image, or "summary" for a smaller thumbnail. The large image format typically gets more engagement.
<meta name="twitter:card" content="summary_large_image" />Framework-Specific Implementation
Next.js
Use the Metadata API in your page.tsx or layout.tsx files for automatic meta tag generation.
Read the Next.js guide →React
Use react-helmet or react-helmet-async to manage meta tags in single-page applications.
Read the React guide →Common Mistakes to Avoid
Using relative image URLs
Always use absolute URLs starting with https://
Missing image dimensions
Include og:image:width and og:image:height for faster rendering
Forgetting Twitter-specific tags
Twitter needs twitter:card even if you have OG tags
Not testing after deployment
Cache can cause old previews to persist—use platform debug tools
Need an OG image to go with your tags?
Create professional social preview images in seconds with our free generator.
Create OG Image