TechLead
ContactAbout

Meta Tags & SEO

Metadata, Open Graph, and search engine optimization

What are Meta Tags?

Meta tags are HTML elements in the <head> that provide information about your page to browsers, search engines, and social media platforms. They don't appear on the page itself but control how your page is displayed in search results and shared on social media.

Essential Meta Tags

Character Encoding & Viewport

These two are required on every page:

<head>
  <!-- Tells browser which character set to use -->
  <meta charset="UTF-8" />
  
  <!-- Makes page responsive on mobile -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

Title (Most Important for SEO!)

Appears in search results, browser tabs, and social shares:

Learn JavaScript - Free Tutorials | TechLead
https://techlead.com › learn-js
Master JavaScript with our comprehensive tutorials...
<title>Learn JavaScript - Free Tutorials | TechLead</title>

✓ 50-60 characters
✓ Include main keyword
✓ Include brand name
✓ Unique for each page

Description

Shown in search results—this is your sales pitch!

<meta name="description" content="Master JavaScript with our 
  comprehensive tutorials covering basics to advanced concepts. 
  Interactive examples, exercises, and projects included." />

✓ 150-160 characters
✓ Include main keywords naturally
✓ Make it compelling—convince users to click!
✓ Unique for each page

Keywords (Optional, Less Important Now)

<meta name="keywords" content="javascript, js, tutorial, 
  learn javascript, web development" />

⚠️ Most search engines ignore this now. Focus on title and description instead.

Author & Theme Color

<meta name="author" content="TechLead Team" />
<meta name="theme-color" content="#3b82f6" />

theme-color changes mobile browser UI color to match your brand.

Open Graph (Social Media Sharing)

Control how your page looks when shared on Facebook, LinkedIn, Slack, Discord, etc.

PREVIEW: How this appears on Facebook/LinkedIn

🖼️ og:image (1200×630px)
techlead.com
Learn JavaScript - Free Tutorials
Master JavaScript with comprehensive tutorials covering basics to advanced concepts...
<!-- Basic Open Graph tags -->
<meta property="og:title" content="Learn JavaScript - Free Tutorials" />
<meta property="og:description" content="Master JavaScript with 
  comprehensive tutorials covering basics to advanced concepts." />
<meta property="og:image" content="https://techlead.com/og-image.jpg" />
<meta property="og:url" content="https://techlead.com/learn-js" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="TechLead" />

<!-- Image dimensions (recommended for best display) -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="JavaScript tutorial thumbnail" />
🎨 Open Graph Image Tips:
  • • Recommended size: 1200×630px (Facebook, LinkedIn)
  • • Min size: 600×315px
  • • Format: JPG or PNG (under 8MB)
  • • Include text overlay—image might be cropped!

Twitter Cards

Special tags for Twitter (now X). Twitter also reads Open Graph if Twitter tags are missing.

PREVIEW: Twitter/X card

🖼️ twitter:image
techlead.com
Learn JavaScript - Free Tutorials
Master JavaScript with comprehensive tutorials...
<!-- Twitter card type -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@techlead" />
<meta name="twitter:title" content="Learn JavaScript - Free Tutorials" />
<meta name="twitter:description" content="Master JavaScript..." />
<meta name="twitter:image" content="https://techlead.com/twitter-image.jpg" />
Card Types:
  • summary - Small image
  • summary_large_image - Large image (most common)
  • app - Mobile app
  • player - Video/audio player
Image Sizes:
  • summary: 120×120px (min)
  • large_image: 300×157px (min)
  • Recommended: 800×418px

Robots & SEO Control

Tell search engines how to index your page:

✓ Allow Indexing (default)

<meta name="robots" 
  content="index, follow" />

index = show in search results
follow = crawl links on page

❌ Prevent Indexing

<meta name="robots" 
  content="noindex, nofollow" />

Good for: admin pages, staging sites, duplicate content

Other Robot Options:

<!-- Prevent caching snapshots -->
<meta name="robots" content="noarchive" />

<!-- Don't show text snippets in search -->
<meta name="robots" content="nosnippet" />

<!-- Don't follow image links -->
<meta name="robots" content="noimageindex" />

