You've published a web page, but it's not showing up in Google search, or when someone shares it on social media the preview looks broken. In most cases, the culprit is missing or misconfigured meta tags in the <head> section of your HTML.
Meta tags are invisible to visitors but are the first thing search engines and social media bots read when they visit your page. A title tag that's just a few characters too long can get rewritten by Google. An OGP image with the wrong dimensions will break your Twitter Card. These small details have a measurable impact on click-through rates and social sharing.
This guide covers every major meta tag you need — title, meta description, Open Graph (OGP), Twitter Card, robots, canonical, and hreflang — with copy-ready templates and SEO best practices. You can check your existing tags anytime with our free meta tag generator or SERP preview tool.
What Are Meta Tags?
Meta tags are HTML elements placed inside the <head> section of a web page. They don't render visibly in the browser, but they communicate essential information about the page to search engines, social platforms, and browsers.
Where Meta Tags Make a Difference
- Google search results: The title and snippet displayed in the SERP are generated from your title tag and meta description
- Social media sharing: When a page is shared on Twitter, Facebook, LinkedIn, or Slack, the card preview is controlled by OGP tags
- Crawl control: The robots meta tag tells search engines whether to index a page and whether to follow its links
- Duplicate content: The canonical tag signals the preferred URL when the same content is accessible from multiple addresses
- International SEO: The hreflang tag tells search engines which language and regional variant to show to which audience
Meta tags don't replace high-quality content, but getting them right can significantly improve your click-through rate, prevent indexing issues, and ensure your pages look great when shared. The good news is that most of them are straightforward to implement once you understand what each one does.
How to Write the Title Tag
The <title> tag is the single most important on-page SEO element. Google typically uses it as the clickable headline in search results, though it may rewrite it if the tag doesn't accurately reflect the page content.
Recommended Length
- 50–60 characters (approximately 480–580px wide) is the sweet spot
- Titles shorter than 30 characters often lack enough information to be useful
- Titles longer than 60 characters are typically truncated with an ellipsis in the SERP
- Google measures pixel width, not character count — wide characters like "W" or "M" take more space
How to Include Your Brand Name
Place your primary keyword at the beginning of the title and your brand name at the end, separated by a pipe (|) or a dash (-). Users focus on the start of the title, so front-loading your keyword improves both rankings and click-through rate.
Bad vs. Good Examples
| Type | Example | Problem |
|---|---|---|
| Bad | Home | Acme Corp | "Home" contains no keyword and gives users no reason to click |
| Bad | A Complete Guide to Meta Tags, Title Tags, Descriptions, OGP, Robots, Canonical, and Hreflang | Way too long — Google will truncate it and likely rewrite it |
| Good | Meta Tags Complete Guide: title, description, OGP & robots | WebTools | Primary keyword first, subtopics summarized, brand name at the end, under 65 characters |
| Good | Apartments for Rent in Austin, TX | AcmeRentals | Location + service type matches user intent, brand at the end |
<!-- Title tag example -->
<title>Meta Tags Complete Guide: title, description, OGP & robots | WebTools</title>Use our SERP preview tool to see exactly how your title and description will appear in Google before you publish.
How to Write Meta Descriptions
The meta description is the short paragraph that appears below the title in search results. It's not a direct ranking factor, but it has a significant impact on click-through rate (CTR) — which means it indirectly affects your search performance.
Recommended Length
- 150–160 characters for desktop, around 120 characters for mobile
- Descriptions that are too short leave unused space that could convert users
- Descriptions that are too long get cut off — make sure the most compelling part comes first
- If you don't write one, Google may auto-generate a snippet from your page content
Tips for Higher CTR
- Include your target keyword naturally — Google bolds keywords matching the search query
- Clearly state what the user will get or learn by clicking ("Learn how to...", "Get a free template...")
- Use numbers and specifics to signal value ("5 best practices", "under 10 minutes")
- Write a unique description for every page — duplicate descriptions are ignored or overridden by Google
- Treat it like ad copy: the goal is to earn the click
<!-- Meta description example -->
<meta name="description" content="Everything you need to know about HTML meta tags — title, meta description, Open Graph, robots, canonical, and hreflang. Includes copy-ready templates and SEO best practices.">Check your character count in real time with the SERP preview tool.
Open Graph (OGP) Tags
Open Graph Protocol (OGP) was created by Facebook to control how pages appear when shared on social media. Today, Twitter (X), LinkedIn, Slack, iMessage, and many other platforms also read OGP tags to generate link previews.
The Four Essential Tags
og:title— The title shown in the social card (can match the title tag)og:description— Card description (can match the meta description)og:image— The preview image URL (must be an absolute URL)og:url— The canonical URL of the page
Recommended Image Dimensions
- 1200×630px (1.91:1 aspect ratio) is the most widely supported size
- Minimum: 600×315px — smaller images render as a tiny thumbnail instead of a large card
- Keep file size under 8MB; smaller files load faster in previews
- Use HTTPS URLs — HTTP images may not render on Facebook and some other platforms
- For Twitter "summary_large_image" cards, the image should be at least 300×157px with a 2:1 aspect ratio
<!-- Open Graph basic set -->
<meta property="og:type" content="article">
<meta property="og:title" content="Meta Tags Complete Guide: title, description, OGP & robots">
<meta property="og:description" content="Everything you need to know about HTML meta tags, with templates and best practices.">
<meta property="og:image" content="https://example.com/images/meta-tag-guide-ogp.jpg">
<meta property="og:url" content="https://example.com/en/blog/meta-tag-guide">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:locale" content="en_US">
<!-- Twitter Card (X) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Meta Tags Complete Guide: title, description, OGP & robots">
<meta name="twitter:description" content="Everything you need to know about HTML meta tags, with templates and best practices.">
<meta name="twitter:image" content="https://example.com/images/meta-tag-guide-ogp.jpg">Verify your OGP setup instantly with our OGP checker — just enter any URL to see what social platforms will display.
The robots Meta Tag
The robots meta tag instructs search engines on whether to index a page and whether to follow its links. Think of it as page-level crawl control — compared to robots.txt which works at the URL path level.
Common Directives
| Directive | Meaning |
|---|---|
index | Allow the page to appear in search results (default behavior) |
noindex | Exclude this page from search results |
follow | Allow crawlers to follow links on this page (default behavior) |
nofollow | Do not follow links; no PageRank is passed through them |
noarchive | Prevent Google from showing a cached version |
nosnippet | Do not show a text snippet in search results |
<!-- Standard page — allow indexing (same as default) -->
<meta name="robots" content="index, follow">
<!-- Keep the page crawlable but hide it from search results -->
<meta name="robots" content="noindex, follow">
<!-- Block completely: admin pages, thank-you pages, etc. -->
<meta name="robots" content="noindex, nofollow">Robots vs. Canonical: What's the Difference?
The canonical tag (<link rel="canonical" href="...">) tells Google which URL is the "master" version of a page. It's used to consolidate duplicate URLs — such as HTTP vs. HTTPS, with and without trailing slashes, or filtered/sorted product pages.
<!-- Canonical tag example -->
<link rel="canonical" href="https://example.com/en/blog/meta-tag-guide">Rule of thumb: Use noindex when you want to remove a page from search results entirely. Use canonical when you want to consolidate ranking signals from multiple URLs into one. Avoid combining them on the same page — a noindex page doesn't need a canonical, and a canonicalized page should be indexable.
hreflang Tags
The hreflang tag is used on multilingual and multi-regional websites to tell Google which language and country variant of a page to show to which user. Without it, Google may show the wrong language version in search results — or worse, treat the variants as duplicate content.
How to Write hreflang
- Language codes follow the IETF BCP 47 format (e.g.,
en,en-US,ja,zh-TW) - Every language variant must cross-reference all other variants — the relationship must be bidirectional
- Include an
x-defaulttag for users who don't match any specific language or region - Always use absolute URLs
<!-- hreflang example — place these on every language variant of the page -->
<link rel="alternate" hreflang="en" href="https://example.com/en/blog/meta-tag-guide">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/blog/meta-tag-guide">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/blog/meta-tag-guide">The most common mistakes with hreflang are missing the reciprocal links (e.g., the English page references the Japanese page but the Japanese page doesn't reference the English page) and forgetting x-default. After implementing, verify your setup in Google Search Console under the "International Targeting" report.
Frequently Asked Questions
- Should my title tag and h1 tag say the same thing?
- They don't have to be identical, but they should be closely related. The title tag is written for search results and should be concise and keyword-focused. The h1 is the on-page headline for human readers and can be slightly more descriptive. If the two are completely different, Google may decide to rewrite your title tag using the h1 or other page content instead.
- What happens if I don't write a meta description?
- Google will automatically generate a snippet from your page content based on the search query. Auto-generated snippets are often less compelling than a hand-crafted description, which typically means a lower click-through rate. For important pages — especially landing pages, product pages, and key blog posts — always write a custom description.
- Do I need both og:title and the regular title tag?
- Technically, if you have a title tag, social platforms may fall back to it when og:title is absent. However, it's best practice to set og:title explicitly because you might want a slightly different headline for social sharing — for example, more attention-grabbing or better suited to the conversational context of social feeds. The same applies to og:description vs. meta description.
- How quickly does Google remove a noindex page from search results?
- Google enforces noindex the next time it crawls the page, which can take anywhere from a few days to a few weeks depending on your crawl frequency. If you need the page removed urgently, use the URL Removal tool in Google Search Console to temporarily suppress it while waiting for the next crawl to make the removal permanent.
- Can I implement hreflang in a sitemap instead of in each page's HTML?
- Yes. hreflang can be declared in three places: the HTML head, HTTP response headers, or the XML sitemap. For large sites with hundreds or thousands of pages, managing hreflang in a sitemap is far more efficient than editing every individual page. Just make sure your sitemap is submitted to Google Search Console and that the sitemap itself follows the same cross-referencing rules as the HTML approach.
Summary
Meta tags won't fix poor content, but they're essential for making sure search engines and social platforms understand and display your pages correctly. Here's a quick recap of what we covered:
- Title tag: Lead with your primary keyword, keep it under 60 characters, add your brand name at the end
- Meta description: 150–160 characters, communicate the user's benefit clearly, treat it like ad copy
- OGP: Set og:title, og:description, og:image (1200×630px), and og:url on every shareable page
- Robots: Use noindex to exclude pages from search; use canonical to consolidate duplicate URLs — don't mix them
- Hreflang: Cross-reference all language variants and include x-default for every page on a multilingual site
Once you've set your meta tags, use these free tools to verify your work:
- Meta Tag Generator — Generate title, description, OGP, and Twitter Card tags from a simple form
- OGP Checker — Enter any URL to instantly inspect its OGP tags and social card preview
- SERP Preview — Simulate how your page will appear in Google search results before publishing