Meta Tags for SEO: Title Tags, Descriptions, and Open Graph

Meta tags are invisible to your visitors but visible to Google, social media platforms, and browsers. They're the first impression your page makes — before anyone even clicks.

Get them right and you get more clicks from search results, better-looking social shares, and clearer signals to search engines. Get them wrong and you're leaving traffic on the table.

Title Tags: The Most Important Meta Tag

The title tag is the blue clickable text in Google's search results. It's also what shows up in browser tabs. It's the single most important on-page SEO element.

Here's what a title tag looks like in HTML:

<title>Best Running Shoes for Flat Feet (2025) | RunnerHub</title>

Title tag rules

Keep it under 60 characters — Google truncates longer titles with "..." which looks sloppy and cuts off your message. Actually measure characters, don't guess.
Put your keyword first — "Running Shoes for Flat Feet" ranks better at the start than buried after your brand name.
Make each title unique — If your homepage and about page have the same title, one of them is wrong.
Write for humans, not robots — "Running Shoes Flat Feet Buy Online Best Price" reads like spam. "Best Running Shoes for Flat Feet (2025 Guide)" reads like a result worth clicking.
Include your brand name — Usually at the end, separated by a pipe or dash. "Page Title | BrandName"

Common title tag mistakes

"Home" or "Welcome" — Your homepage title should describe what your site does, not just say "Home."
Keyword stuffing — "SEO Tools | Best SEO Tools | Free SEO Tools | SEO Audit Tools" — Google knows what you're doing.
Missing entirely — Some pages literally have no title tag. Chrome shows the URL instead. It looks terrible.

Meta Descriptions: Your Search Ad Copy

The meta description appears below the title in search results. Google doesn't use it as a ranking factor, but it directly impacts whether people click your result or skip to the next one.

<meta name="description" content="Compare the top 10 running shoes for flat feet. Real reviews, actual testing data, and prices updated for 2025.">

Meta description best practices

155 characters max — Mobile cuts off even shorter (around 120). Front-load the important stuff.
Include your target keyword — Google bolds matching keywords in search results, making your listing more eye-catching.
Be specific — "We offer great products and services" tells nobody anything. "Free SEO audit with 50+ checks, AI-powered fix suggestions, and PDF export" tells them exactly what they get.
Include a call to action — "Try it free" or "See the results" — give people a reason to click.
Make each one unique — Duplicate meta descriptions across pages are almost worse than none at all.

Important: Google sometimes ignores your meta description and generates its own snippet from your page content. This happens when Google thinks its version better matches the search query. You should still write them — Google uses yours more often than not.

Open Graph Tags: Control Your Social Shares

Open Graph (OG) tags control how your pages look when shared on Facebook, LinkedIn, Discord, Slack, and most other platforms. Without them, platforms pull random text and images from your page. Usually the wrong ones.

<meta property="og:title" content="Best Running Shoes for Flat Feet (2025)">
<meta property="og:description" content="Real reviews and testing data for the top 10 picks.">
<meta property="og:image" content="https://runnerhub.com/images/running-shoes-og.jpg">
<meta property="og:url" content="https://runnerhub.com/running-shoes-flat-feet">
<meta property="og:type" content="article">

Essential OG tags

og:title — Can differ from your title tag. Social titles can be more casual or attention-grabbing.
og:description — Keep it short. 2-3 sentences max. People scroll fast on social media.
og:image — This is the big one. A good image dramatically increases click-through rates. Use 1200x630 pixels for best results across platforms.
og:url — The canonical URL of the page.
og:type — Usually "website" for your homepage and "article" for blog posts.

OG image tips

The OG image makes or breaks social sharing. Tips:

1200x630px is the standard size
Keep text minimal — it needs to be readable at thumbnail size
Use high contrast colors
Include your logo or brand colors for recognition
Don't put important content near the edges — platforms crop differently

Twitter Card Tags

Twitter (X) has its own meta tags, similar to OG tags. If Twitter card tags aren't present, Twitter falls back to OG tags — so you can often skip them. But for maximum control:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Best Running Shoes for Flat Feet">
<meta name="twitter:description" content="Real reviews and testing data.">
<meta name="twitter:image" content="https://runnerhub.com/images/shoes-twitter.jpg">

Use summary_large_image for the card type — it shows a large image preview that gets way more engagement than the small summary card.

Other Important Meta Tags

Viewport tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Required for mobile responsiveness. Without it, mobile browsers render your page at desktop width and zoom out. Every modern site needs this.

Robots meta tag

<meta name="robots" content="index, follow">
<!-- or -->
<meta name="robots" content="noindex, nofollow">

Controls whether search engines index the page and follow its links. Use noindex for pages you don't want in search results (thank you pages, internal dashboards, staging sites).

Canonical tag

<link rel="canonical" href="https://yoursite.com/page">

Technically a link element, not a meta tag, but it serves a similar purpose. Points to the preferred version of a page. Essential for avoiding duplicate content issues.

How to Check Your Meta Tags

Quick ways to audit your meta tags:

View source — Right-click any page, "View Page Source," and search for <title> and <meta
Browser extensions — SEO Meta in 1 Click (Chrome extension) shows all meta tags instantly
AuditMySite — Our scanner checks all meta tags across your site and flags missing, duplicate, or too-long tags
Facebook Sharing Debugger — developers.facebook.com/tools/debug — shows exactly how your OG tags render
Twitter Card Validator — cards-dev.twitter.com/validator — preview your Twitter cards

A Quick Meta Tag Template

Here's a starter template you can use for any page:

<title>[Keyword] - [Benefit] | [Brand]</title>
<meta name="description" content="[What the page offers]. [Specific detail]. [Call to action].">
<meta property="og:title" content="[Slightly different, more social-friendly title]">
<meta property="og:description" content="[2-3 sentence hook for social shares]">
<meta property="og:image" content="[1200x630 image URL]">
<meta property="og:url" content="[Canonical URL]">
<meta property="og:type" content="[website or article]">
<meta name="twitter:card" content="summary_large_image">
<link rel="canonical" href="[Canonical URL]">

Fill in the brackets for each page. Takes two minutes per page and makes a real difference in how your site appears across search engines and social platforms.