HTML Meta Tags

Learn how to use meta tags to improve SEO, accessibility, and social media integration.

What are HTML Meta Tags?

Meta tags provide metadata about your HTML document. They are placed inside the <head> section and help browsers, search engines, and social media understand your page.

Real-Life Example: Like a label on a book that tells you the title, author, and genre, meta tags give information about your webpage.

Common Meta Tags

  • <meta charset="UTF-8"> – Defines the character encoding
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> – Responsive design for mobile devices
  • <meta name="description" content="..."/> – Page description for SEO
  • <meta name="keywords" content="..."/> – Keywords for search engines
  • <meta name="author" content="..."/> – Author of the webpage
  • <meta http-equiv="X-UA-Compatible" content="IE=edge"> – Browser compatibility

Examples of Meta Tags

Example: Basic Meta Tags


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn HTML Meta Tags to improve SEO and web performance.">
    <meta name="keywords" content="HTML, Meta Tags, SEO, Web Development">
    <meta name="author" content="CrackEase">
    <title>HTML Meta Tags | CrackEase</title>
</head>
<body>
    <h1>Welcome to Meta Tags Tutorial</h1>
</body>
</html>

Social Media Meta Tags

Use Open Graph (Facebook) and Twitter Card meta tags to improve how your page looks when shared.

Example: Open Graph & Twitter Cards


<meta property="og:title" content="HTML Meta Tags Tutorial" />
<meta property="og:description" content="Learn how to use HTML Meta Tags for SEO and social sharing." />
<meta property="og:image" content="https://crackease.com/images/meta-image.png" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="HTML Meta Tags Tutorial" />
<meta name="twitter:description" content="Learn how to use HTML Meta Tags for SEO and social sharing." />
<meta name="twitter:image" content="https://crackease.com/images/meta-image.png" />

Best Practices for Meta Tags

  • Always include charset and viewport meta tags
  • Write unique and descriptive description for each page
  • Use relevant keywords, but avoid keyword stuffing
  • Include social media meta tags for better sharing
  • Keep meta information up-to-date as content changes

Pro Tip: Proper meta tags improve SEO, user experience, and social media visibility.