Meta

Metadata found in the <head> of an HTML page is a form of SEO that allows Rich previews

<!DOCTYPE html>
<html lang="en">        
The  language of the page should be specified here


Must be in en or en-US format 
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>       
 Standard meta tags 


<meta charset/> Set the   character encoding to the universal UTF-8

<meta name="viewport"/> Scales the page properly on  mobile


    <!-- Text meta tags -->
    <title>Stephcraft's Website</title>
    <meta name="description" content="..."/>       
 Primary meta tags

<title> The  Title of the page


Shown in  Tabs ·  Search results
The title is truncated after a 60 characters limit

Good titles are 3+ words long and descriptive

Page titles should be unique within the  website, avoid duplicate titles



<meta name="description"/> The  Description of the page


Shown in  Search results
Derived from the  page content by default

The description is truncated after a 160 characters limit on  Desktop

The description is truncated after a 120 characters limit on  Mobile




    <!-- Color meta tags -->
    <meta name="color-scheme" content="dark light"/>
    <meta name="theme-color" content="#4286f4">       
 Color meta tags

<meta name="color-scheme"/>  Light and  Dark mode support and preference


A list of supported modes light dark separated by spaces
The  order determines the prefered mode


<meta name="theme-color"/> The  Theme color associated with the page


Shown in  Rich previews on  Discord
A theme color can be associated per mode with  media




    <!-- Open Graph meta tags -->
    <meta property="og:site_name" content="Stephcraft"/>
    <meta property="og:title" content="Home Page"/>
    <meta property="og:description" content="..."/>
    <meta property="og:url" content="https://stephcraft.net"/>
    <meta property="og:image" content="https://stephcraft.net/cover.png"/>                      
 Open Graph meta tags shown in  Rich previews

og:site_name The  Name of the  website
— Must be identical across all  pages
og:title The  Title of the url
— Recommended limit is 60 characters

og:description The  Description of the url
— Recommended limit is 200 characters

og:url The canonical  url
— Same as <link rel="canonical"/>
og:image An  image url
— Recommended size is 1200 × 630


 Open Graph 
Optional Open Graph properties — 29 collapsed lines
    <meta property="og:determiner" content="the"/>                             
The word prefix that appears before the title:

a an the
"" default
auto dynamic
    <meta property="og:locale" content="en_US"/>
    <meta property="og:locale:alternate" content="fr_FR"/>
    <meta property="og:locale:alternate" content="es_ES"/>
    ...      
The  languages supported

og:locale The locale the  Open Graph meta tags are marked up in
og:locale:alternate Other locales available for this page

Defaults to en_US
    <meta property="og:video" content="https://stephcraft.net/trailer.mp4"/>
    <meta property="og:audio" content="https://stephcraft.net/theme.mp3"/>                      
Additional  Media

og:video A  video url
og:audio An  audio url

    <!-- Optional Image properties -->
    <meta property="og:image" content="https://stephcraft.net/cover.png"/>
    <meta property="og:image:secure_url" content="https://stephcraft.net/cover.png"/>
    <meta property="og:image:type" content="image/png"/>
    <meta property="og:image:width" content="1200"/>
    <meta property="og:image:height" content="630"/>
    <meta property="og:image:alt" content="A cup containing blue liquid"/>

    <!-- Optional Video properties -->
    <meta property="og:video" content="https://stephcraft.net/trailer.mp4"/>
    <meta property="og:video:secure_url" content="https://stephcraft.net/trailer.mp4"/>
    <meta property="og:video:type" content="video/mp4"/>
    <meta property="og:video:width" content="1200"/>
    <meta property="og:video:height" content="630"/>

    <!-- Optional Audio properties -->
    <meta property="og:audio" content="https://stephcraft.net/theme.mp3"/>
    <meta property="og:audio:secure_url" content="https://stephcraft.net/theme.mp3"/>
    <meta property="og:audio:type" content="audio/mpeg"/>

    <meta property="og:type" content="article"/>                          
Can be one of:

 website default
 article
 profile
 book
 payment.link
 music.song music.album music.playlist music.radio_station
 video.movie video.episode video.tv_show video.other

 Open Graph — Types 
Limited support

Technical meta tags — 4 collapsed lines
    <!-- Technical meta tags --> 
    <meta name="robots" content="all">
    <meta name="rating" content="adult">
    <meta name="generator" content="..."/>        
 Technical meta tags

<meta name="robots"/> List of  crawler permissions separated by spaces
  ·
 

index noindex allow or deny page  indexing
follow nofollow allow or deny  crawling links on this page
all none shortcut for both page  indexing and link  crawling permissions
nosnippet Do not show a  text snippet or  video preview in search results
noimageindex Deny  image  indexing on this page
notranslate Don't offer  Google Translate  translation of this page in search results
max-snippet:# Character limit for  text snippets in search results
max-video-preview:# Duration limit (in seconds) for  video snippets in search results
max-image-preview:# One of none standard large for  image previews in search results
unavailable_after:#  Date after which the page is hidden from search results
Equivalent to X-Robots-Tag HTTP Header 
Alternatively, use  robots.txt


<meta name="rating"/> Whether the page is available with  SafeSearch

<meta name="generator"/> The  framework used for the  frontend


Equivalent to X-Powered-By HTTP Header for the  backend

Equivalent to Server HTTP Header for the  host

See market shares for values
 CMSs 
 SSGs 


Deprecated meta tags — 4 collapsed lines
    <!-- Deprecated meta tags --> 
    <meta name="title" content="..."/>
    <meta name="author" content="..."/>
    <meta name="keywords" content="..."/>        
Deprecated meta tags

<meta name="title"/> Redundant with <title>

<meta name="author"/> Use <link rel="author"/> instead

<meta name="keywords"/> Ignored by major search engines


    <!-- Link tags -->
    <link rel="icon" href="favicon.svg"/>
    <link rel="canonical" href="https://stephcraft.net"/>
    <link rel="alternate" hreflang="fr" href="/fr/home"/>
    <link rel="alternate" hreflang="es" href="/es/home"/>
    ...      
 Link tags

<link rel="icon"/>
The  icon of the page


Shown in  Tabs ·  Search results
Must be square



<link rel="canonical"/> The preferred  url for the page


Uniquely identifies  urls against:

 Case sensitivity
 Fragments
 Search params
 Redirects
 Subdomain duplication
 Trailing slashes
 File names
 Protocols




<link rel="alternate"/>  Translated page variants


 hreflang Must be in en or en-US format 
Alternatively, use the  Localization Sitemap Extension



Equivalent to Link HTTP Header 
Deprecated link tags — 2 collapsed lines
    <!-- Deprecated link tags --> 
    <link rel="sitemap" href="/sitemap.xml"/>                    
Specify  Sitemaps in  robots.txt instead

    <!-- Schema Markup -->
    <script type='application/ld+json'>...</script>                                  
JSON-LD  Schema Markup can be defined here
</head>
<body>...</body>
</html>

Tools

Open Graph Link Previews
Open Graph Generator
Facebook Link Preview

Resources

MDN Web Docs — Meta
MDN Web Docs — Meta properties
Google Search Central — Meta tags
MDN Web Docs — Link

Frameworks

Astro Docs — Metadata
Next.js Docs — Metadata
TanStack Start Docs — Metadata