DevAcademy
LearnHTMLMeta Tags & SEO
AdvancedHTML

Meta Tags & SEO

Learn how meta tags describe your page to browsers, search engines, and social media platforms.

Reading Time

16 min

Lesson

Lesson 24 of 27

What Are Meta Tags?

Meta tags are <meta> elements placed in the <head> that provide metadata about the page — information used by browsers, search engines, and social platforms, but never shown directly on the page.

Essential Meta Tags

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Learn HTML, CSS, and JavaScript with free tutorials." />
Output

Common name Values

namePurpose
descriptionA short summary shown in search engine results
keywordsHistorically used for SEO; largely ignored by modern search engines
authorThe page or content author
robotsControls whether search engines index/follow the page (e.g. "noindex, nofollow")
theme-colorSets the browser UI color on supporting mobile browsers

Social Media Previews with Open Graph

Open Graph meta tags (prefixed og:) control how a link looks when shared on platforms like Facebook, LinkedIn, and Slack — the preview title, description, and image.

Open Graph Tags

<meta property="og:title" content="DevAcademy — Learn to Code" />
<meta property="og:description" content="Free tutorials for HTML, CSS, and JavaScript." />
<meta property="og:image" content="https://devacademy.com/preview.png" />
<meta property="og:url" content="https://devacademy.com" />
Output

Twitter Cards

Twitter/X uses its own set of meta tags (prefixed twitter:) for link previews, though it also falls back to Open Graph tags if Twitter-specific ones aren’t present.

Twitter Card Tags

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="DevAcademy" />
<meta name="twitter:image" content="https://devacademy.com/preview.png" />
Output

Controlling Search Engine Indexing

The robots meta tag can prevent a page from being indexed or having its links followed — useful for staging environments or duplicate content.

robots Meta Tag

<meta name="robots" content="noindex, nofollow" />
Output

Best Practice

Give every page a unique, descriptive title and meta description, and include Open Graph tags so shared links look polished across social platforms.

Interview Questions

Quick Quiz

1. Where are meta tags placed?

2. What do Open Graph meta tags control?

3. What does <meta name="robots" content="noindex" /> do?