Free Tool

4.9/5

Free Meta Tag Generator

Generate SEO-optimized meta tags, Open Graph tags, and Twitter Cards in seconds. Preview how your page looks in Google and copy the HTML code.

Page type presets

Page Title *0/60

The title tag shown in search results and browser tabs

Meta Description *0/160

The description shown in search engine results under the title

Canonical URL

Preferred URL for this page, prevents duplicate content issues

Generated Meta Tags

4 tags

Add a title and description to generate your meta tags.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<meta http-equiv="content-language" content="en">

Want more clicks from your links?

Shorten your page URLs with Flyn to get branded short links with built-in click analytics, QR codes, and A/B testing.

Shorten for free

How to Generate Meta Tags in 3 Steps

Enter your title and description

Add your page title (50-60 characters) and meta description (150-160 characters). Use your target keyword naturally in both fields. Our tool shows character counts and a live Google preview.

Configure social and advanced tags

Expand the Open Graph and Twitter Card sections to set your social preview image, site name, and handles. Use presets for common page types like Blog Post, Landing Page, or Product Page.

Copy and paste into your HTML

Copy the generated meta tag code and paste it into the <head> section of your HTML. The tags are formatted and ready to use, just paste and publish.

What Are Meta Tags and Why Do They Matter for SEO?

Meta tags are snippets of HTML code that describe a page's content to search engines and social media platforms. They live in the <head> section of your HTML and are not visible to users on the page itself. Despite being invisible, they are one of the most important factors in how your page ranks in search results and how it appears when shared on social media.

The title tag and meta description are what users see in Google search results. They are your page's first impression. A well-crafted title with the right keywords can improve your ranking, while a compelling description with a clear call-to-action can dramatically increase your click-through rate. Open Graph and Twitter Card tags control the social media preview, which determines whether people click when your content is shared.

Example meta tags in HTML:

<title>Best CRM for Startups | Acme</title>
<meta name="description" content="Free CRM...">
<meta property="og:image" content="https://...">

The Anatomy of a Meta Tag Block

Every line in your <head> has a specific job. Here is what each essential tag controls, and the length or size that keeps it from being cut off.

Essential Meta Tags Explained

<title>Essential

The title tag is the most important on-page SEO element. It appears as the clickable headline in search engine results and in the browser tab.

Examples

Best CRM for Startups, Free Plan | Acme

Pro tip

Put your primary keyword near the beginning. Include your brand name at the end, separated by a pipe (|) or dash (, ).

meta descriptionEssential

A brief summary of the page content that appears below the title in search results. Not a direct ranking factor but strongly impacts click-through rates.

Examples

Manage leads, automate outreach, and close deals faster with Acme CRM. Free forever for teams up to 5. No credit card required.

Pro tip

Include a call-to-action (CTA) and your primary keyword. Make it compelling enough to click.

canonical URL

Tells search engines which URL is the preferred version of this page. Prevents duplicate content issues when the same page is accessible at multiple URLs.

Examples

Pro tip

Always use the absolute URL with https://. Self-referencing canonicals (pointing to the current page) are a best practice.

robots

Controls how search engine crawlers handle the page, whether to index it and whether to follow its links.

Examples

index, follow | noindex, nofollow | noarchive | nosnippet

Pro tip

Use "noindex" for login pages, staging sites, and thank-you pages. Default is "index, follow" if omitted.

og:title

The title that appears in the social media preview card when your page is shared on Facebook, LinkedIn, Discord, Slack, and WhatsApp.

Examples

Acme CRM, The Best Free CRM for Startups

Pro tip

Can be different from your <title> tag. Social titles can be more conversational or eye-catching.

og:description

The description that appears in the social media preview card. Usually a shorter, punchier version of your meta description.

Examples

The free CRM that startup teams actually love. Try Acme today.

Pro tip

Keep it under 100 characters for best results across all platforms.

og:image

The image that appears in the social media preview card. This is the single most impactful element for social sharing engagement.

Examples

https://example.com/og-image.jpg (1200x630px)

Pro tip

Use 1200x630px, under 5MB, JPG or PNG. Include your brand logo and a clear value proposition in the image.

twitter:card

Controls the type of Twitter/X card preview. summary_large_image shows a large image above the text; summary shows a small square image.

Examples

summary_large_image | summary | app | player

Pro tip

Use "summary_large_image" for content pages and "summary" for profile or utility pages.

viewportEssential

Controls how the page is displayed on mobile devices. Essential for responsive design and mobile SEO.

Examples

width=device-width, initial-scale=1

Pro tip

Never omit this tag. Without it, mobile devices render at desktop width and shrink the page.

One Set of Tags, Three Places It Shows Up

You write the tags once. The same title, description, and image render as your Google result, your Facebook and LinkedIn card, and your X card.

