REPOSITORY OVERVIEW

Live repository statistics

★ 30.3KStars

⑂ 1.9KForks

◯ 0Open issues

◉ 30.3KWatchers

87/100

OPENREPOHUB HEALTH SIGNAL

Strong signals

A transparent discovery signal based on current public GitHub metadata.

Recent activity35% weight

100

Community adoption25% weight

Maintenance state20% weight

100

License clarity10% weight

Project information10% weight

100

This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.

README preview

🤯 HEAD

A simple guide to HTML <head> elements

Recommended Minimum
Elements
Recommended Order
Meta
Link
Scripts
Icons
Social
Browsers / Platforms
Browsers (Chinese)
App Links
Deprecated
Other Resources
Related Projects
Translations

Recommended Minimum

Below are the essential elements for any web document (websites/apps):

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
  The above 2 meta tags should come as early as possible in the <head>
  to consistently ensure proper document rendering.
  Any other head element should come *after* these tags.
-->
<title>Page Title</title>

meta charset - defines the encoding of the website, utf-8 is the standard

meta name="viewport" - viewport settings related to mobile responsiveness

width=device-width - use the physical width of the device (great for mobile!)

initial-scale=1 - the initial zoom, 1 means no zoom

Elements

Valid <head> elements include meta, link, title, style, script, noscript, and base.

These elements provide information for how a document should be perceived, and rendered, by web technologies. e.g. browsers, search engines, bots, etc.

<!--
  Set the character encoding for this document, so that
  all characters within the UTF-8 space (such as emoji)
  are rendered correctly.
-->
<meta charset="utf-8">

<!-- Set the document's title -->
<title>Page Title</title>

<!-- Set the base URL for all relative URLs within the document -->
<base href="https://example.com/page.html">

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

<!-- Used for adding in-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript & No-JavaScript tags -->
<script src="script.js"></script>
<script>
  // function(s) go here
</script>
<noscript>
  <!-- No JS alternative -->
</noscript>

Recommended Order

The following is the recommended order of elements in the <head> for best performance and correct document rendering:

<meta charset> — Character encoding declaration; must appear within the first 1024 bytes of the document
<meta name="viewport"> — Viewport settings; declare early to ensure correct responsive rendering
<title> — Document title; placed after encoding/viewport to prevent potential re-rendering
Other <meta> tags (description, robots, etc.)
Open Graph / Social meta tags
<link rel="canonical"> and other <link> tags (excluding stylesheets and resource hints)
<link rel="preconnect"> / <link rel="dns-prefetch"> — Resource hints; early to maximize their value
<link rel="stylesheet"> — External CSS; stylesheets should come before scripts
<link rel="icon"> — Favicons
<script> — Scripts; use defer or async where possible to avoid blocking rendering

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Page Title</title>

  <meta name="description" content="Page description">
  <!-- other meta tags -->

  <!-- Open Graph / Social meta tags -->
  <meta property="og:title" content="Page Title">
  <!-- other social meta tags -->

  <link rel="canonical" href="https://example.com/page.html">
  <!-- other link tags (excluding stylesheets and resource hints) -->

  <link rel="preconnect" href="https://example.com">
  <link rel="dns-prefetch" href="https://example.com">

  <link rel="stylesheet" href="styles.css">

  <link rel="icon" href="favicon.ico">

  <script defer src="script.js"></script>
</head>

Meta

<!--
  The following 2 meta tags should come as early as possible in the <head>
  to consistently ensure proper document rendering.
  Any other head element should come *after* these tags.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--
  Allows control over where resources are loaded from.
  Place as early in the <head> as possible, as the tag
  only applies to resources that are declared after it.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

<!-- Name of web application (only should be used if the website is used as an app) -->
<meta name="application-name" content="Application Name">

<!-- Theme Color for Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">

<!-- Indicates the supported color schemes for the page (light, dark, or both) -->
<meta name="color-scheme" content="light dark">

