๐ท๏ธ Meta Tag Generator
<title>My Awesome Page</title> <meta name="description" content="A short description of the page for search engines." /> <meta property="og:type" content="website" /> <meta property="og:title" content="My Awesome Page" /> <meta property="og:description" content="A short description of the page for search engines." /> <meta property="og:url" content="https://example.com/" /> <meta property="og:image" content="https://example.com/og-image.png" /> <meta property="og:site_name" content="My Site" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="My Awesome Page" /> <meta name="twitter:description" content="A short description of the page for search engines." /> <meta name="twitter:image" content="https://example.com/og-image.png" />
Enter a page title, description, URL, and image URL, and this tool generates basic SEO meta tags plus Open Graph (OGP) and Twitter Card tags all at once. Handy for controlling how a page looks when it's shared on social media.
How to use
- Enter the page title and description.
- Enter the page URL, image URL, and site name.
- Choose a Twitter Card type โ the HTML tags are generated automatically. Copy them and paste into your <head>.
How the calculation works
This tool generates the <head> tags that control how a page appears in search engines and on social media. โข <title>: the page title shown in the browser tab and as the search result heading โข meta description: the summary search engines may show under the title โข Open Graph (og:โฆ): title, description and image when the link is shared on Facebook, LINE, Slack and others โข Twitter card (twitter:โฆ): how the link appears when shared on X (formerly Twitter) Characters such as ", < and & in the title or description are escaped automatically so the HTML stays valid. The Twitter card type can be "summary" (small image) or "summary_large_image" (large image).
Worked example
Sample output (excerpt) <title>My Awesome Page</title> <meta name="description" content="A short description of the page for search engines." /> <meta property="og:title" content="My Awesome Page" /> <meta property="og:image" content="https://example.com/og-image.png" /> <meta name="twitter:card" content="summary_large_image" /> A title of "Tom & Jerry" becomes Tom & Jerry.
Things to be aware of
- For og:image, around 1200 ร 630 pixels (1.91:1) is commonly recommended. Use an absolute URL starting with https://.
- Google sometimes writes its own snippet from the page content instead of using the meta description.
- Social platforms cache link previews, so changes to the tags may not show up right away.
FAQ
What's the recommended size for the OG image?
Around 1200ร630 pixels is generally recommended.
What's the difference between summary and summary_large_image?
"summary" shows a small square image, while "summary_large_image" shows a large, wide image. In most cases summary_large_image looks better and is recommended.
Where do the generated tags go?
Paste them inside the <head> tag of your HTML file.