Tutorial Really Basic SEO Guide (Beginners)

bl4cklak3 · 11-10-2024, 10:38 PM

A simple guide to HTML <head> elements

Recommended Minimum

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

Code:
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--

  The above 2 meta tags *must* come first 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

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.

Code:
<!--

  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>

Meta Tags

Code:
<!--

  The following 2 meta tags *must* come first 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">

<!-- 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="alexaVerifyID" content="verification_token"><!-- Alexa Console -->

<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">

<!-- Completely opt out of DNS prefetching by setting to "off" -->

<meta http-equiv="x-dns-prefetch-control" content="off">

<!-- Specifies the document to appear in a specific frame -->

<meta http-equiv="Window-Target" content="_value">

<!-- Geo tags -->

<meta name="ICBM" content="latitude, longitude">

<meta name="geo.position" content="latitude;longitude">

<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">