<
zhead
>

Early Access

HTML Tag Collections

PWA

Tags used to create and configure a Progressive Web App.

Get Started

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="manifest" href="/manifest.json">
<meta name="application-name" content="MyApp">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="MyApp">
<meta name="msapplication-TileColor" content="#0078D7">
<meta name="msapplication-TileImage" content="/path/to/square-image-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#0000FF">

Explanation

viewport

name

Defines how a website is displayed on mobile devices, influencing its width, scale, and initial zoom level. It is essential for creating responsive designs that adapt to various screen sizes.

manifest

rel

The manifest link tag is used to link a web application to a JSON manifest file. This file contains metadata about the web app such as its name, icons, and start URL. It is a key component in creating a Progressive Web App (PWA) that can be installed on a user’s device.

<link rel="manifest" href="/manifest.json">
Correctly links to the manifest file located at the root of the website.

theme-color

name

Specifies the color that the browser UI should display. Primarily used on mobile browsers to customize the status bar and navigation bar colors.

<meta name="theme-color" content="#0000FF">
Sets the theme color of the browser UI to blue, which could be ideal for a website with a blue branding theme.

application-name

name

Defines the name of the web application as it should be displayed when bookmarked or added to a mobile home screen.

<meta name="application-name" content="MyApp">
Simple, concise, and clearly displays the application's purpose or brand.

apple-mobile-web-app-capable

name

Specifies whether a web application runs in full-screen mode when added to the homescreen of an Apple device.

<meta name="apple-mobile-web-app-capable" content="yes">
Enables full-screen mode when the web app is added to the homescreen, providing a more app-like experience.

apple-mobile-web-app-status-bar-style

name

Specifies the style of the status bar for a web application when added to the homescreen of an iOS device. This meta tag influences the appearance of the status bar to either match the web app design or maintain the default iOS style.

<meta name="apple-mobile-web-app-status-bar-style" content="default">
Sets the status bar to the default iOS style, providing a consistent look with other applications on the device.

apple-mobile-web-app-title

name

Provides a custom title for a web application when added to the home screen on Apple iOS devices. This title appears below the app icon, offering more control over branding and user interface.

<meta name="apple-mobile-web-app-title" content="MyApp">
Specifying a concise and descriptive name such as "MyApp" ensures the title is readable at a glance and is easily recognizable by users.

msapplication-TileColor

name

Defines the background color for the Windows 8 and Windows 10 Start screen tile when the website is pinned. This color appears as the tile background, enhancing brand consistency and user recognition on Windows platforms.

<meta name="msapplication-TileColor" content="#0078D7">
Specifies a vibrant, brand-consistent blue, ensuring good visibility and recognition on the Start screen.

msapplication-TileImage

name

Specifies the image to be used when the website is pinned to the Windows Start menu as a Live Tile. This tag is part of Microsoft's compatibility meta tags for enhancing user experience on Windows devices.

<meta name="msapplication-TileImage" content="/path/to/square-image-144x144.png">
An example path to a square PNG image of the recommended size, ensuring good display on the Windows Start menu.

msapplication-config

name

Specifies the path to the Microsoft application configuration file for a web page, enabling customization of certain features for browsers and devices that support Microsoft configurations, such as pinned sites in Windows.

<meta name="msapplication-config" content="/browserconfig.xml">
Specifies the "msapplication-config" meta tag with a direct path to the browserconfig.xml file located at the root.

theme-color

name

Specifies the color that the browser UI should display. Primarily used on mobile browsers to customize the status bar and navigation bar colors.

<meta name="theme-color" content="#0000FF">
Sets the theme color of the browser UI to blue, which could be ideal for a website with a blue branding theme.

HTML Tag Collections

Ready to use <head> code samples to get started, and finished quickly.

Essentials

Tags required for a website to function correctly. They are the bare minimum required to make a website work and be accessible to all users.

SEO Starter

Tags vital for improving web page visibility in search engine results as they provide valuable information to both users and search engines.

Social Share

Tags used to enhance the URL previews when sharing your site on social media platforms.

Icons & Colors

Specify icons and colors to give your website a stronger identity. Allow users to save your pages offline and see nicer icons.

PWA

Tags used to create and configure a Progressive Web App.

Article

Tags to improve the visibility of your articles in search engine results.