Detailed explanation
Meta tags provide metadata about an HTML document rather than visible page content. They belong inside the <head> element and help browsers, search engines, and social platforms interpret the page. A meta element is a void element, so it has no closing tag. Most metadata uses name and content attributes, while character encoding uses charset and Open Graph metadata commonly uses property and content. In interviews, explain each tag’s purpose instead of simply listing names, and distinguish browser behaviour from search and sharing behaviour.
The encoding declaration, <meta charset="UTF-8">, tells the browser how to decode the document’s bytes into characters. UTF-8 supports English, Indian scripts, and many other characters. Place this declaration early in <head>, entirely within the first 1,024 bytes of the document. Incorrect encoding can produce unreadable text. The viewport declaration, <meta name="viewport" content="width=device-width, initial-scale=1.0">, tells mobile browsers to use the device width in CSS pixels and start at normal zoom. Without it, a mobile browser may use a wider virtual layout viewport and shrink the page. This tag supports responsive design but does not replace flexible layouts or media queries.
A description tag, such as <meta name="description" content="Learn web development">, supplies a page summary that search engines may use in search-result snippets. They can choose different text, and the description is not a direct Google ranking factor. The keywords meta tag is largely obsolete for modern SEO; Google does not use it for ranking. A robots tag can provide crawler directives such as noindex, which requests that supporting search engines exclude the page from search results. It is not a security mechanism.
Open Graph tags describe how shared links should appear on supporting platforms. Common examples include og:title, og:description, og:image, and og:url, written as <meta property="og:title" content="My Page">. Platforms may cache or adapt these previews, so the tags guide rather than guarantee presentation. Also recognise that <title> is important document metadata but is a separate HTML element, not a meta tag. A strong beginner answer prioritises charset, viewport, description, robots, and social-sharing metadata while avoiding outdated SEO claims.
Key points to remember
- Place meta tags in <head>; they describe the document rather than render visible content.
- Use charset="UTF-8" early to declare character encoding.
- Use the viewport tag for mobile layout sizing and initial scaling.
- Description can influence search snippets; keywords does not help Google rankings.
- Robots provides indexing directives, while Open Graph supplies social-preview metadata.
Common mistakes candidates make
- Claiming that keywords improves Google rankings or that description directly increases ranking.
- Assuming the viewport tag alone makes a page responsive, or disabling user zoom.
- Calling <title> a meta tag or treating noindex as protection for private content.
Likely follow-up questions
Does the viewport tag replace CSS media queries?
No; it establishes the mobile viewport used for layout. Flexible sizing, responsive images, and media queries still determine how the content adapts.
What is the difference between a meta description and og:description?
A meta description supplies a summary that search engines may use in search snippets. og:description supplies a summary for link previews on platforms that support Open Graph.
How do you request that search engines avoid indexing a page?
Use <meta name="robots" content="noindex"> for supporting search engines. Crawlers must be able to access the page to read the directive, and sensitive pages still require authentication or other access controls.
Interview tip: Group the tags by purpose—encoding, mobile layout, search, and social sharing—and give one short example for each.