Last active
February 4, 2024 19:17
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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