HTML Meta Tags

Basic Meta Tags

The description meta tag tells search engines what your page is about. It appears as the snippet under your page title in Google search results. Keeping the description under about 160 characters avoids it being cut off in search results.

Note: Keep meta descriptions between 150-160 characters for best display in search results.

Warning: Duplicate meta descriptions across pages confuse search engines and hurt rankings.

Example: Basic Meta Tags

<meta name="description" content="Learn HTML basics with simple examples.">

Open Graph Meta Tags

Open Graph tags control how your page looks when shared on Facebook, LinkedIn, or WhatsApp. Without them platforms guess what to show and often get it wrong. Testing your Open Graph tags with a link debugger before publishing avoids an embarrassing broken preview card.

Note: Always include og:image — posts with images get significantly more engagement.

Warning: og:image must be an absolute URL with https — relative paths do not work.

Example: Open Graph Meta Tags

<meta property="og:title" content="My Page">
<meta property="og:image" content="https://example.com/preview.jpg">

Viewport Meta Tag

The viewport meta tag controls how a page scales on mobile devices -- without it, phones render the page at a fixed desktop width and then shrink it down, making text and buttons too small to use comfortably.

Example: Viewport Meta Tag

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

Character Encoding Meta Tag

The charset meta tag tells the browser which character encoding to use when decoding the page's text, and UTF-8 is the standard choice since it correctly displays virtually every language's letters and symbols.

Example: Character Encoding Meta Tag

<meta charset="UTF-8">

Author and Keywords Meta Tags

The author meta tag credits who wrote or maintains a page, and while the keywords meta tag was once used by early search engines, modern engines like Google now ignore it entirely and rely on actual page content instead.

Example: Author and Keywords Meta Tags

<meta name="author" content="Jane Doe">
<meta name="keywords" content="html, tutorial, web">