Meta Tag Best Practices

Don't

Keep title tags under 60 characters

Stuff keywords: "Best CRM CRM Software CRM Tool"

Write unique meta descriptions per page

Copy the same description across all pages

Use absolute URLs for OG images

Use relative paths: /images/og.jpg

Set canonical URLs on every page

Leave duplicate pages without canonical tags

Include a call-to-action in descriptions

Write vague descriptions with no CTA

Test social previews before publishing

Publish without checking how links look on social

Use noindex for internal/staging pages

Let staging or login pages get indexed

Place primary keyword early in the title

Bury your keyword at the end of a long title

Meta Tags + Link Shortener: The Full SEO Stack

Great meta tags bring traffic from search and social. A link shortener helps you track and optimize every click.

Better SERP presence

Optimized title tags and meta descriptions improve your visibility and click-through rate in Google search results.

Social media previews

Open Graph and Twitter Cards make your shared links look professional and increase engagement on every platform.

Click analytics

Shorten your page URLs with Flyn to track clicks, referrers, devices, and locations in real time.

A/B test everything

Test different landing pages with the same short link. Find which version converts better and optimize.

How to Add Meta Tags in Popular Frameworks

Plain HTML

<head>
  <title>Your Page Title</title>
  <meta name="description" content="...">
  <meta property="og:title" content="...">
</head>

Paste the generated meta tags directly into the <head> section of your HTML file. Make sure they appear before any CSS or JavaScript links.

Next.js (App Router)

export const metadata: Metadata = {
  title: "Your Page Title",
  description: "...",
  openGraph: { title: "...", images: ["..."] },
}

Use the Metadata export in your page.tsx or layout.tsx file. Next.js automatically generates the meta tags for you.

WordPress

Use Yoast SEO or RankMath plugin to set title, description, and OG tags from the post editor.

Both plugins add a meta box below the editor where you can set all meta tags without touching HTML. They also provide SEO analysis and readability scores.

React (Create React App)

import { Helmet } from "react-helmet";

<Helmet>
  <title>Your Page Title</title>
  <meta name="description" content="..." />
</Helmet>

Use react-helmet or react-helmet-async to manage meta tags in single-page React apps. Place the Helmet component in your page components.

Shopify

Products → Edit → Search engine listing preview → Edit

Shopify lets you edit title and meta description from the product/page editor. For OG tags, edit your theme.liquid file or use a meta tags app from the Shopify App Store.

Common Meta Tag Mistakes to Avoid

Duplicate title tags across pages

Every page on your site should have a unique title tag. Duplicate titles confuse search engines about which page to rank and make your site look unprofessional in search results. Use our meta tag generator to create unique titles for each page.

Missing or too-long meta descriptions

Pages without meta descriptions let Google auto-generate a snippet, which is often irrelevant or cut mid-sentence. Descriptions over 160 characters get truncated with "...", keep them concise and compelling with a clear CTA.

Using relative URLs for OG images

Open Graph images must use absolute URLs starting with https://. Relative paths like /images/og.jpg will not work on Facebook, LinkedIn, or Twitter. Always include the full domain in your og:image tag.

Forgetting mobile viewport tag

Without the viewport meta tag, your page renders at desktop width on mobile devices, creating a terrible user experience. Google uses mobile-first indexing, so this directly affects your rankings. Always include width=device-width, initial-scale=1.

Not setting canonical URLs

Without canonical tags, search engines may index multiple versions of the same page (with/without www, http/https, with query parameters). This splits your ranking signals across duplicates. Set a self-referencing canonical on every page.

Frequently Asked Questions

What are meta tags?

Meta tags are HTML elements placed in the <head> section of a web page that provide metadata about the page to search engines and social media platforms. They are not visible to users on the page itself but tell search engines what the page is about, how to index it, and how to display it in search results and social media previews. The most important meta tags for SEO are the title tag, meta description, robots tag, and canonical URL.

What is the ideal length for a title tag?

The ideal title tag length is between 50 and 60 characters. Google typically displays up to 60 characters (or about 580 pixels wide) before truncating the title with an ellipsis. Titles that are too short may miss valuable keyword opportunities, while titles that are too long will be cut off in search results. Place your most important keywords near the beginning of the title for maximum SEO impact and user visibility.

What is the ideal length for a meta description?

The ideal meta description length is between 150 and 160 characters. Google typically displays up to 160 characters in desktop search results and around 120 characters on mobile. While meta descriptions are not a direct ranking factor, they significantly impact click-through rates (CTR). Write a compelling summary that includes your target keyword and a clear call to action to encourage users to click.

What is the difference between meta tags and Open Graph tags?

