Skip to content

Instantly share code, notes, and snippets.

@dletorey
Last active February 4, 2024 19:17
Show Gist options
  • Save dletorey/71cf178a3191e6d921b313771afad658 to your computer and use it in GitHub Desktop.
Save dletorey/71cf178a3191e6d921b313771afad658 to your computer and use it in GitHub Desktop.
This is an example of an HTML <head> element and what goes in there, this has comments explaining what each of the tags are for.
<!-- undocumented version of this is available here - https://gist.github.com/dletorey/c1299b9cc268fe1e4f9ca82b2ee5bc4a -->
<head>
<!-- These are essential and should be in this order -->
<meta charset="utf-8" /><!-- this defined the characterset to be used for the page and must come first so that the browser knows how to interpret the rest of the document -->
<title>Title of the page</title><!-- Title of the current page this is displayed in the browser tab, used for bookmark default name, and used by search engines as the result name -->
<!-- While not 100% essential viewport metadata is highly recommended as it makes the page responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" /><!-- intial-scale sets the zoom on load and user-scalable=1 allows the user to zoom in -->
<!-- Optional but recommened -->
<meta name="author" content="Dave Letorey" /><!-- Who wrote the content of the page -->
<meta name="description" content="The description of the page can improve SEO and understanding of what the page is about" /><!-- This describes what the page is about -->
<!-- Optional metadata -->
<!-- robots -->
<meta name="robots" content="noindex, nofollow" /><!-- This tells search engines not to index this page, this is usually controlled via a robots.txt file -->
<!-- theme-color -->
<meta name="theme-color" content="#ff0000" />
<!-- Social media metadata -->
<!-- Open Graph metadata, used by most socail platforms -->
<!-- twitter metadata -->
<!-- link elements -->
<!-- style tags -->
</head>
<!-- References -->
<!-- https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -->
<!-- https://web.dev/learn/html/document-structure#head -->
<!-- https://web.dev/learn/html/metadata -->
<!-- https://www.robotstxt.org/ -->
<!-- https://en.wikipedia.org/wiki/Robots.txt -->
<!-- https://developers.google.com/search/docs/crawling-indexing/robots/robots_txt -->
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color -->
<!-- https://ogp.me/ -->
<!-- https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup -->
<!-- https://en.wikipedia.org/wiki/Dublin_Core -->
<!-- https://developer.mozilla.org/en-US/docs/Web/Manifest -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment