SEO Utility

Meta Tags Generator

Create exact SEO meta tags and social media Open Graph cards for your website. Preview exactly how your link will look when shared on Google, Facebook, and Twitter.

Page Details

Page Title

18 / 60 characters

Meta Description

110 / 160 characters

OpenGraph Image URLCanonical Website URL

Visual Previews

Google Search (desktop)

🚀

My Awesome Websitehttps://mywebsite.com

My Awesome Website

This is the description that will appear on Google and social media cards when people share your website link.

Twitter Card (desktop)

mywebsite.com

My Awesome Website

This is the description that will appear on Google and social media cards when people share your website link.

Generated HTML Code

<!-- Primary Meta Tags -->
<title>My Awesome Website</title>
<meta name="title" content="My Awesome Website" />
<meta name="description" content="This is the description that will appear on Google and social media cards when people share your website link." />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://mywebsite.com" />
<meta property="og:title" content="My Awesome Website" />
<meta property="og:description" content="This is the description that will appear on Google and social media cards when people share your website link." />
<meta property="og:image" content="https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=1470&auto=format&fit=crop" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://mywebsite.com" />
<meta property="twitter:title" content="My Awesome Website" />
<meta property="twitter:description" content="This is the description that will appear on Google and social media cards when people share your website link." />
<meta property="twitter:image" content="https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=1470&auto=format&fit=crop" />

Copy this code and paste it directly between the <head> and </head> tags of your website.

Why do you need Open Graph Meta Tags?

Have you ever pasted a website URL into a chat app like Slack or Discord, and watched it magically expand into a beautiful card with a summary and a hero image? That isn't magic—the website has perfectly constructed Open Graph (OG) tags.

When you fail to include these tags, social networks are forced to guess what your page is about. They often pull random, contextless text and stretch tiny logos into blurry backgrounds. Implementing the code generated above ensures that every time someone shares your content, it looks professional and compels others to click.

Frequently asked questions

What are Meta Tags?

Meta tags are invisible snippets of HTML code that describe a web page's content. They don't appear on the page itself, but are embedded in the page's code to tell search engines (like Google) and social networks (like Twitter and Facebook) what the page is about.

What is Open Graph (OG)?

Open Graph is a protocol originally created by Facebook that standardizes how website links appear when shared on social media. Without Open Graph tags, a shared link usually just looks like plain text. With them, it becomes a rich, clickable card with an image, bold title, and description.

How long should a meta description be?

Google typically truncates meta descriptions after 155–160 characters. Our tool includes Character Counters to ensure your descriptions and titles fit perfectly inside the search result window without getting cut off with an ellipsis (...).

Where do I paste this HTML code?

Once you copy the generated code, you must paste it directly inside the <head> section of your website's HTML document. If you are using a CMS like WordPress, it is easier to use an SEO plugin to manage these tags rather than hardcoding them.