Standard meta tags (title, description, robots) are primarily for search engines, they control how your page appears in Google, Bing, and other search results. Open Graph (OG) tags control how your page appears when shared on social media platforms like Facebook, LinkedIn, Discord, Slack, and WhatsApp. Twitter has its own twitter:card tags that override OG tags. For the best SEO and social sharing results, you should set both standard meta tags and OG tags.

Do meta tags affect SEO?

Yes, certain meta tags directly affect SEO. The title tag is one of the most important on-page ranking factors, it tells Google what your page is about and appears as the clickable headline in search results. The meta description, while not a direct ranking factor, affects click-through rates which can indirectly impact rankings. The robots meta tag controls whether search engines can index the page. The canonical tag prevents duplicate content issues. Together, these meta tags form the foundation of on-page SEO.

What is a canonical URL and why does it matter?

A canonical URL (specified with <link rel="canonical">) tells search engines which version of a page is the preferred or "master" copy when duplicate or similar content exists at multiple URLs. For example, if the same product page is accessible at example.com/product and example.com/product?ref=email, the canonical tag tells Google which URL to index and credit with ranking signals. Without canonical tags, search engines may split ranking power across duplicate URLs, hurting your SEO.

What does the robots meta tag do?

The robots meta tag tells search engine crawlers how to handle a specific page. "index, follow" (the default) allows the page to appear in search results and follow its links. "noindex" prevents the page from appearing in search results. "nofollow" tells crawlers not to follow links on the page. "noarchive" prevents search engines from caching the page. Use "noindex" for pages like login screens, staging environments, or thank-you pages that you do not want in search results.

What is the recommended Open Graph image size?

The recommended Open Graph image size is 1200 x 630 pixels with a 1.91:1 aspect ratio. This works well across Facebook, LinkedIn, Discord, Slack, and WhatsApp. For Twitter summary_large_image cards, the same 1200x630 size works. Always use absolute URLs (starting with https://), keep the file size under 5MB, and use JPG or PNG format. Place important content in the center of the image, as some platforms crop the edges.

Should I use keywords meta tag in 2026?

The meta keywords tag has almost no SEO value in 2026. Google has publicly stated that it ignores the keywords meta tag for ranking purposes since 2009. Bing gives it very minor weight. Most SEO experts recommend either skipping it entirely or using a short list of 3-5 highly relevant keywords. Your effort is better spent optimizing your title tag, meta description, and content quality rather than the keywords meta tag.

How do I check if my meta tags are working?

There are several ways to check your meta tags: use our Open Graph Checker tool to preview how your URL appears on social platforms, use Google Search Console to see how Google reads your title and description, view your page source (Ctrl+U) to inspect the raw HTML, or use browser developer tools (F12) to check the <head> section. For social media previews specifically, Facebook has a Sharing Debugger and Twitter has a Card Validator tool.

What is the viewport meta tag?

The viewport meta tag controls how your page is displayed on mobile devices. The standard value "width=device-width, initial-scale=1" tells the browser to set the page width to the device screen width and start at 1x zoom. Without this tag, mobile browsers will try to render the page at a desktop-size viewport and then shrink it down, making text tiny and hard to read. This tag is essential for responsive web design and mobile SEO.

Is this meta tag generator free? Do I need to sign up?

Yes, our meta tag generator is 100% free with no sign-up required. You can generate unlimited meta tags, use page-type presets, customize Open Graph and Twitter Card tags, see a Google SERP preview, and save your tag history, all without creating an account. If you want to shorten your page URLs with branded links and get click analytics, you can sign up for a free Flyn account.

More Free SEO Tools

Explore other free tools from Flyn to optimize your website and track performance.

Ready to optimize your entire link strategy?

Combine perfect meta tags with Flyn's link shortener for branded short links, real-time click analytics, QR codes, and A/B testing, all in one platform.

Start free, no credit card Read the API Docs

Free Meta Tag Generator

How to Generate Meta Tags in 3 Steps

Enter your title and description

Configure social and advanced tags

Copy and paste into your HTML

What Are Meta Tags and Why Do They Matter for SEO?

The Anatomy of a Meta Tag Block

Essential Meta Tags Explained

One Set of Tags, Three Places It Shows Up

Meta Tag Best Practices

Meta Tags + Link Shortener: The Full SEO Stack

Better SERP presence

Social media previews

Click analytics

A/B test everything

How to Add Meta Tags in Popular Frameworks

Plain HTML

Next.js (App Router)

WordPress

React (Create React App)

Shopify

Common Meta Tag Mistakes to Avoid

Duplicate title tags across pages

Missing or too-long meta descriptions

Using relative URLs for OG images

Forgetting mobile viewport tag

Not setting canonical URLs

Frequently Asked Questions

More Free SEO Tools

Open Graph Checker

UTM Builder

Schema Markup Generator

SERP Snippet Preview

Ready to optimize your entire link strategy?