Essential meta tags in HTML

What are Meta Tags?

Meta tags (<meta>) are tags placed inside <head> that aren't displayed on the page, but provide information about the page to browsers, search engines and social media.

Main Meta Tags

Page Encoding

html

<meta charset="UTF-8" />

Mandatory tag — sets document encoding.
Without it there may be character display problems.

Responsive Layout (viewport)

html

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

Makes page responsive on mobile devices.
Without it site will look "compressed".

SEO Tags

html

<meta name="description" content="Brief page description for search engines" />
<meta name="keywords" content="html, metatags, frontend, seo" />
<meta name="robots" content="index, follow" />

description — brief description for search engines
keywords — keywords (rarely used in modern search engines)
robots — bot behavior: index, noindex, follow, nofollow

Author and Language

html

<meta name="author" content="IT Lead" />
<meta http-equiv="Content-Language" content="en" />

html

<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page Description" />
<meta property="og:image" content="https://site.com/image.png" />
<meta property="og:url" content="https://site.com" />

Used by social media (Facebook, LinkedIn) to display page preview.

Twitter Card

html

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Title" />
<meta name="twitter:description" content="Description" />
<meta name="twitter:image" content="https://site.com/image.png" />

Important:

Don't overuse keywords — modern search engines ignore them. But description and OG tags still play a role in SEO and social media.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems