Metadata and SEO: Keys to Web Positioning

Learn how to use "invisible" HTML tags to tell search engines and social media exactly what your page is about.

🔍

Welcome! Let's see how search engines like Google read your webpage to understand its content.

/* Analyzing page... */

What is Metadata?

Metadata is "data about data." In HTML, it's information placed in the <head> section that isn't visible on the page itself. Search engines and browsers use it to understand, categorize, and display your page correctly. Think of it as the label on a book cover.

The Mighty <title> Tag

The <title> tag is arguably the most crucial piece of metadata for SEO. It defines the text that appears in the browser tab and, more importantly, as the main clickable headline in search engine results. A good title is descriptive and concise.

Essential <meta> Tags for SEO

Beyond the title, two key <meta> tags are vital. The meta description provides a brief summary of the page for search results, encouraging clicks. The meta keywords (though less important today) can list relevant terms for your content.

The Viewport: A Mobile Must-Have

The viewport meta tag is essential for responsive design. It tells the browser how to control the page's dimensions and scaling on different devices, ensuring your site looks great on both desktops and mobile phones. Without it, mobile users might see a tiny, unreadable version of your desktop site.

Practice Zone

Interactive Test 1: Match the Meta Tag

Drag each <meta> tag to its correct description.

Arrastra en el orden correspondiente.

Arrastra las opciones:

Completa el código:

Sets the page summary for Google.______

Controls how the site looks on mobile.______

Defines the character set for the page.______

Unlock with Premium

Interactive Test 2: Complete the Content

Complete the content attributes for these important meta tags.

Rellena los huecos en cada casilla.

<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">

Unlock with Premium

Practice Example: Build a SEO-Ready Head

Write a complete HTML <head> section. It must include a UTF-8 charset, a title, a description, and a viewport meta tag.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A well-optimized HTML page.">
    <title>My SEO-Friendly Page</title>
</head>

Unlock with Premium

Knowledge Check

Which meta tag is crucial for ensuring a website displays correctly on mobile devices?

Unlock with Premium

Beyond Google: Metadata for Social Media

Metadata isn't just for search engines. Special protocols like Open Graph and Twitter Cards let you control how your content appears when shared on social platforms.

1. The Open Graph Protocol (Facebook, LinkedIn, etc.)

Created by Facebook, Open Graph (OG) tags allow you to define a rich preview for your link, including a specific title, image, and description. This is crucial for making your shared links attractive and clickable.

<meta property="og:title" content="My Awesome Article" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://.../image.png" />
<meta property="og:url" content="https://.../my-article" />

2. Twitter Cards

Twitter uses its own set of meta tags, but will fall back to Open Graph tags if they aren't present. Twitter cards allow for different preview styles, like `summary_large_image`, to make your tweets stand out.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Awesome Article">
<meta name="twitter:description" content="A summary...">
<meta name="twitter:image" content="https://.../image.png">

Practical Takeaway: A comprehensive metadata strategy includes tags for both search engines and social media. This ensures a consistent and professional appearance wherever your content is shared.