Hack Frontend Community

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

<meta charset="UTF-8" />
  • Mandatory tag — sets document encoding.
  • Without it there may be character display problems.

Responsive Layout (viewport)

<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

<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

<meta name="author" content="Hack Frontend" />
<meta http-equiv="Content-Language" content="en" />

Open Graph (OG) — for Social Media

<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

<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.