Welcome to the Head project, a comprehensive guide to HTML <head> tags.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Page's Title</title>
</head>
<body>
<!-- Content -->
</body>Specifies the character encoding for the HTML document. "utf-8" is the standard encoding that supports a wide range of characters.
<meta charset="utf-8">Configures the viewport properties to control how a webpage is displayed on different devices.
<meta name="viewport" content="width=device-width">Defines the document’s title that is shown in a browser’s title bar or a page’s tab.
<title>Page's Title</title>The author meta tag specifies the author of the web page.
<meta name="author" content="Author's Name"><meta name="description" content="A concise description of the page">The color-scheme meta tag sets the preferred color scheme for the page.
<meta name="color-scheme" content="light dark">The theme-color meta tag defines the color of the browser’s UI elements when the page is active.
<meta name="theme-color" content="#f1c2d3">The referrer meta tag specifies the referrer policy for the page.
<meta name="referrer" content="no-referrer">The content-security-policy meta tag specifies the content security policy for the page.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">The refresh meta tag automatically refreshes the page after a specified time interval.
<meta http-equiv="refresh" content="5">The rel="stylesheet" link tag links an external stylesheet to the document for styling purposes.
<link rel="stylesheet" href="styles.css">The rel="canonical" link tag specifies the canonical URL for the document to avoid duplicate content issues.
<link rel="canonical" href="https://example.com/">The rel="alternate" link tag provides alternate versions of the current document in different languages.
<link rel="alternate" hreflang="es" href="alternate-language.html">The rel="manifest" link tag specifies the location of the web app’s manifest file.
<link rel="manifest" href="app.webmanifest">The rel="alternate" link tag can also be used to specify an RSS feed for the document.
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="rss-feed.xml">Learn more: MDN rel="alternate"
Icon-related link tags can be used to specify various icons for the document.
-
Favicon:
<link rel="icon" href="favicon.ico">
-
Apple Touch Icon:
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Load stylesheets conditionally based on media queries.
<link rel="stylesheet" media="(max-width: 600px)" href="mobile.css">
<link rel="stylesheet" media="(min-width: 601px)" href="desktop.css">Preload resources for improved performance.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="image.webp" as="image">Prefetch resources for upcoming navigations.
<link rel="prefetch" href="next-page.html">Facebook Open Graph tags customize content appearance when shared on social media platforms like Facebook, while Twitter Card tags enhance previews on Twitter.
The type of the content, e.g., "website" or "article".
<meta property="og:type" content="article">The URL of the shared content.
<meta property="og:url" content="https://example.com/page">The title of the shared content.
<meta property="og:title" content="Page Title">The description of the shared content.
<meta property="og:description" content="Description of the content">An image to display when the content is shared.
<meta property="og:image" content="image.jpg">The name of the site or app.
<meta property="og:site_name" content="Site Name">The locale for the content.
<meta property="og:locale" content="en_US">The type of Twitter card to use.
<meta name="twitter:card" content="summary">The Twitter handle of the site's creator.
<meta name="twitter:site" content="@username">The Twitter handle of the content creator.
<meta name="twitter:creator" content="@author">When implementing social media tags, it's important to note that Twitter Card tags (e.g.,
twitter:title,twitter:description, etc.) are often unnecessary when equivalent Open Graph tags (e.g.,og:title,og:description, etc.) are present. Twitter will automatically use Open Graph tags as a fallback when generating previews on its platform. Therefore, you can simplify your implementation by focusing on the Open Graph tags and omitting their Twitter Card counterparts. Twitter Card Fallback Behavior
Learn more: The Open Graph Protocol, Facebook Open Graph, Twitter Card Markup
Defines internal styles for the document.
<style>
/* Your styles here */
</style>Includes external or inline JavaScript.
<script src="script.js"></script>Displays content when JavaScript is disabled.
<noscript>
<p>Please enable JavaScript to view this site.</p>
</noscript>