Published: June 2026•By Web Util Slyce Team•8 min read

Meta Tags Reference — Complete Guide

A complete reference for HTML meta tags used in SEO and social sharing. Generate optimized meta tags with our Meta Tag Generator and generate schema markup with the Schema Generator.

Essential SEO Meta Tags

<title>Page Title</title>

The page title shown in search results and browser tabs. Should be 50-60 characters.

Example:

SEO Meta Tags Guide | Web Util Slyce

<meta name="description" content="...">

Page description shown in search snippets. Should be 150-160 characters.

Example:

A complete guide to HTML meta tags for SEO. Learn how to write title tags, meta descriptions, and Open Graph tags.

<meta name="robots" content="...">

Controls how search engines index and follow links.

Example:

index, follow (or noindex, nofollow)

<link rel="canonical" href="...">

Specifies the preferred URL to prevent duplicate content issues.

Example:

https://example.com/page/

Open Graph Tags (Facebook, LinkedIn)

<meta property="og:title" content="...">

Title for social sharing previews (50-60 chars).

Example:

Meta Tags Reference — Complete Guide

<meta property="og:description" content="...">

Description for social sharing previews.

Example:

Complete meta tags reference for SEO and social media.

<meta property="og:image" content="...">

Image URL for social sharing previews (1200×630px recommended).

Example:

https://example.com/og-image.jpg

<meta property="og:url" content="...">

The canonical URL of the page being shared.

Example:

https://example.com/meta-tags

<meta property="og:type" content="...">

The type of content (website, article, product, etc.).

Example:

website

<meta property="og:locale" content="...">

The locale of the content.

Example:

en_US

Twitter Card Tags

<meta name="twitter:card" content="...">

Twitter card type (summary, summary_large_image, etc.).

Example:

summary_large_image

<meta name="twitter:site" content="...">

Twitter username of the site (e.g., @webutilslyce).

Example:

@webutilslyce

<meta name="twitter:title" content="...">

Title for Twitter card (similar to og:title).

Example:

Meta Tags Reference Guide

<meta name="twitter:description" content="...">

Description for Twitter card.

Example:

Complete guide to HTML meta tags.

<meta name="twitter:image" content="...">

Image URL for Twitter card.

Example:

https://example.com/twitter-card.jpg

Technical Meta Tags

<meta charset="UTF-8">

Character encoding declaration. Should be the first meta tag.

Example:

UTF-8

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

Controls layout on mobile devices. Essential for responsive design.

Example:

width=device-width, initial-scale=1

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Instructs IE to use the latest rendering engine.

Example:

IE=edge

<meta name="theme-color" content="...">

Browser UI theme color for mobile browsers.

Example:

#ffffff

<link rel="icon" href="...">

Favicon (browser tab icon).

Example:

/favicon.ico

Complete Meta Tags Template

Use this template as a starting point for your HTML pages:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title (50-60 chars)</title>
  <meta name="description" content="Page description (150-160 chars)">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://example.com/page">
  <link rel="icon" href="/favicon.ico">

  <!-- Open Graph -->
  <meta property="og:title" content="Social Share Title">
  <meta property="og:description" content="Social share description">
  <meta property="og:image" content="https://example.com/og.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:type" content="website">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@yourhandle">
</head>
<body>
  <!-- Page content -->
</body>
</html>

Character Limits for Search Engines

Tag	Desktop Limit	Mobile Limit	Best Practice
Title Tag	60 chars (600px)	50 chars (400px)	Keep under 55 characters
Meta Description	160 chars (920px)	120 chars (680px)	Keep under 155 characters
OG Title	95 chars	40-60 chars	Match your title tag
OG Description	200 chars	150 chars	2-3 sentences

Meta Tag Generator →Schema Generator →Robots.txt Tester →

Sitemap Generator Heading Analyzer