Meta Tags & SEO

Advanced ~12 min read

What are Meta Tags?

Meta tags provide metadata about your HTML document. They don't appear on the page but are read by browsers and search engines.

Essential Meta Tags

HTML

CSS

<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>Page Title - Site Name</title>\n  <meta name="description" content="A brief description of your page (150-160 chars)">\n  <meta name="keywords" content="keyword1, keyword2, keyword3">\n  <meta name="author" content="Your Name">\n</head>

Key Meta Tags Explained:

charset - Character encoding (always use UTF-8)
viewport - Essential for responsive design on mobile
description - Shows in search results (keep under 160 chars)
keywords - Less important now, but still used by some engines

Social Media Meta Tags

Open Graph and Twitter Cards control how your pages appear when shared:

HTML

CSS

<head>\n  <!-- Open Graph for Facebook, LinkedIn -->\n  <meta property="og:title" content="Your Page Title">\n  <meta property="og:description" content="Description for social sharing">\n  <meta property="og:image" content="https://example.com/image.jpg">\n  <meta property="og:url" content="https://example.com/page">\n  <meta property="og:type" content="website">\n  \n  <!-- Twitter Card -->\n  <meta name="twitter:card" content="summary_large_image">\n  <meta name="twitter:title" content="Your Page Title">\n  <meta name="twitter:description" content="Description for Twitter">\n</head>

Image Tip: Use images at least 1200x630px for best display on social media.

SEO & Robots

Control how search engines index your pages:

HTML

CSS

<head>\n  <!-- Allow indexing (default) -->\n  <meta name="robots" content="index, follow">\n  \n  <!-- Prevent indexing -->\n  <meta name="robots" content="noindex, nofollow">\n  \n  <!-- Canonical URL (prevents duplicate content) -->\n  <link rel="canonical" href="https://example.com/preferred-url">\n</head>

SEO Best Practices

Use unique, descriptive titles (50-60 characters)
Write compelling meta descriptions
Use semantic HTML elements
Include alt text on all images
Use proper heading hierarchy (h1 → h2 → h3)
Make your site mobile-friendly
Use HTTPS for security

Quick Quiz

What is the recommended maximum length for a meta description?

50 characters

160 characters

500 characters

No limit

Previous HTML Entities

Next Accessibility

What are Meta Tags?

Essential Meta Tags

Key Meta Tags Explained:

Social Media Meta Tags

SEO & Robots

SEO Best Practices

Quick Quiz

Enjoying these tutorials?