<!-- Short description of the document (limit to 150 characters) -->
<!-- This content *may* be used as a part of search engine results. -->
<meta name="description" content="A description of the page">

<!-- Control the behavior of search engine crawling and indexing -->
<meta name="robots" content="index,follow"><!-- All Search Engines -->
<meta name="googlebot" content="index,follow"><!-- Google Specific -->

<!-- Tells Google not to show the sitelinks search box -->
<meta name="google" content="nositelinkssearchbox">

<!-- Tells Google not to provide a translation for this document -->
<meta name="google" content="notranslate">

<!-- Verify website ownership -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Yandex Webmasters -->
<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->

<!-- Identify the software used to build the document (i.e. - WordPress, Dreamweaver) -->
<meta name="generator" content="program">

<!-- Short description of your document's subject -->
<meta name="subject" content="your document's subject">

<!-- Gives a general age rating based on the document's content -->
<meta name="rating" content="General">

<!-- Allows control over how referrer information is passed -->
<meta name="referrer" content="no-referrer">

<!-- Disable automatic detection and formatting of possible phone numbers -->
<meta name="format-detection" content="telephone=no">

<!-- Geo tags -->
<meta name="ICBM" content="latitude, longitude"><!-- Geographic coordinates (latitude, longitude) in decimal degrees; eg. content="48.8566, 2.3522" -->
<meta name="geo.position" content="latitude;longitude"><!-- Geographic coordinates; latitude and longitude are separated by a semicolon -->
<meta name="geo.region" content="country[-state]"><!-- Country code (ISO 3166-1): mandatory, state code (ISO 3166-2): optional; eg. content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- eg. content="New York City" -->

<!-- Web Monetization https://webmonetization.org/docs/getting-started -->
<meta name="monetization" content="$paymentpointer.example">

Note: Geo tags are not used by browsers directly — they are intended for search engines, web crawlers, and location-based services to understand the geographic relevance of a page's content. ICBM (named after the military ICBM address convention) and geo.position both express coordinates in decimal degrees; ICBM uses a comma separator while geo.position uses a semicolon. geo.region identifies the country (and optionally the state/region) using ISO codes, and geo.placename provides a human-readable place name.

Link

<!-- Points to an external stylesheet -->
<link rel="stylesheet" href="https://example.com/styles.css">

<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="https://example.com/article/?page=2">

<!-- Links to a Web App Manifest — the recommended way to define PWA metadata such as app name, icons, theme_color, and display mode -->
<link rel="manifest" href="manifest.json">

<!-- Links to information about the author(s) of the document -->
<link rel="author" href="humans.txt">

<!-- Refers to a copyright statement that applies to the link's context -->
<link rel="license" href="copyright.html">

<!-- Gives a reference to a location in your document that may be in another language -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- Provides information about an author or another person
     Used for RelMeAuth, a distributed form of identity verification.
     See https://microformats.org/wiki/RelMeAuth to learn more -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">

<!-- Provides a self reference - useful when the document has multiple possible references -->
<link rel="self" type="application/atom+xml" href="https://example.com/atom.xml">

<!-- The previous, and next documents in a series of documents, respectively -->
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="next" href="https://example.com/article/?page=3">

<!-- Notifies a URL when you link to it on your document
     More information at https://webmention.net -->
<link rel="webmention" href="https://example.com/webmention">

<!-- Enables posting to your own domain using a Micropub client 
     More information at https://indieweb.org/Micropub -->
<link rel="micropub" href="https://example.com/micropub">

<!-- Enables you to use your site with IndieAuth, an identity solution that
     lets you authenticate with your domain name.
     Read more at https://indieauth.net. -->
<link rel="token_endpoint" href="https://example.com/token">
<link rel="authorization_endpoint" href="https://example.com/auth">

<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">

<!-- Feeds -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Prefetching, preloading, prebrowsing -->
<!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://ww

HEAD

Live repository statistics

Strong signals

README preview

🤯 HEAD

Table of Contents

Recommended Minimum

Elements

Recommended Order

Meta

Link