Dev
Meta Tag Generator
Meta tags are the small pieces of HTML in a page's <head> that tell search engines and social platforms what the page is about and how to display it when it's shared. The title tag and meta description show up directly in Google search results, while Open Graph tags control how the link looks when pasted into Facebook, LinkedIn, or Slack, and Twitter Card tags do the same for X. Get any of these wrong or leave them out, and a shared link shows a blank preview, the wrong title, or no image at all. This tool takes the handful of details every page needs — title, description, URL, an optional image, a content type, and an optional social handle — and turns them into a complete, copy-paste block of tags split into three groups: Standard, Open Graph, and Twitter Card. Special characters like quotes and ampersands are escaped automatically so the output never breaks your markup. If you skip the image URL, the tool leaves out og:image and twitter:image entirely rather than generating tags that point at nothing. The result is ready to paste straight into the head of your HTML, with no manual formatting required.
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Fill in Page Title and Meta Description with the exact text you want search engines and social platforms to display.
- Paste the canonical Page URL for the page these tags belong to.
- Add an Image URL if you want a preview thumbnail on Facebook, LinkedIn, or X; leave it blank to skip image tags entirely.
- Choose the Content Type that matches the page: website, article, or product.
- Add your Twitter/X handle if you want shared links credited to your account.
- Copy the generated tags into the <head> section of your HTML, grouped by Standard, Open Graph, and Twitter Card.
Use Cases
- •A solo developer launching a landing page pastes in the title and description to get copy-paste meta tags before deploying
- •A content marketer publishing a blog post sets Content Type to "article" so the link preview on LinkedIn shows the right context
- •An online store owner prepping a product page sets Content Type to "product" and adds the product photo so shared links show an image
- •A freelance developer handing off a client site generates a full head-tag block for each page instead of typing the boilerplate by hand
- •A social media manager checks that a page includes the right Twitter handle so shared links credit the correct account
Tips
- →Keep meta descriptions between roughly 120 and 158 characters so they don't get cut off in Google's search results.
- →Use an absolute URL (starting with https://) for the image — most crawlers and chat apps won't resolve a relative image path.
- →Set Content Type to "article" for blog posts and news pages so platforms can pick up publish and author context correctly.
- →After publishing, test your tags with Facebook's Sharing Debugger or a Twitter Card validator, since cached previews can take time to refresh.
- →Aim for an image at least 1200x630 pixels to avoid pixelation or awkward cropping in social feeds.
- →Keep the title tag under about 60 characters so it displays in full in search result snippets.
FAQ
how do I make my link preview show an image when I share it on Slack or Discord
Fill in the Image URL field with a direct, absolute link to the image (starting with https://). That generates the og:image and twitter:image tags most chat apps and social platforms read to build the preview card. If the field is left blank, those two tags are skipped entirely rather than pointing at nothing.
What happens if I leave the image URL blank?
The tool simply omits the og:image and twitter:image lines from the output — every other tag still generates normally. Most platforms fall back to a summary-style card without an image in that case, which is fine for text-only shares but won't stand out as much in a social feed.
do these tags actually improve my google ranking
Not directly. The meta description doesn't factor into ranking, but a well-written one improves click-through rate from the search results page, which matters for traffic. The title tag carries more ranking weight than the description. Open Graph and Twitter Card tags have zero effect on search ranking — they only control how links look when shared on social platforms.
Why are quotes and ampersands replaced with codes like " and &?
That's HTML escaping, and it's there to keep your markup valid. If your title or description contains a straight quote and it isn't escaped, it can prematurely close the attribute it sits inside and break the tag (or everything after it). Escaping converts those characters to their safe HTML entity equivalents so the generated tags always parse correctly.
Can I use this for pages that are not a website homepage?
Yes — the Content Type dropdown covers website, article, and product, which sets the og:type value accordingly. Use "article" for blog posts and news pages, "product" for e-commerce listings, and "website" for everything else, including general landing pages and homepages.
You might also like
Popular tools from other categories that share themes with this one.
Try these next
More free tools from other corners of the catalog, picked by shared themes.