On this page

Meta tags, head, and basic SEO with HTML

12 min read TextCh. 5 — Practice and SEO

The head element

The <head> is the section of the page that contains metadata: information about the page that is not displayed visually but is crucial for browsers, search engines, and social networks.

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Metadata goes here -->
</head>
<body>
  <!-- Visible content goes here -->
</body>
</html>

Essential meta tags

charset (character encoding)

This must be the first tag inside the <head>. It defines the character encoding of the document:

<meta charset="UTF-8">

UTF-8 supports virtually all characters from all languages, including accented characters, special letters, and emojis. Always use UTF-8.

viewport

Essential for responsive design. Without this tag, pages appear tiny on mobile devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width — The viewport width equals the device width
  • initial-scale=1.0 — Initial zoom at 100%

title

The <title> element defines the page title that appears in the browser tab and in search results:

<title>Learn HTML from scratch - Free course | Bemore Learn</title>

The title is one of the most important SEO factors. Recommendations:

  • Length: 50-60 characters (Google truncates longer ones)
  • Format: Specific content | Site name
  • Unique: Each page should have its own title
  • Descriptive: It should reflect the actual content of the page

description

The meta description appears below the title in search results:

<meta name="description"
  content="Learn HTML from scratch with 12 practical lessons, code examples,
  and a final project. Free course in English for beginners.">
  • Length: 150-160 characters
  • Must be unique for each page
  • Include a call to action or benefit for the user
  • Google may ignore it and generate its own snippet, but it is still a best practice

Open Graph (social media)

Open Graph meta tags control how your page looks when someone shares it on Facebook, LinkedIn, WhatsApp, or other networks:

<meta property="og:title" content="HTML from Scratch Course">
<meta property="og:description" content="12 practical lessons to learn HTML.">
<meta property="og:image" content="https://yoursite.com/img/og-html.jpg">
<meta property="og:url" content="https://yoursite.com/courses/html">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Bemore Learn">

Recommendations for og:image

  • Recommended size: 1200x630 pixels
  • Minimum size: 600x315 pixels
  • Format: JPG or PNG
  • Maximum file size: 5MB
  • Use an absolute URL (with https://)

Twitter Cards

Similar to Open Graph, but specific to Twitter (X):

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML from Scratch Course">
<meta name="twitter:description" content="12 practical lessons to learn HTML.">
<meta name="twitter:image" content="https://yoursite.com/img/twitter-html.jpg">
<meta name="twitter:site" content="@bemorex">

The values for twitter:card can be:

  • summary — Small card with square image
  • summary_large_image — Large card with rectangular image

Favicon and icons

Favicons are the icons that appear in the browser tab, bookmarks, and home screen:

<!-- Classic favicon (32x32) -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

<!-- SVG favicon (modern, scalable) -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- iOS icon (180x180) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- PWA manifest -->
<link rel="manifest" href="/manifest.json">

Canonical URL

The canonical URL tells search engines which is the "official" version of a page, preventing duplicate content issues:

<link rel="canonical" href="https://yoursite.com/courses/html-from-scratch">

This is useful when the same page is accessible from multiple URLs (with parameters, with/without www, http/https).

Resource preloading

You can instruct the browser to preload critical resources to improve performance:

<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

<!-- Preload critical resources -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/styles/critical.css" as="style">

<!-- Prefetch likely pages -->
<link rel="prefetch" href="/courses/css-fundamentals">
Attribute Function
preconnect Establishes an early connection with an external domain
preload Downloads a critical resource for the current page
prefetch Downloads a resource that will likely be needed soon
dns-prefetch Only resolves the DNS of a domain (lighter than preconnect)

Robots and crawling

You can control how search engines interact with your page:

<!-- Allow indexing and link following (default) -->
<meta name="robots" content="index, follow">

<!-- Do not index this page -->
<meta name="robots" content="noindex">

<!-- Do not follow links on this page -->
<meta name="robots" content="nofollow">

<!-- Do not index or follow -->
<meta name="robots" content="noindex, nofollow">

Common use cases for noindex:

  • Login or registration pages
  • Internal search results pages
  • Thank you or confirmation pages

The lang attribute

The lang attribute on <html> indicates the main language of the page:

<html lang="en">

This is crucial for:

  • Screen readers: They use the correct pronunciation
  • Automatic translators: They know which language to translate from
  • SEO: Google associates the page with searches in that language

If your page has sections in other languages, use lang on those elements:

<html lang="en">
<body>
  <p>This paragraph is in English.</p>
  <blockquote lang="es">
    <p>Esta cita esta en espanol.</p>
  </blockquote>
</body>
</html>

Practice

  1. Set up a complete head: Create the <head> of a page with charset, viewport, title (50-60 characters), meta description (150-160 characters), favicon, and a canonical URL.
  2. Add Open Graph and Twitter Cards: Add Open Graph meta tags (og:title, og:description, og:image, og:url) and Twitter Card meta tags (twitter:card, twitter:title, twitter:image) to your page.
  3. Optimize resource loading: Implement preconnect for an external font domain and preload for a local font file in woff2 format.

In the next and final lesson, we will build a final project applying everything we have learned in the course.

Effective title for SEO
The ideal title is between 50-60 characters and follows the format: 'Primary keyword | Site name'. Each page should have a unique title that reflects its specific content.
Verification tools
Use tools like Google Search Console, Lighthouse (built into Chrome DevTools), and the W3C validator (validator.w3.org) to verify that your meta tags are configured correctly.
html
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Character encoding -->
  <meta charset="UTF-8">
  <!-- Viewport for responsive design -->
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0">

  <!-- Basic SEO -->
  <title>HTML from Scratch Course | Bemore Learn</title>
  <meta name="description"
    content="Learn HTML from scratch with practical lessons.
    Free course with interactive examples and real projects.">

  <!-- Open Graph (social media) -->
  <meta property="og:title" content="HTML from Scratch Course">
  <meta property="og:description"
    content="Learn HTML with practical lessons and projects.">
  <meta property="og:image"
    content="https://example.com/img/html-course-og.jpg">
  <meta property="og:url"
    content="https://example.com/courses/html-from-scratch">
  <meta property="og:type" content="website">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="HTML from Scratch Course">
  <meta name="twitter:description"
    content="Learn HTML with practical lessons and projects.">
  <meta name="twitter:image"
    content="https://example.com/img/html-course-twitter.jpg">

  <!-- Favicon and icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Canonical URL -->
  <link rel="canonical"
    href="https://example.com/courses/html-from-scratch">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="/styles/main.css">

  <!-- Preload critical resources -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preload" href="/fonts/inter.woff2"
    as="font" type="font/woff2" crossorigin>
</head>
<body>
  <!-- Page content -->
</body>
</html>