Canonical URL (Prevent Duplicate Content)

Tell search engines which version of a page is the "main" one:

Problem: Same content at multiple URLs hurts SEO

https://example.com/blog/my-post
https://example.com/blog/my-post?utm_source=twitter
https://example.com/blog/my-post?page=1
https://www.example.com/blog/my-post
<!-- Solution: Tell search engines the canonical (main) URL -->
<link rel="canonical" href="https://example.com/blog/my-post" />

Favicons & App Icons

Icons for browser tabs, bookmarks, and home screens:

T
← Favicon appears in browser tabs and bookmarks 
<!-- Standard favicon (all browsers) -->
<link rel="icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- Apple touch icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- Web app manifest (PWA, Android) -->
<link rel="manifest" href="/site.webmanifest" />

<!-- Theme color for mobile browsers -->
<meta name="theme-color" content="#3b82f6" />
📐 Icon Sizes:
  • • favicon.ico: 16×16, 32×32, 48×48 (multi-size ICO file)
  • • favicon-32x32.png: Standard desktop
  • • favicon-16x16.png: Retina desktop
  • • apple-touch-icon.png: 180×180 (iOS)
  • • android-chrome-192x192.png: 192×192 (Android)
  • • android-chrome-512x512.png: 512×512 (Android splash)

Complete <head> Example

<head>
  <!-- Essential -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <!-- SEO -->
  <title>Learn JavaScript - Free Tutorials | TechLead</title>
  <meta name="description" content="Master JavaScript with our 
    comprehensive tutorials covering basics to advanced concepts. 
    Interactive examples included." />
  <meta name="author" content="TechLead Team" />
  
  <!-- Canonical URL -->
  <link rel="canonical" href="https://techlead.com/learn-js" />
  
  <!-- Open Graph (Facebook, LinkedIn, etc.) -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Learn JavaScript - Free Tutorials" />
  <meta property="og:description" content="Master JavaScript with our 
    comprehensive tutorials covering basics to advanced concepts." />
  <meta property="og:image" content="https://techlead.com/og-image.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:url" content="https://techlead.com/learn-js" />
  <meta property="og:site_name" content="TechLead" />
  
  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@techlead" />
  
  <!-- Favicons -->
  <link rel="icon" href="/favicon.ico" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
  <meta name="theme-color" content="#3b82f6" />
  
  <!-- Stylesheets -->
  <link rel="stylesheet" href="/styles.css" />
</head>

⚠️ Common Mistakes

  • ❌ Same title/description on every page: Make them unique!
  • ❌ Title too long: Keep under 60 characters (gets cut off in search)
  • ❌ Description too short: Use 150-160 characters—make it compelling!
  • ❌ Missing og:image: Social shares look unprofessional without images
  • ❌ Wrong og:image size: Use 1200×630px to avoid cropping
  • ❌ No canonical URL: Can cause duplicate content penalties
  • ❌ Missing viewport meta: Page won't be mobile-responsive

✓ SEO Best Practices

  • ✓ Unique titles & descriptions: Every page needs different ones
  • ✓ Include keywords naturally: Don't stuff, write for humans
  • ✓ Use semantic HTML: Proper headings (h1-h6), semantic elements
  • ✓ Optimize images: Compress, use alt text, use modern formats (WebP)
  • ✓ Fast page load: Speed is a ranking factor (under 3 seconds)
  • ✓ Mobile-friendly: Google uses mobile-first indexing
  • ✓ HTTPS: Required for good SEO ranking
  • ✓ Internal linking: Link related pages together
  • ✓ Use schema markup: Structured data (JSON-LD) for rich snippets
  • ✓ Regular content updates: Fresh content ranks better

🛠️ Testing Tools

Learn More

  • Google Search Console: Monitor indexing, search performance
  • Facebook Sharing Debugger: Test Open Graph tags
  • Twitter Card Validator: Test Twitter card rendering
  • Lighthouse (Chrome DevTools): SEO audit, performance
  • PageSpeed Insights: Check page speed (mobile & desktop)
  • Schema Markup Validator: Test structured data