Syllabus

HTML Page Title & Meta Tags (SEO Essentials)

Badar KhalilUpdated September 27, 2026 2 min read

HTML Page Title & Meta Tags (SEO Essentials)

The <title> element and meta tags live inside your <head> and, while invisible on the page itself, are among the most powerful on-page SEO tools available — directly controlling how your page appears in Google search results and social media shares.

The <title> Tag

The <title> element sets the text shown in the browser tab and, most importantly, as the clickable headline in search engine results pages (SERPs):

Code

<title>Best HTML Tutorial for Beginners 2026 | LearnCode</title>

Best practices: Keep titles between 50–60 characters, include your primary keyword near the front, and make every page's title unique.

Meta Description

The meta description is the short summary text shown below your title in search results. While it's not a direct ranking factor, a compelling description significantly improves click-through rate (CTR):

Code

<meta name="description" content="Learn HTML from scratch with our beginner-friendly tutorial covering tags, elements, forms, and modern HTML5 best practices.">

Keep meta descriptions between 150–160 characters so they don't get cut off in search results.

The Viewport Meta Tag (Recap)

Code

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

Character Encoding Meta Tag

Code

<meta charset="UTF-8">

Open Graph (OG) tags control how your page looks when shared on Facebook, LinkedIn, and other platforms — an essential, often-overlooked part of modern content marketing and SEO:

Code

<meta property="og:title" content="Best HTML Tutorial for Beginners 2026">
<meta property="og:description" content="Learn HTML step by step with real code examples.">
<meta property="og:image" content="https://example.com/share-image.jpg">
<meta property="og:url" content="https://example.com/html-tutorial">

Twitter Card Meta Tags

Code

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Best HTML Tutorial for Beginners 2026">
<meta name="twitter:description" content="Learn HTML step by step with real code examples.">

Robots Meta Tag

Controls whether search engines index a page and follow its links:

Code

<meta name="robots" content="index, follow">

Key Takeaways

The <title> tag is one of the strongest on-page SEO signals — keep it unique and under ~60 characters.
The meta description improves click-through rate from search results.
Open Graph and Twitter Card tags control social media share previews.
Always include charset, viewport, and a robots tag for full SEO coverage.

Try it Yourself HTML

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Complete Guide to HTML Meta Tags | DevAcademy</title>
  <meta name='description' content='Learn everything about HTML meta tags including SEO essentials, Open Graph, and Twitter Cards.'>
  <meta name='robots' content='index, follow'>
</head>

Output

Press Run to execute.

Try it Yourself HTML

<!-- Open Graph and Twitter Card tags for social sharing -->
<meta property='og:title' content='10 HTML Tips Every Developer Should Know'>
<meta property='og:description' content='Boost your HTML skills with these essential tips.'>
<meta property='og:image' content='https://example.com/og-image.jpg'>
<meta name='twitter:card' content='summary_large_image'>

Output

Press Run to execute.

Exercise: Build a Complete SEO Head SectionHTML

Write a full head section for a blog post titled 'Top 5 CSS Grid Tips' including charset, viewport, title, meta description, and one Open Graph tag for og:title.

Try it Yourself HTML

<head>
  <!-- Build the complete SEO head section here -->
</head>

Output

Press Run to execute.

This is a self-check — compare your result with the expected output above.

Was this page helpful?