HTML Head Meta Tags SEO, OG, Viewport

The <head> Element

The HTML head configures document identity and discovery through title, charset, viewport, canonical URLs, robots policy, social previews, and linked resources.

The <head> element is a container for metadata - information about the document that is not displayed on the page. It sits between <html> and <body>.

The <head> can contain: <title>, <meta>, <link>, <style>, <script>, and <base>.

Even though head content is not directly visible in the page body, it plays a huge role in how the page behaves. Search engines, browsers, social platforms, and devices all read information from the head section.

Essential Head Tags

A good head section usually includes character encoding, viewport settings, a page title, useful meta tags, linked resources, and sometimes social sharing metadata. These tags help the page render correctly and appear properly in search and previews.

Complete Head Section

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Character encoding -->
    <meta charset="UTF-8">

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

    <!-- Page title (shown in browser tab) -->
    <title>My Website | Home</title>

    <!-- SEO meta tags -->
    <meta name="description" content="A short description of this page (150-160 chars).">
    <meta name="keywords" content="html, tutorial, web development">
    <meta name="author" content="John Doe">

    <!-- Prevent caching -->
    <meta http-equiv="Cache-Control" content="no-cache">

    <!-- Link external CSS -->
    <link rel="stylesheet" href="styles.css">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="favicon.png">

    <!-- Open Graph (social media sharing) -->
    <meta property="og:title" content="My Website">
    <meta property="og:description" content="Page description for social sharing.">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:url" content="https://example.com">
</head>
<body>
    <!-- Page content here -->
</body>
</html>

Meta Tags Reference

Meta tags provide machine-readable information about the document. Some help with SEO, some control browser behavior, and others improve mobile rendering or social sharing.

Tag	Purpose
<meta charset="UTF-8">	Sets character encoding - always include this first
<meta name="viewport">	Controls layout on mobile devices - essential for responsive design
<meta name="description">	Page summary shown in search engine results
<meta name="robots">	Controls search engine indexing (index, noindex, nofollow)
<meta http-equiv="refresh">	Auto-redirects after N seconds
<link rel="canonical">	Tells search engines the preferred URL for this page
<link rel="stylesheet">	Links an external CSS file
<link rel="icon">	Sets the browser tab favicon
<base href="...">	Sets the base URL for all relative links on the page

Title and Description for SEO

The <title> tag is one of the most important elements in the head section. It appears in the browser tab and is often used by search engines as the main title in search results. The description meta tag gives search engines a short summary of the page.

A strong title should clearly describe the page, while the description should summarize the content naturally and encourage clicks. Every important page should have its own unique title and description.

SEO basics

<title>HTML Head and Meta Tags Tutorial | Tutorials Logic</title>
<meta
    name="description"
    content="Learn how to use the head element, meta tags, title, viewport, canonical links, and social sharing tags in HTML.">

Open Graph and Social Sharing

When a page link is shared on platforms like Facebook, LinkedIn, or messaging apps, those platforms often use Open Graph tags to generate the preview card. These tags help define the shared title, description, image, and URL.

Open Graph

<meta property="og:title" content="HTML Head & Meta Tags">
<meta property="og:description" content="Learn how to use the head section correctly.">
<meta property="og:image" content="https://example.com/preview.jpg">
<meta property="og:url" content="https://example.com/head-and-meta-tags">

Canonical and Base Tags

The canonical tag tells search engines which URL should be treated as the preferred version of a page. This is useful when similar content may be reachable from different URLs. The <base> tag sets a base URL for relative links, but it should be used carefully because it affects all relative paths on the page.

Canonical and base

<link rel="canonical" href="https://example.com/tutorials/head-and-meta-tags">
<base href="https://example.com/assets/">

Linking CSS and JavaScript

The head section often includes CSS links and sometimes JavaScript. CSS files are typically loaded in the head so the page can render styles immediately. JavaScript is often placed near the end of the body for performance, although modern scripts can also use attributes like defer when loaded from the head.

Linking Resources

<head>
    <!-- External CSS (in <head>) -->
    <link rel="stylesheet" href="css/styles.css">

    <!-- Inline CSS -->
    <style>
        body { font-family: Arial, sans-serif; }
        h1   { color: #333; }
    </style>
</head>
<body>
    <h1>Hello</h1>

    <!-- External JS (before </body> for performance) -->
    <script src="js/app.js"></script>

    <!-- Inline JS -->
    <script>
        console.log('Page loaded!');
    </script>
</body>

Best Practices

Always include <meta charset="UTF-8"> near the top of the head.
Add the viewport meta tag so pages render properly on mobile devices.
Write unique page titles and descriptions for each important page.
Use canonical tags when duplicate or similar URLs may exist.
Keep the head section organized and avoid unnecessary or outdated meta tags.