HTML Meta Tags

The <meta> tag provides metadata about an HTML document. Metadata is not displayed, but used by browsers, search engines, and other services.

1) Character Encoding


<meta charset="UTF-8">

Always use UTF-8 for modern multilingual support.

2) Viewport (Responsive Design)


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

Ensures mobile browsers scale content correctly.

3) SEO: Description & Keywords


<meta name="description" 
      content="Learn HTML meta tags with Codingwithsonu.">
<meta name="keywords" 
      content="HTML, meta tags, SEO, codingwithsonu">

Note: Search engines mostly use description. The keywords tag is rarely used today.

4) Author & Robots


<meta name="author" content="Sonu Kumar Pandit">
<meta name="robots" content="index, follow">

robots controls search engine indexing (noindex, nofollow).

5) Redirect / Refresh


<meta http-equiv="refresh" content="5; url=page2.html">

This redirects after 5 seconds (not recommended for SEO).

6) Open Graph (Facebook, LinkedIn)


<meta property="og:title" content="Codingwithsonu Tutorials">
<meta property="og:description" content="Learn programming step by step.">
<meta property="og:image" content="https://codingwithsonu.com/logo.png">
<meta property="og:url" content="https://codingwithsonu.com">

Controls how your page looks when shared on social networks.

7) Twitter Cards


<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Codingwithsonu">
<meta name="twitter:description" content="Best HTML tutorials">
<meta name="twitter:image" content="https://codingwithsonu.com/logo.png">

Improves how your content appears on Twitter.

Best Practices:

  • Always include <meta charset="UTF-8"> at the top.
  • Use a descriptive title and meta description for SEO.
  • Use viewport for mobile-friendly design.
  • Use Open Graph and Twitter tags for social sharing.
  • Avoid overusing keywords; focus on high-quality content.