Freshwater Fishing: A Beginner’s Guide

# zhead Canonical Origin: https://zhead.dev/ ## LLM Resources - [Full Content](https://zhead.dev/llms-full.txt): Complete page content in markdown format. --- - **Page:** zhead: HTML <head> Reference · zhead - **Source:** https://zhead.dev/ - **Description:** A practical reference for HTML metadata, link relations, Open Graph fields, and selected vendor tags, with examples and source documentation. 120 documented entries # A practical reference for HTML \ metadata. Browse HTML metadata, link relations, Open Graph fields, and selected vendor tags. Check the syntax, copy an example, then read the source. [Browse Collections ](https://zhead.dev/collection/seo) [ Source](https://github.com/harlan-zw/zhead) alternate apple-touch-icon apple-touch-startup-image author canonical dns-prefetch expect help icon license manifest me modulepreload next pingback preconnect prefetch preload prev privacy-policy search stylesheet terms-of-service mask-icon apple-itunes-app apple-mobile-web-app-capable apple-mobile-web-app-status-bar-style apple-mobile-web-app-title application-name author color-scheme creator description format-detection generator google google-site-verification googlebot googlebot-news keywords mobile-web-app-capable msapplication-config msapplication-TileColor msapplication-TileImage publisher rating referrer robots theme-color twitter:app:id:ipad twitter:app:id:iphone twitter:app:id:googleplay twitter:app:name:ipad twitter:app:name:googleplay twitter:app:name:iphone twitter:app:url:googleplay twitter:app:url:ipad twitter:app:url:iphone twitter:card twitter:creator twitter:creator:id twitter:data1 twitter:data2 twitter:description twitter:image twitter:image:alt twitter:image:height twitter:image:type twitter:image:width twitter:label1 twitter:label2 twitter:player twitter:player:height twitter:player:stream twitter:player:width twitter:site twitter:site:id twitter:title viewport article:author article:expiration\_time article:modified\_time article:published\_time article:section article:tag book:author book:isbn book:release\_date book:tag fb:app\_id og:audio og:audio:secure\_url og:audio:type og:audio:url og:description og:determiner og:image og:image:alt og:image:height og:image:secure\_url og:image:type og:image:url og:image:width og:locale og:locale:alternate og:site\_name og:title og:type og:url og:video og:video:alt og:video:height og:video:secure\_url og:video:type og:video:url og:video:width profile:first\_name profile:gender profile:last\_name profile:username ## Standards First Entries point to the HTML standard or the platform that defines them. Legacy fields are labelled plainly. ## Working Examples Copy a snippet, then adapt it to your page. Notes focus on mistakes that change browser or crawler behaviour. ## HTML & Unhead Build a complete head block from a collection, in HTML or Unhead's useHead format. ## Collections Curated sets of head tags for common use cases. [

Essentials

](https://zhead.dev/collection/essential) [

SEO Starter

](https://zhead.dev/collection/seo) [

Social Preview

](https://zhead.dev/collection/social-share) [

Icons & Colors

](https://zhead.dev/collection/icons) [

PWA

](https://zhead.dev/collection/pwa) [

Article

](https://zhead.dev/collection/article) --- - **Page:** mask-icon · Link relation · zhead - **Source:** https://zhead.dev/link/mask-icon - **Description:** A Safari-specific relation for the monochrome SVG used by pinned tabs. It is registered by IANA but is not a built-in HTML Living Standard link type. Link # mask-icon A Safari-specific relation for the monochrome SVG used by pinned tabs. It is registered by IANA but is not a built-in HTML Living Standard link type. ## Code examples Good example ``` ``` Links Safari to an SVG mask and supplies its display color. Avoid this example ``` ``` Uses a PNG, but Safari's pinned tab mask format is SVG. ## Recommendations - 01 Follow Safari's SVG constraints Use one black layer on a transparent background and set the SVG viewBox to "0 0 16 16". - 02 Set a suitable color The color attribute sets Safari's display color for the mask. Choose a dark enough color to remain visible against the browser interface. - 03 Also provide a standard icon Other browsers use rel="icon". Safari 26 also supports SVG files through the standard icon relation. ## Related documentation - [Apple Developer: PinnedTabs](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html) - [IANA: Link Relations](https://www.iana.org/assignments/link-relations/link-relations.xhtml) --- - **Page:** Essentials HTML Tags · HTML Tag Collections · zhead - **Source:** https://zhead.dev/collection/essential - **Description:** Three declarations worth setting on almost every HTML document: language, UTF-8 encoding, and a responsive viewport. HTML tag collections # Essentials Three declarations worth setting on almost every HTML document: language, UTF-8 encoding, and a responsive viewport. Start here. The language helps assistive technology pronounce the page, UTF-8 keeps text predictable, and the viewport declaration makes responsive layouts match the device width. ## Get started ``` ``` ## Recommendations - 01 Set the document language Put lang on the html element so screen readers can choose the right pronunciation rules. - 02 Declare UTF-8 early Keep the charset declaration within the first 1024 bytes of the document. UTF-8 is the only conforming encoding for new HTML documents. ## Explanation ### lang Declares the document language so browsers and assistive technology can apply the right language rules. ``` ``` Declares English as the document language. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [viewport](https://zhead.dev/meta/viewport) name Controls the layout viewport on mobile browsers, including its width, initial zoom, and how content uses display cutout areas. ``` ``` The usual responsive default: match the device width and start at a 1:1 scale. ## More collections Start with the closest collection, then trim it to match your page. [

SEO Starter

](https://zhead.dev/collection/seo) [

Social Preview

](https://zhead.dev/collection/social-share) [

Icons & Colors

](https://zhead.dev/collection/icons) [

PWA

](https://zhead.dev/collection/pwa) [

Article

](https://zhead.dev/collection/article) --- - **Page:** canonical · Link relation · zhead - **Source:** https://zhead.dev/link/canonical - **Description:** Names the preferred URL for the current document. Search engines can use it to consolidate duplicate URLs and their signals. Link # canonical Names the preferred URL for the current document. Search engines can use it to consolidate duplicate URLs and their signals. ## Code examples Good example ``` ``` Declares one absolute preferred URL for the current page. Avoid this example ``` ``` Has no href, so it does not identify a preferred URL. ## Recommendations - 01 Point to a usable page Use an absolute URL for a canonical page that returns a successful response and is eligible for indexing. Avoid redirects and error pages. - 02 Keep signals consistent Use the same preferred URL in canonicals, internal links, redirects, and sitemaps. Conflicting signals can cause search engines to choose another URL. - 03 Use one canonical Multiple canonical declarations can make the signal ambiguous. Emit one clear URL per page. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-canonical) - [Google Search Central: Consolidate Duplicate Urls](https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls) --- - **Page:** og:image · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-image - **Description:** Provides the URL of an image that represents the Open Graph object. It is one of the four required basic properties. Open Graph metadata # og:image Provides the URL of an image that represents the Open Graph object. It is one of the four required basic properties. ## Code examples Good example ``` ``` An absolute URL to a representative image. Good example ``` ``` A public image hosted on a separate origin is also valid. Avoid this example ``` ``` Use an absolute URL so every consumer resolves the same resource. Avoid this example ``` ``` An empty value does not identify an image. ## Recommendations - 01 Use an Absolute URL Choose a public image URL that consumers can fetch without cookies or authentication. - 02 Add Image Details Put type, width, height, and alt properties immediately after the image they describe. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** apple-touch-icon · Link relation · zhead - **Source:** https://zhead.dev/link/apple-touch-icon - **Description:** Provides an icon that Apple devices can use when someone saves the site to their Home Screen or installs it as a web app. Link # apple-touch-icon Provides an icon that Apple devices can use when someone saves the site to their Home Screen or installs it as a web app. ## Code examples Good example ``` ``` Provides a 180 by 180 pixel icon and declares its actual size. Avoid this example ``` ``` Has no href, so Safari has no icon to fetch. ## Recommendations - 01 Declare the real size Set sizes to the bitmap icon's pixel dimensions. Safari can choose among multiple declared sizes for different contexts. - 02 Keep the link for Safari Safari may use apple-touch-icon when a web app manifest has no suitable high resolution icon. Do not hide the link with user agent detection. ## Related documentation - [webkit.org: Webkit Features In Safari 17 2](https://webkit.org/blog/14787/webkit-features-in-safari-17-2/) - [Apple Developer: ConfiguringWebApplications](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) --- - **Page:** manifest · Link relation · zhead - **Source:** https://zhead.dev/link/manifest - **Description:** Links the page to a web app manifest, a JSON document that describes properties such as the app name, icons, display mode, scope, and start URL. Link # manifest Links the page to a web app manifest, a JSON document that describes properties such as the app name, icons, display mode, scope, and start URL. ## Code examples Good example ``` ``` Links to a same-origin web app manifest. A relative URL is valid here. Avoid this example ``` ``` Has no href, so the browser cannot fetch a manifest. ## Recommendations - 01 Serve valid JSON A syntax error or invalid member can stop some or all of the manifest from being applied. Check the parsed manifest in browser developer tools. - 02 Set scope deliberately Keep start\_url within scope. Otherwise the user agent falls back to the document URL when it processes the manifest. - 03 Use crossorigin for credentials If a cross-origin manifest needs cookies or HTTP authentication, set crossorigin="use-credentials" and configure the server's CORS response. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-manifest) - [W3C: Appmanifest](https://www.w3.org/TR/appmanifest/) --- - **Page:** icon · Link relation · zhead - **Source:** https://zhead.dev/link/icon - **Description:** Provides an icon that browsers can use for the page in tabs, bookmarks, history, and other interface surfaces. Link # icon Provides an icon that browsers can use for the page in tabs, bookmarks, history, and other interface surfaces. ## Code examples Good example ``` ``` Declares a scalable SVG icon with its MIME type. Good example ``` ``` Declares the actual dimensions and type of a PNG icon. Avoid this example ``` ``` Claims a size the linked bitmap does not contain, which can make the browser choose the wrong candidate. ## Recommendations - 01 Describe each candidate When you provide several icons, set sizes, type, or media accurately so the browser can choose the best match. - 02 Use any for scalable icons For SVG, use sizes="any" and type="image/svg+xml". Bitmap size tokens must match dimensions that the file actually contains. - 03 Version changed files Browsers cache site icons aggressively. A new filename is more reliable than replacing an existing file in place. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-icon) --- - **Page:** stylesheet · Link relation · zhead - **Source:** https://zhead.dev/link/stylesheet - **Description:** Fetches a CSS style sheet and applies it to the document. Link # stylesheet Fetches a CSS style sheet and applies it to the document. ## Code examples Good example ``` ``` Loads and applies the site style sheet. Good example ``` ``` Applies this style sheet when the document is printed or previewed for print. Avoid this example ``` ``` Has no href, so there is no style sheet to fetch or apply. ## Recommendations - 01 Use media for conditional styles Set media when a sheet applies only in conditions such as print. The browser can still fetch it, but may give it a different priority. - 02 Link CSS directly A stylesheet link lets the browser discover CSS from HTML. CSS @import rules are found only after the containing sheet has arrived and been parsed. - 03 Avoid preload duplication A stylesheet link already fetches its CSS. If you also preload the file, make sure the URL, destination, and CORS mode match exactly. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet) --- - **Page:** og:title · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-title - **Description:** Provides the title of the Open Graph object. It is one of the four required basic properties. Open Graph metadata # og:title Provides the title of the Open Graph object. It is one of the four required basic properties. ## Code examples Good example ``` ``` Names the topic and intended reader. Good example ``` ``` A specific title for a product release page. Avoid this example ``` ``` An empty value does not provide the required object title. Avoid this example ``` ``` Too vague to identify the page. ## Recommendations - 01 Name the Page Clearly Open Graph does not set a character limit, but consumers may truncate long titles. - 02 Consistency with Page Title The Open Graph title can differ from the HTML title, but both should describe the same page. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** SEO Starter HTML Tags · HTML Tag Collections · zhead - **Source:** https://zhead.dev/collection/seo - **Description:** A small set of page signals for search results, indexing rules, and duplicate URLs. HTML tag collections # SEO Starter A small set of page signals for search results, indexing rules, and duplicate URLs. Give each indexable page a useful title and description. Add robots directives only when you need to change crawler behaviour, and use canonical when several URLs represent the same content. ## Get started ``` About Acme | Acme ``` ## Recommendations - 01 Skip meta keywords Google ignores the keywords meta tag. Other search engines may treat it differently, so check the crawler you care about before relying on it. - 02 Write for the specific page Use a distinct, descriptive title. A useful description may become the search snippet, but search engines can choose other page text. - 03 Check the canonical target Point canonical at the preferred, indexable URL. Search engines treat it as a signal, not a command. ## Explanation ### title Names the document in browser tabs, history, bookmarks, and often search results. The element accepts text only. ``` About Acme | Acme ``` Names the page first, followed by the site. ### [description](https://zhead.dev/meta/description) name Summarizes the page for directories and search engines. Google may use it as a search result snippet when it describes the page better than the visible content does. ``` ``` Specific details tell the reader what the recipe covers. ### [robots](https://zhead.dev/meta/robots) name Sets page-level rules for compliant search crawlers, including whether the page may appear in results and what previews may be shown. It does not block access to the page. ``` ``` Prevents compliant search engines from showing the page in their results. ### [canonical](https://zhead.dev/link/canonical) rel Names the preferred URL for the current document. Search engines can use it to consolidate duplicate URLs and their signals. ``` ``` Declares one absolute preferred URL for the current page. ## More collections Start with the closest collection, then trim it to match your page. [

Essentials

](https://zhead.dev/collection/essential) [

Social Preview

](https://zhead.dev/collection/social-share) [

Icons & Colors

](https://zhead.dev/collection/icons) [

PWA

](https://zhead.dev/collection/pwa) [

Article

](https://zhead.dev/collection/article) --- - **Page:** description · Meta Tag · zhead - **Source:** https://zhead.dev/meta/description - **Description:** Summarizes the page for directories and search engines. Google may use it as a search result snippet when it describes the page better than the visible content does. Meta tags # description Summarizes the page for directories and search engines. Google may use it as a search result snippet when it describes the page better than the visible content does. ## Code examples Good example ``` ``` Specific details tell the reader what the recipe covers. Good example ``` ``` Summarizes the comparison without padding or a string of search phrases. Avoid this example ``` ``` An empty tag cannot describe the page. Omit it until a useful value is available. Avoid this example ``` ``` This could describe almost any site and gives a searcher no reason to choose the page. ## Recommendations - 01 Write for the Page Describe the specific page in plain language. Google can generate a different snippet from visible content when that better matches a search. - 02 Make Useful Pages Distinct Use a page-specific description for important URLs. Repeating one site-wide sentence across every page is not useful in search results. - 03 Skip the Character Myth Google sets no fixed length limit. Snippets are trimmed to fit the result and device, so lead with the details a reader needs. ## Related documentation - [Google Search Central: Snippet](https://developers.google.com/search/docs/appearance/snippet) - [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#meta-description) ## Related meta tags ### [author](https://zhead.dev/meta/author) name Names one author of the page. Add another author meta tag for each additional author. ``` ``` Names the author exactly as credited on the page. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [description](https://zhead.dev/meta/description) name Summarizes the page for directories and search engines. Google may use it as a search result snippet when it describes the page better than the visible content does. ``` ``` Specific details tell the reader what the recipe covers. ### [google](https://zhead.dev/meta/google) name Carries Google-specific page controls. Google currently documents nopagereadaloud for this metadata name. ``` ``` The documented Google-specific opt-out for page read-aloud services. ### [google-site-verification](https://zhead.dev/meta/google-site-verification) name Verifies ownership of a site in Google Search Console. Google provides the exact token to place on the site’s top-level page. ``` ``` Replace this placeholder with the exact token issued by Search Console. --- - **Page:** Icons & Colors HTML Tags · HTML Tag Collections · zhead - **Source:** https://zhead.dev/collection/icons - **Description:** Icons and interface colours for browser tabs, saved sites, and installed web apps. HTML tag collections # Icons & Colors Icons and interface colours for browser tabs, saved sites, and installed web apps. A favicon covers the browser tab. Add touch icons, a manifest, or vendor fields only for the platforms your site supports. ## Get started ``` ``` ## Recommendations - 01 A favicon may be enough Browsers still request /favicon.ico by convention. Use link rel="icon" when you want another path or format. - 02 Use SVG where the platform accepts it SVG scales cleanly for modern browser favicons. Apple touch icons still need a raster image. - 03 Keep a raster fallback PNG remains useful for fixed-size icons and platforms that do not accept SVG. - 04 Test icons against real surfaces Check light and dark browser chrome, pinned tiles, and home screens. A transparent mark can disappear on an unexpected background. ## Explanation ### [icon](https://zhead.dev/link/icon) rel Provides an icon that browsers can use for the page in tabs, bookmarks, history, and other interface surfaces. ``` ``` Declares a scalable SVG icon with its MIME type. ### [apple-touch-icon](https://zhead.dev/link/apple-touch-icon) rel Provides an icon that Apple devices can use when someone saves the site to their Home Screen or installs it as a web app. ``` ``` Provides a 180 by 180 pixel icon and declares its actual size. ### [apple-touch-startup-image](https://zhead.dev/link/apple-touch-startup-image) rel An Apple extension that supplies a launch image for a web app opened from the Home Screen. ``` ``` Limits this launch image to portrait orientation. Production sites usually need more specific size queries. ### [mask-icon](https://zhead.dev/link/mask-icon) rel A Safari-specific relation for the monochrome SVG used by pinned tabs. It is registered by IANA but is not a built-in HTML Living Standard link type. ``` ``` Links Safari to an SVG mask and supplies its display color. ### [theme-color](https://zhead.dev/meta/theme-color) name Suggests a color that browsers may use around the page, such as a title bar, tab highlight, or task switcher card. ``` ``` A valid CSS hex color that browsers can use around the page. ### [color-scheme](https://zhead.dev/meta/color-scheme) name Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls. ``` ``` Declares support for both common schemes, with light listed first as the fallback preference. ### [msapplication-TileColor](https://zhead.dev/meta/msapplication-tilecolor) name Legacy Internet Explorer metadata for the background color of a website tile pinned to the Windows 8 Start screen. Modern Chromium-based Edge does not use it. ``` ``` A valid hexadecimal tile color. ### [msapplication-TileImage](https://zhead.dev/meta/msapplication-tileimage) name Legacy Internet Explorer metadata for the image on a website tile pinned to the Windows 8 Start screen. Modern Chromium-based Edge does not use it. ``` ``` A root-relative path to the legacy 144 × 144 tile image. ## More collections Start with the closest collection, then trim it to match your page. [

Essentials

](https://zhead.dev/collection/essential) [

SEO Starter

](https://zhead.dev/collection/seo) [

Social Preview

](https://zhead.dev/collection/social-share) [

PWA

](https://zhead.dev/collection/pwa) [

Article

](https://zhead.dev/collection/article) --- - **Page:** robots · Meta Tag · zhead - **Source:** https://zhead.dev/meta/robots - **Description:** Sets page-level rules for compliant search crawlers, including whether the page may appear in results and what previews may be shown. It does not block access to the page. Meta tags # robots Sets page-level rules for compliant search crawlers, including whether the page may appear in results and what previews may be shown. It does not block access to the page. ## Parameters all Applies no indexing or search presentation restrictions. This is the default. ``` ``` noindex Prevents the page from appearing in search results. ``` ``` nofollow Tells crawlers not to follow links on the page. ``` ``` none Equivalent to noindex, nofollow. ``` ``` nosnippet Prevents a text snippet or video preview in search results. ``` ``` indexifembedded Lets Google index an embedded page despite noindex. It works only when combined with noindex. ``` ``` max-snippet:120 Limits a Google text snippet to 120 characters. ``` ``` max-image-preview:large Allows Google to show an image preview as wide as the result viewport. ``` ``` max-video-preview:-1 Allows Google to show a video preview of any length. ``` ``` notranslate Prevents Google from offering a translated result for the page. ``` ``` noimageindex Prevents Google from indexing images on the page. ``` ``` unavailable\_after: 2030-12-31 Removes the page from Google results after a valid date or time. ``` ``` ## Code examples Good example ``` ``` Prevents compliant search engines from showing the page in their results. Good example ``` ``` Limits the Google text snippet and permits a large image preview. Avoid this example ``` ``` These are defaults for Google, so the tag adds no restriction. Avoid this example ``` ``` Google ignores this historical rule because cached links no longer exist in Google Search. ## Recommendations - 01 Let Crawlers Read the Tag Do not block the page in robots.txt when relying on noindex. A crawler must fetch the page before it can see this metadata. - 02 Skip Default Rules Google’s default has no restrictions, so all and index, follow add no useful instruction. - 03 Expect Crawler Differences Search engines do not all support the same rules. Check the documentation for each crawler you need to control. ## Related documentation - [Google Search Central: Robots Meta Tag](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag) ## Related meta tags ### [author](https://zhead.dev/meta/author) name Names one author of the page. Add another author meta tag for each additional author. ``` ``` Names the author exactly as credited on the page. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [description](https://zhead.dev/meta/description) name Summarizes the page for directories and search engines. Google may use it as a search result snippet when it describes the page better than the visible content does. ``` ``` Specific details tell the reader what the recipe covers. ### [google](https://zhead.dev/meta/google) name Carries Google-specific page controls. Google currently documents nopagereadaloud for this metadata name. ``` ``` The documented Google-specific opt-out for page read-aloud services. ### [google-site-verification](https://zhead.dev/meta/google-site-verification) name Verifies ownership of a site in Google Search Console. Google provides the exact token to place on the site’s top-level page. ``` ``` Replace this placeholder with the exact token issued by Search Console. --- - **Page:** PWA HTML Tags · HTML Tag Collections · zhead - **Source:** https://zhead.dev/collection/pwa - **Description:** Document metadata commonly paired with a web app manifest. HTML tag collections # PWA Document metadata commonly paired with a web app manifest. The manifest carries most install metadata. The remaining meta tags tune browser chrome or cover older Apple and Microsoft behaviour. ## Get started ``` ``` ## Explanation ### [viewport](https://zhead.dev/meta/viewport) name Controls the layout viewport on mobile browsers, including its width, initial zoom, and how content uses display cutout areas. ``` ``` Lets content extend into the full display area. Use safe-area inset values in CSS to protect important content. ### [manifest](https://zhead.dev/link/manifest) rel Links the page to a web app manifest, a JSON document that describes properties such as the app name, icons, display mode, scope, and start URL. ``` ``` Links to a same-origin web app manifest. A relative URL is valid here. ### [theme-color](https://zhead.dev/meta/theme-color) name Suggests a color that browsers may use around the page, such as a title bar, tab highlight, or task switcher card. ``` ``` A valid CSS hex color that browsers can use around the page. ### [application-name](https://zhead.dev/meta/application-name) name Gives browsers a short name for the web application represented by the page. A browser may use it instead of the page title in bookmarks or other interface labels. ``` ``` A short application name that stays useful when the page title changes. ### [apple-mobile-web-app-capable](https://zhead.dev/meta/apple-mobile-web-app-capable) name Legacy Apple extension that makes a Home Screen web app open without Safari controls when set to yes. Prefer a web app manifest for a modern PWA. ``` ``` The only value that enables this legacy standalone mode. ### [apple-mobile-web-app-status-bar-style](https://zhead.dev/meta/apple-mobile-web-app-status-bar-style) name Legacy Apple extension that sets the iOS status bar style for a Home Screen web app. It only works when apple-mobile-web-app-capable enables standalone mode. ``` ``` Uses the normal status bar. This is also the default value. ### [apple-mobile-web-app-title](https://zhead.dev/meta/apple-mobile-web-app-title) name Legacy Apple extension that sets the title shown for a Home Screen web app. Without it, iOS uses the page title. ``` ``` A short Home Screen title. ### [msapplication-TileColor](https://zhead.dev/meta/msapplication-tilecolor) name Legacy Internet Explorer metadata for the background color of a website tile pinned to the Windows 8 Start screen. Modern Chromium-based Edge does not use it. ``` ``` A valid hexadecimal tile color. ### [msapplication-TileImage](https://zhead.dev/meta/msapplication-tileimage) name Legacy Internet Explorer metadata for the image on a website tile pinned to the Windows 8 Start screen. Modern Chromium-based Edge does not use it. ``` ``` A root-relative path to the legacy 144 × 144 tile image. ### [msapplication-config](https://zhead.dev/meta/msapplication-config) name Legacy Internet Explorer metadata that points to browserconfig.xml for Windows pinned-site tiles. Modern Chromium-based Edge does not use it. ``` ``` Points to the configuration file at the site root. ## More collections Start with the closest collection, then trim it to match your page. [

Essentials

](https://zhead.dev/collection/essential) [

SEO Starter

](https://zhead.dev/collection/seo) [

Social Preview

](https://zhead.dev/collection/social-share) [

Icons & Colors

](https://zhead.dev/collection/icons) [

Article

](https://zhead.dev/collection/article) --- - **Page:** viewport · Meta Tag · zhead - **Source:** https://zhead.dev/meta/viewport - **Description:** Controls the layout viewport on mobile browsers, including its width, initial zoom, and how content uses display cutout areas. Meta tags # viewport Controls the layout viewport on mobile browsers, including its width, initial zoom, and how content uses display cutout areas. ## Code examples Good example ``` ``` The usual responsive default: match the device width and start at a 1:1 scale. Avoid this example ``` ``` Attempts to prevent users from zooming beyond 100 percent, which harms accessibility. Good example ``` ``` Lets content extend into the full display area. Use safe-area inset values in CSS to protect important content. Avoid this example ``` ``` Forces a desktop-sized layout viewport and usually makes responsive CSS harder to use. Avoid this example ``` ``` An empty value gives the mobile browser no useful viewport instructions. ## Recommendations - 01 Start With the Standard Pair Use width=device-width, initial-scale=1 for a responsive page, then let the layout adapt with CSS. - 02 Keep Pinch Zoom Available Do not set user-scalable=no or maximum-scale=1. People with low vision rely on zoom, and browsers may ignore restrictions for accessibility. - 03 Handle Display Cutouts in CSS When using viewport-fit=cover, add safe-area inset padding where content could otherwise sit under a notch or rounded screen edge. ## Related documentation - [drafts.csswg.org: Css Viewport](https://drafts.csswg.org/css-viewport/#meta-viewport) - [MDN: Viewport\_meta\_element](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Viewport_meta_element) ## Related meta tags ### [application-name](https://zhead.dev/meta/application-name) name Gives browsers a short name for the web application represented by the page. A browser may use it instead of the page title in bookmarks or other interface labels. ``` ``` A short application name that stays useful when the page title changes. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [color-scheme](https://zhead.dev/meta/color-scheme) name Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls. ``` ``` Declares support for both common schemes, with light listed first as the fallback preference. ### [default-style](https://zhead.dev/meta/default-style) http-equiv Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited. ``` ``` Valid when a linked stylesheet set has the exact title Main Style. ### [format-detection](https://zhead.dev/meta/format-detection) name An Apple extension that can stop Safari on iOS from turning text that looks like a telephone number into a call link. ``` ``` The value documented by Apple for disabling automatic telephone links in Safari on iOS. --- - **Page:** Article HTML Tags · HTML Tag Collections · zhead - **Source:** https://zhead.dev/collection/article - **Description:** Page, Open Graph, and social preview metadata for an article. HTML tag collections # Article Page, Open Graph, and social preview metadata for an article. Describe the page first, then add Open Graph article fields for publication dates, authors, section, and tags. These fields shape compatible link previews; they do not guarantee search visibility. ## Get started ``` Freshwater Fishing Guide | River Notes ``` ## Explanation ### title Names the document in browser tabs, history, bookmarks, and often search results. The element accepts text only. ``` Freshwater Fishing Guide | River Notes ``` Uses a specific topic and a short site name. ### [description](https://zhead.dev/meta/description) name Summarizes the page for directories and search engines. Google may use it as a search result snippet when it describes the page better than the visible content does. ``` ``` Specific details tell the reader what the recipe covers. ### [og:type](https://zhead.dev/meta/og-type) property Sets the Open Graph object type. It is one of the four required basic properties, and some types require extra metadata. ``` ``` The defined type for an article page. ### [og:title](https://zhead.dev/meta/og-title) property Provides the title of the Open Graph object. It is one of the four required basic properties. ``` ``` Names the topic and intended reader. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. ### [og:url](https://zhead.dev/meta/og-url) property Provides the canonical URL used as the object’s permanent identifier. It is one of the four required basic properties. ``` ``` An absolute, canonical page URL. ### [og:site\_name](https://zhead.dev/meta/og-site-name) property Provides the name of the larger website that contains this object, such as IMDb. ``` ``` A concise name for the overall website. ### [og:locale](https://zhead.dev/meta/og-locale) property Sets the locale of the Open Graph metadata in language\_TERRITORY form. The default is en\_US. ``` ``` English as used in the United States. ### [og:image](https://zhead.dev/meta/og-image) property Provides the URL of an image that represents the Open Graph object. It is one of the four required basic properties. ``` ``` An absolute URL to a representative image. ### [og:image:width](https://zhead.dev/meta/og-image-width) property Provides the width, in pixels, of the preceding og:image resource. ``` ``` Declares an image that is 1200 pixels wide. ### [og:image:height](https://zhead.dev/meta/og-image-height) property Provides the height, in pixels, of the preceding og:image resource. ``` ``` Declares an image that is 600 pixels high. ### [og:image:alt](https://zhead.dev/meta/og-image-alt) property Describes what appears in the preceding og:image. It is a description, not a caption. ``` ``` States the visible subject and action. ### [article:published\_time](https://zhead.dev/meta/article-published-time) property Records when an article was first published. Use it with og:type set to article. ``` ``` A publication time expressed in UTC. ### [article:modified\_time](https://zhead.dev/meta/article-modified-time) property Records when an article was last changed. Open Graph defines the value as an ISO 8601 datetime. ``` ``` A complete UTC timestamp that parsers can read consistently. ### [article:author](https://zhead.dev/meta/article-author) property Links an article to one or more author profiles. The value is a URL, and you can repeat the property for multiple authors. ``` ``` Points to John Doe’s profile page. ### [article:section](https://zhead.dev/meta/article-section) property Names the high-level section that contains an article, such as Technology or Culture. ``` ``` A clear section name used across a publication. ### [article:tag](https://zhead.dev/meta/article-tag) property Adds a tag word or phrase associated with an article. Repeat the property to provide more than one tag. ``` ``` A specific topic assigned to the article. ### [twitter:card](https://zhead.dev/meta/twitter-card) name Selects the X Card format for a page. The metadata still uses the twitter: prefix. ``` ``` A defined card type for a preview with a large image. ### [twitter:creator](https://zhead.dev/meta/twitter-creator) name Attributes the page’s content to an X account using its @handle. The metadata name retains the twitter: prefix. ``` ``` A creator handle with the required @ prefix. ### [twitter:site](https://zhead.dev/meta/twitter-site) name Attributes the website or publication to an X account using its @handle. The metadata name retains the twitter: prefix. ``` ``` A site handle with the required @ prefix. ### [twitter:image](https://zhead.dev/meta/twitter-image) name Provides the image URL used in an X Card link preview. The metadata name retains the twitter: prefix. ``` ``` An absolute URL to a public image. ### [twitter:image:alt](https://zhead.dev/meta/twitter-image-alt) name Describes the image in twitter:image for people who cannot see it. The metadata name retains the twitter: prefix. ``` ``` Names the main subjects and setting. ### [twitter:title](https://zhead.dev/meta/twitter-title) name Provides the title used in an X Card link preview. The metadata name retains the twitter: prefix. ``` ``` Names the topic of the page directly. ### [twitter:description](https://zhead.dev/meta/twitter-description) name Provides the description used in an X Card link preview. The metadata name retains the twitter: prefix. ``` ``` Explains the subject in one specific sentence. ### [twitter:label1](https://zhead.dev/meta/twitter-label1) name Unsupported legacy Product Card field for the first custom label. X no longer supports Product Cards or publishes this field in its developer documentation. ``` ``` A historical custom label in a field X no longer supports. ### [twitter:data1](https://zhead.dev/meta/twitter-data1) name Unsupported legacy Product Card field for the first custom value. X no longer supports Product Cards or publishes this field in its developer documentation. ``` ``` A historical custom value in a field X no longer supports. ### [twitter:label2](https://zhead.dev/meta/twitter-label2) name Unsupported legacy Product Card field for the second custom label. X no longer supports Product Cards or publishes this field in its developer documentation. ``` ``` A historical custom label in a field X no longer supports. ### [twitter:data2](https://zhead.dev/meta/twitter-data2) name Unsupported legacy Product Card field for the second custom value. X no longer supports Product Cards or publishes this field in its developer documentation. ``` ``` A historical custom value in a field X no longer supports. ## More collections Start with the closest collection, then trim it to match your page. [

Essentials

](https://zhead.dev/collection/essential) [

SEO Starter

](https://zhead.dev/collection/seo) [

Social Preview

](https://zhead.dev/collection/social-share) [

Icons & Colors

](https://zhead.dev/collection/icons) [

PWA

](https://zhead.dev/collection/pwa) --- - **Page:** Social Preview HTML Tags · HTML Tag Collections · zhead - **Source:** https://zhead.dev/collection/social-share - **Description:** Open Graph and legacy Twitter Card fields used to build link previews. HTML tag collections # Social Preview Open Graph and legacy Twitter Card fields used to build link previews. Start with Open Graph title, description, URL, type, and an image with dimensions and alt text. Add Twitter Card fields only when X needs a value that differs from the Open Graph fallback. ## Get started ``` ``` ## Explanation ### [og:url](https://zhead.dev/meta/og-url) property Provides the canonical URL used as the object’s permanent identifier. It is one of the four required basic properties. ``` ``` An absolute, canonical page URL. ### [og:title](https://zhead.dev/meta/og-title) property Provides the title of the Open Graph object. It is one of the four required basic properties. ``` ``` Names the topic and intended reader. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. ### [og:type](https://zhead.dev/meta/og-type) property Sets the Open Graph object type. It is one of the four required basic properties, and some types require extra metadata. ``` ``` The defined type for an article page. ### [og:locale](https://zhead.dev/meta/og-locale) property Sets the locale of the Open Graph metadata in language\_TERRITORY form. The default is en\_US. ``` ``` English as used in the United States. ### [og:site\_name](https://zhead.dev/meta/og-site-name) property Provides the name of the larger website that contains this object, such as IMDb. ``` ``` A concise name for the overall website. ### [og:image](https://zhead.dev/meta/og-image) property Provides the URL of an image that represents the Open Graph object. It is one of the four required basic properties. ``` ``` An absolute URL to a representative image. ### [og:image:width](https://zhead.dev/meta/og-image-width) property Provides the width, in pixels, of the preceding og:image resource. ``` ``` Declares an image that is 1200 pixels wide. ### [og:image:height](https://zhead.dev/meta/og-image-height) property Provides the height, in pixels, of the preceding og:image resource. ``` ``` Declares an image that is 600 pixels high. ### [og:image:alt](https://zhead.dev/meta/og-image-alt) property Describes what appears in the preceding og:image. It is a description, not a caption. ``` ``` States the visible subject and action. ### [twitter:image](https://zhead.dev/meta/twitter-image) name Provides the image URL used in an X Card link preview. The metadata name retains the twitter: prefix. ``` ``` An absolute URL to a public image. ### [twitter:card](https://zhead.dev/meta/twitter-card) name Selects the X Card format for a page. The metadata still uses the twitter: prefix. ``` ``` A defined card type for a preview with a large image. ### [twitter:creator](https://zhead.dev/meta/twitter-creator) name Attributes the page’s content to an X account using its @handle. The metadata name retains the twitter: prefix. ``` ``` A creator handle with the required @ prefix. ### [twitter:site](https://zhead.dev/meta/twitter-site) name Attributes the website or publication to an X account using its @handle. The metadata name retains the twitter: prefix. ``` ``` A site handle with the required @ prefix. ### [twitter:label1](https://zhead.dev/meta/twitter-label1) name Unsupported legacy Product Card field for the first custom label. X no longer supports Product Cards or publishes this field in its developer documentation. ``` ``` A historical custom label in a field X no longer supports. ### [twitter:data1](https://zhead.dev/meta/twitter-data1) name Unsupported legacy Product Card field for the first custom value. X no longer supports Product Cards or publishes this field in its developer documentation. ``` ``` A historical custom value in a field X no longer supports. ### [twitter:label2](https://zhead.dev/meta/twitter-label2) name Unsupported legacy Product Card field for the second custom label. X no longer supports Product Cards or publishes this field in its developer documentation. ``` ``` A historical custom label in a field X no longer supports. ### [twitter:data2](https://zhead.dev/meta/twitter-data2) name Unsupported legacy Product Card field for the second custom value. X no longer supports Product Cards or publishes this field in its developer documentation. ``` ``` A historical custom value in a field X no longer supports. ## More collections Start with the closest collection, then trim it to match your page. [

Essentials

](https://zhead.dev/collection/essential) [

SEO Starter

](https://zhead.dev/collection/seo) [

Icons & Colors

](https://zhead.dev/collection/icons) [

PWA

](https://zhead.dev/collection/pwa) [

Article

](https://zhead.dev/collection/article) --- - **Page:** alternate · Link relation · zhead - **Source:** https://zhead.dev/link/alternate - **Description:** Points to another representation of the current page, such as a translation, feed, or version made for different media. Link # alternate Points to another representation of the current page, such as a translation, feed, or version made for different media. ## Code examples Good example ``` ``` Identifies the US English version with a valid language tag. Avoid this example ``` ``` Uses an underscore, so en\_US is not a valid BCP 47 language tag. Use en-US. ## Recommendations - 01 Use valid language tags For translated pages, set hreflang to a valid BCP 47 language tag such as en-US. Each URL should also identify itself and the other language versions. - 02 Describe the alternate Use hreflang for language variants, type for feeds, or media for versions designed for particular media conditions. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-alternate) - [Google Search Central: Localized Versions](https://developers.google.com/search/docs/specialty/international/localized-versions) --- - **Page:** author · Link relation · zhead - **Source:** https://zhead.dev/link/author - **Description:** Links to information about the author of the current page. Link # author Links to information about the author of the current page. ## Code examples Good example ``` ``` Links the page to a local author profile. Avoid this example ``` ``` Has no href, so it does not create an author link. ## Recommendations - 01 Link to useful author information Choose a stable profile or biography page that identifies the person or organization responsible for the page. - 02 Do not promise an SEO boost The relation describes authorship. The HTML standard does not assign ranking benefits to it. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-author) --- - **Page:** apple-touch-startup-image · Link relation · zhead - **Source:** https://zhead.dev/link/apple-touch-startup-image - **Description:** An Apple extension that supplies a launch image for a web app opened from the Home Screen. Link # apple-touch-startup-image An Apple extension that supplies a launch image for a web app opened from the Home Screen. ## Code examples Good example ``` ``` Limits this launch image to portrait orientation. Production sites usually need more specific size queries. Avoid this example ``` ``` Has no href, so Safari has no launch image to load. ## Recommendations - 01 Match the target display Use media queries to provide images for the intended viewport, pixel ratio, and orientation. Apple requires the launch image to match the device dimensions. - 02 Prefer a designed launch screen A static launch image can become stale as the interface changes. Keep it visually simple and test every declared device variant. ## Related documentation - [Apple Developer: ConfiguringWebApplications](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) - [IANA: Link Relations](https://www.iana.org/assignments/link-relations/link-relations.xhtml) --- - **Page:** dns-prefetch · Link relation · zhead - **Source:** https://zhead.dev/link/dns-prefetch - **Description:** Asks the browser to resolve an origin's hostname before a resource from that origin is requested. Link # dns-prefetch Asks the browser to resolve an origin's hostname before a resource from that origin is requested. ## Code examples Good example ``` ``` Starts DNS resolution for a CDN origin the page expects to use. Avoid this example ``` ``` Points back to the current document and provides no useful external DNS hint. ## Recommendations - 01 Reserve it for likely origins Each hint can trigger network work. Add it only for external origins the page is likely to use soon. - 02 Use preconnect when connection setup matters Preconnect can also cover TCP and TLS setup. Use dns-prefetch when DNS resolution alone is enough or as a lightweight fallback. - 03 Account for privacy A DNS lookup can reveal interest in a hostname before the user requests a resource from it. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-dns-prefetch) --- - **Page:** expect · Link relation · zhead - **Source:** https://zhead.dev/link/expect - **Description:** Points to an element in the current document. With blocking="render", it can hold rendering until that element is connected and fully parsed. Link # expect Points to an element in the current document. With blocking="render", it can hold rendering until that element is connected and fully parsed. ## Code examples Good example ``` ``` Blocks rendering while the parser reaches and finishes the element with id="hero". Avoid this example ``` ``` Targets another document, so it cannot block on an element in the current page. ## Recommendations - 01 Target this document Use a fragment URL for an element in the current page. A URL for another document does not create a working render block. - 02 Add blocking explicitly Rel="expect" identifies the element. The link blocks rendering only when blocking includes the render token and the other processing conditions are met. - 03 Keep the blocked region small Rendering waits until the target is fully parsed. A late target can delay the whole first render, so use this only when partial rendering would be visibly broken. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-expect) --- - **Page:** help · Link relation · zhead - **Source:** https://zhead.dev/link/help - **Description:** Links to help for the current page. On a visible link, it can instead provide help for the link's surrounding context. Link # help Links to help for the current page. On a visible link, it can instead provide help for the link's surrounding context. ## Code examples Good example ``` ``` Points to help for the page as a whole. Avoid this example ``` ``` Has no href, so it does not create a help link. ## Recommendations - 01 Make the target specific Send readers to the manual, support article, or instructions for this page rather than a generic homepage. - 02 Keep help usable Give the help page clear headings, labelled controls, keyboard access, and a working route back to the task. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-help) --- - **Page:** me · Link relation · zhead - **Source:** https://zhead.dev/link/me - **Description:** Links to another page that represents the same person or identity as the current page. Link # me Links to another page that represents the same person or identity as the current page. ## Code examples Good example ``` ``` Connects a personal page to another profile for the same person. Avoid this example ``` ``` Points to a different person. Use rel="author" when the target identifies the page's author. ## Recommendations - 01 Use it only for the same identity A social profile, personal domain, or profile page is suitable only when it represents the same person as the current page. - 02 Reciprocal links can prove control Some IndieWeb tools verify identity by finding rel="me" links in both directions. The relation alone does not prove control of the target account. ## Related documentation - [microformats.org: Rel Me](https://microformats.org/wiki/rel-me) - [IANA: Link Relations](https://www.iana.org/assignments/link-relations/link-relations.xhtml) --- - **Page:** license · Link relation · zhead - **Source:** https://zhead.dev/link/license - **Description:** Links to the license that applies to the current page. Link # license Links to the license that applies to the current page. ## Code examples Good example ``` ``` Links directly to the license for the current page. Avoid this example ``` ``` Points to a homepage that does not identify the page's license. ## Recommendations - 01 Name the applicable license Link directly to the license text or to a page that clearly says which material it covers. - 02 Do not infer permissions The relation identifies a license. It does not grant rights beyond the terms at the linked URL. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-license) - [rfc-editor.org: Rfc4946](https://www.rfc-editor.org/rfc/rfc4946) --- - **Page:** modulepreload · Link relation · zhead - **Source:** https://zhead.dev/link/modulepreload - **Description:** Fetches a JavaScript module early and stores it in the document's module map. Browsers may also fetch its dependencies. Link # modulepreload Fetches a JavaScript module early and stores it in the document's module map. Browsers may also fetch its dependencies. ## Code examples Good example ``` ``` Fetches a module before a later module script or import needs it. Avoid this example ``` ``` Uses a non-script destination, so the link does not meet the modulepreload requirements. ## Recommendations - 01 Preload only important modules Use it when late discovery would add a meaningful delay. Preloading a large module graph can compete with resources needed for rendering. - 02 Configure cross-origin modules Module fetches use CORS. A cross-origin server must return the required CORS headers, while crossorigin controls the credentials mode. - 03 Keep as script-like Omit as or use a script-like destination. Values such as style make the modulepreload link invalid. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-modulepreload) --- - **Page:** next · Link relation · zhead - **Source:** https://zhead.dev/link/next - **Description:** Links to the next logical document in a sequence, such as the next chapter or page of results. Link # next Links to the next logical document in a sequence, such as the next chapter or page of results. ## Code examples Good example ``` ``` Points from the current chapter to the next one in the sequence. Avoid this example ``` ``` Has no href, so it does not identify the next document. ## Recommendations - 01 Link to the immediate next item Keep the sequence unambiguous. The target should be the next document, not simply another related page. - 02 Treat it as semantics The HTML relation describes document order. Do not rely on it alone for crawling, indexing, or user navigation. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-next) --- - **Page:** preconnect · Link relation · zhead - **Source:** https://zhead.dev/link/preconnect - **Description:** Asks the browser to prepare a connection to an origin before the page requests a resource from it. This can cover DNS, transport, and TLS setup. Link # preconnect Asks the browser to prepare a connection to an origin before the page requests a resource from it. This can cover DNS, transport, and TLS setup. ## Code examples Good example ``` ``` Prepares an anonymous cross-origin connection to a CDN used early by the page. Avoid this example ``` ``` Has no href, so it gives the browser no origin to connect to. ## Recommendations - 01 Use only for critical origins An unused connection costs sockets, CPU time, and network traffic. Reserve preconnect for origins the page will use soon. - 02 Match the credentials mode For resources fetched with anonymous CORS, such as cross-origin fonts, add crossorigin so the prepared connection can be reused. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-preconnect) --- - **Page:** pingback · Link relation · zhead - **Source:** https://zhead.dev/link/pingback - **Description:** Publishes the address of the Pingback 1.0 endpoint that accepts link notifications for the current page. Link # pingback Publishes the address of the Pingback 1.0 endpoint that accepts link notifications for the current page. ## Code examples Good example ``` ``` Publishes a relative endpoint URL, which resolves against the page's base URL. Avoid this example ``` ``` Has no href, so it does not identify a Pingback endpoint. ## Recommendations - 01 Secure the endpoint Pingback endpoints accept network requests derived from other sites. Protect them against spam, abuse, and server-side request forgery. - 02 Do not invent an absolute URL rule HTML accepts relative URLs here and resolves them against the document base URL. Use an absolute URL only when it makes deployment clearer. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-pingback) - [hixie.ch: Pingback](https://www.hixie.ch/specs/pingback/pingback) --- - **Page:** preload · Link relation · zhead - **Source:** https://zhead.dev/link/preload - **Description:** Fetches a resource early for the current navigation, using the destination and priority implied by the as attribute. Preload fetches the resource but does not apply or execute it. Link # preload Fetches a resource early for the current navigation, using the destination and priority implied by the as attribute. Preload fetches the resource but does not apply or execute it. ## Code examples Good example ``` ``` Preloads a font with the destination, type, and anonymous CORS mode used by the later font request. Good example ``` ``` Fetches CSS early. A separate stylesheet link is still needed to apply it. Avoid this example ``` ``` Omits as, so the preload has no valid fetch destination and is ignored. ## Recommendations - 01 Set the fetch destination The as value must match how the resource will be used, such as style, script, font, or image. A mismatch can cause another fetch. - 02 Match CORS settings The preload and the later resource request must use compatible CORS and credentials modes. Fonts generally need crossorigin, including same-origin font preloads. - 03 Preload only near-term resources Browsers warn when a preloaded resource is not used soon after load. Too many preloads can delay resources that matter more. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-preload) --- - **Page:** prefetch · Link relation · zhead - **Source:** https://zhead.dev/link/prefetch - **Description:** Suggests fetching and caching a resource that is likely to be needed by a later navigation. Link # prefetch Suggests fetching and caching a resource that is likely to be needed by a later navigation. ## Code examples Good example ``` ``` Suggests fetching a page that is likely to be the next navigation. Avoid this example ``` ``` Uses a next-navigation hint for a resource required by the current page. ## Recommendations - 01 Prefetch likely next-step resources A wrong prediction wastes data and can compete with current page work. Use evidence from common navigation paths rather than guessing broadly. - 02 Use preload for the current page Prefetch targets a later navigation. A resource needed by the current page may instead need preload or its normal loading element. - 03 Expect browser discretion Prefetch is a hint. The browser can delay or ignore it based on network conditions, user settings, or resource policy. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-prefetch) --- - **Page:** privacy-policy · Link relation · zhead - **Source:** https://zhead.dev/link/privacy-policy - **Description:** Links to information about the data collection and usage practices that apply to the current page. Link # privacy-policy Links to information about the data collection and usage practices that apply to the current page. ## Code examples Good example ``` ``` Points to the privacy policy that applies to the current page. Avoid this example ``` ``` Labels terms of service as a privacy policy. Use the relation that matches the target document. ## Recommendations - 01 Link to the applicable policy The target can be a standalone privacy policy or a relevant section of a broader document. Make its scope clear. - 02 Keep a visible policy link Head metadata is easy for people to miss. Also provide a visible link wherever users need to review the policy. - 03 Keep the policy accurate The relation only identifies a document. It does not show that the policy matches the site's behavior or meets legal requirements. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-privacy-policy) - [rfc-editor.org: Rfc6903](https://www.rfc-editor.org/rfc/rfc6903#section-4) - [IANA: Link Relations](https://www.iana.org/assignments/link-relations/link-relations.xhtml) --- - **Page:** prev · Link relation · zhead - **Source:** https://zhead.dev/link/prev - **Description:** Links to the previous logical document in a sequence, such as the preceding chapter or page of results. Link # prev Links to the previous logical document in a sequence, such as the preceding chapter or page of results. ## Code examples Good example ``` ``` Points from the current chapter to the previous one in the sequence. Avoid this example ``` ``` Has no href, so it does not identify the previous document. ## Recommendations - 01 Link to the immediate previous item Keep the sequence unambiguous. The target should be the preceding document, not simply a parent or related page. - 02 Treat it as semantics The HTML relation describes document order. Do not rely on it alone for crawling, indexing, or user navigation. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-prev) --- - **Page:** search · Link relation · zhead - **Source:** https://zhead.dev/link/search - **Description:** Links to a resource that can search the current page and related pages. The target can be a human-facing search page or an OpenSearch description document. Link # search Links to a resource that can search the current page and related pages. The target can be a human-facing search page or an OpenSearch description document. ## Code examples Good example ``` ``` Publishes an OpenSearch description document with its MIME type and title. Avoid this example ``` ``` Points to a fragment on the current page rather than a usable search resource. ## Recommendations - 01 Describe OpenSearch documents For OpenSearch autodiscovery, set type="application/opensearchdescription+xml" and give the link a short title. - 02 Keep visible search accessible A rel="search" link does not replace an accessible search form. Label the input, preserve keyboard access, and expose the form in the page interface. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-search) - [github.com: Opensearch 1 1 Draft 6.Md](https://github.com/dewitt/opensearch/blob/master/opensearch-1-1-draft-6.md#autodiscovery-in-htmlxhtml) --- - **Page:** terms-of-service · Link relation · zhead - **Source:** https://zhead.dev/link/terms-of-service - **Description:** Links to the agreements between the page provider and people who use the page or service. Link # terms-of-service Links to the agreements between the page provider and people who use the page or service. ## Code examples Good example ``` ``` Points to the terms governing use of the current page or service. Avoid this example ``` ``` Labels a privacy policy as terms of service. Use the relation that matches the target document. ## Recommendations - 01 Link to the terms that apply Use the document or section that governs this page. Avoid a generic legal index when a direct link exists. - 02 Keep a visible terms link The head relation supplies metadata. Users still need a visible, accessible route to the terms before they agree to them. - 03 Keep versions clear When terms change, identify the effective version and preserve older versions when users may need to review them. ## Related documentation - [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-terms-of-service) - [rfc-editor.org: Rfc6903](https://www.rfc-editor.org/rfc/rfc6903#section-5) - [IANA: Link Relations](https://www.iana.org/assignments/link-relations/link-relations.xhtml) --- - **Page:** apple-itunes-app · Meta Tag · zhead - **Source:** https://zhead.dev/meta/apple-itunes-app - **Description:** Adds Apple’s Smart App Banner in Safari. The banner opens the installed app or its App Store page. Meta tags # apple-itunes-app Adds Apple’s Smart App Banner in Safari. The banner opens the installed app or its App Store page. ## Code examples Good example ``` ``` The required parameter with a numeric App Store ID. Good example ``` ``` Adds a valid URL that lets the installed app open the matching content. Avoid this example ``` ``` The required app ID is empty. Avoid this example ``` ``` Missing the required app-id parameter. ## Recommendations - 01 Provide the App ID The app-id parameter is required. Use the numeric App Store ID without the id prefix. - 02 Add Page Context Use app-argument with a valid URL when the installed app can open the matching content. - 03 Test in Safari Smart App Banners do not appear inside a frame or in the iOS simulator. ## Related documentation - [Apple Developer: Promoting Apps With Smart App Banners](https://developer.apple.com/documentation/webkit/promoting-apps-with-smart-app-banners) ## Related meta tags ### [apple-itunes-app](https://zhead.dev/meta/apple-itunes-app) name Adds Apple’s Smart App Banner in Safari. The banner opens the installed app or its App Store page. ``` ``` The required parameter with a numeric App Store ID. ### [apple-mobile-web-app-capable](https://zhead.dev/meta/apple-mobile-web-app-capable) name Legacy Apple extension that makes a Home Screen web app open without Safari controls when set to yes. Prefer a web app manifest for a modern PWA. ``` ``` The only value that enables this legacy standalone mode. ### [apple-mobile-web-app-status-bar-style](https://zhead.dev/meta/apple-mobile-web-app-status-bar-style) name Legacy Apple extension that sets the iOS status bar style for a Home Screen web app. It only works when apple-mobile-web-app-capable enables standalone mode. ``` ``` Uses the normal status bar. This is also the default value. ### [apple-mobile-web-app-title](https://zhead.dev/meta/apple-mobile-web-app-title) name Legacy Apple extension that sets the title shown for a Home Screen web app. Without it, iOS uses the page title. ``` ``` A short Home Screen title. ### [mobile-web-app-capable](https://zhead.dev/meta/mobile-web-app-capable) name Deprecated pre-manifest hint once used by Chrome for Android to launch a Home Screen site without browser controls. Use a web app manifest today. ``` ``` The historical value that requested standalone app mode. --- - **Page:** apple-mobile-web-app-title · Meta Tag · zhead - **Source:** https://zhead.dev/meta/apple-mobile-web-app-title - **Description:** Legacy Apple extension that sets the title shown for a Home Screen web app. Without it, iOS uses the page title. Meta tags # apple-mobile-web-app-title Legacy Apple extension that sets the title shown for a Home Screen web app. Without it, iOS uses the page title. ## Code examples Good example ``` ``` A short Home Screen title. Good example ``` ``` A readable title can include spaces. Avoid this example ``` ``` Likely to be truncated on the Home Screen. Avoid this example ``` ``` Use plain text rather than HTML-like markup. ## Recommendations - 01 Keep It Short Apple sets no fixed character limit for this tag, but the Home Screen may truncate a long title. - 02 Prefer a Manifest Use short\_name in a web app manifest for modern install metadata. ## Related documentation - [Apple Developer: MetaTags](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html) - [web.dev: Web App Manifest](https://web.dev/learn/pwa/web-app-manifest/) ## Related meta tags ### [apple-itunes-app](https://zhead.dev/meta/apple-itunes-app) name Adds Apple’s Smart App Banner in Safari. The banner opens the installed app or its App Store page. ``` ``` The required parameter with a numeric App Store ID. ### [apple-mobile-web-app-capable](https://zhead.dev/meta/apple-mobile-web-app-capable) name Legacy Apple extension that makes a Home Screen web app open without Safari controls when set to yes. Prefer a web app manifest for a modern PWA. ``` ``` The only value that enables this legacy standalone mode. ### [apple-mobile-web-app-status-bar-style](https://zhead.dev/meta/apple-mobile-web-app-status-bar-style) name Legacy Apple extension that sets the iOS status bar style for a Home Screen web app. It only works when apple-mobile-web-app-capable enables standalone mode. ``` ``` Uses the normal status bar. This is also the default value. ### [apple-mobile-web-app-title](https://zhead.dev/meta/apple-mobile-web-app-title) name Legacy Apple extension that sets the title shown for a Home Screen web app. Without it, iOS uses the page title. ``` ``` A short Home Screen title. ### [mobile-web-app-capable](https://zhead.dev/meta/mobile-web-app-capable) name Deprecated pre-manifest hint once used by Chrome for Android to launch a Home Screen site without browser controls. Use a web app manifest today. ``` ``` The historical value that requested standalone app mode. --- - **Page:** apple-mobile-web-app-status-bar-style · Meta Tag · zhead - **Source:** https://zhead.dev/meta/apple-mobile-web-app-status-bar-style - **Description:** Legacy Apple extension that sets the iOS status bar style for a Home Screen web app. It only works when apple-mobile-web-app-capable enables standalone mode. Meta tags # apple-mobile-web-app-status-bar-style Legacy Apple extension that sets the iOS status bar style for a Home Screen web app. It only works when apple-mobile-web-app-capable enables standalone mode. ## Parameters default The normal status bar appearance. ``` ``` black A black status bar above the web content. ``` ``` black-translucent A translucent black status bar over the web content. ``` ``` ## Code examples Good example ``` ``` Uses the normal status bar. This is also the default value. Good example ``` ``` Uses a black status bar with content laid out below it. Good example ``` ``` Extends web content across the screen beneath a translucent black status bar. Avoid this example ``` ``` Not one of Apple’s three documented values. Avoid this example ``` ``` A native UIKit style name is not valid for this HTML meta element. ## Recommendations - 01 Enable Standalone Mode First This property has no effect unless apple-mobile-web-app-capable is set to yes. - 02 Protect the Safe Area With black-translucent, content extends beneath the status bar. Keep text and controls clear of the inset. ## Related documentation - [Apple Developer: MetaTags](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html) ## Related meta tags ### [apple-itunes-app](https://zhead.dev/meta/apple-itunes-app) name Adds Apple’s Smart App Banner in Safari. The banner opens the installed app or its App Store page. ``` ``` The required parameter with a numeric App Store ID. ### [apple-mobile-web-app-capable](https://zhead.dev/meta/apple-mobile-web-app-capable) name Legacy Apple extension that makes a Home Screen web app open without Safari controls when set to yes. Prefer a web app manifest for a modern PWA. ``` ``` The only value that enables this legacy standalone mode. ### [apple-mobile-web-app-status-bar-style](https://zhead.dev/meta/apple-mobile-web-app-status-bar-style) name Legacy Apple extension that sets the iOS status bar style for a Home Screen web app. It only works when apple-mobile-web-app-capable enables standalone mode. ``` ``` Uses the normal status bar. This is also the default value. ### [apple-mobile-web-app-title](https://zhead.dev/meta/apple-mobile-web-app-title) name Legacy Apple extension that sets the title shown for a Home Screen web app. Without it, iOS uses the page title. ``` ``` A short Home Screen title. ### [mobile-web-app-capable](https://zhead.dev/meta/mobile-web-app-capable) name Deprecated pre-manifest hint once used by Chrome for Android to launch a Home Screen site without browser controls. Use a web app manifest today. ``` ``` The historical value that requested standalone app mode. --- - **Page:** application-name · Meta Tag · zhead - **Source:** https://zhead.dev/meta/application-name - **Description:** Gives browsers a short name for the web application represented by the page. A browser may use it instead of the page title in bookmarks or other interface labels. Meta tags # application-name Gives browsers a short name for the web application represented by the page. A browser may use it instead of the page title in bookmarks or other interface labels. ## Code examples Good example ``` ``` A short application name that stays useful when the page title changes. Good example ``` ``` A clear name for an application that tracks budgets. Avoid this example ``` ``` Mixes temporary page status into a name that should stay stable. Avoid this example ``` ``` A recipe page is a document, not a web application, so it should not use this metadata name. ## Recommendations - 01 Use It Only for Web Applications Leave this tag out when the page does not represent a web application. The HTML standard explicitly limits it to web applications. - 02 Use a Short, Stable Name Give the application name without page status, unread counts, or slogans. Browsers may have little room for the label. - 03 Provide Translations Separately For a localized name, add one application-name tag per language and set the lang attribute on each tag. ## Related documentation - [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#meta-application-name) ## Related meta tags ### [application-name](https://zhead.dev/meta/application-name) name Gives browsers a short name for the web application represented by the page. A browser may use it instead of the page title in bookmarks or other interface labels. ``` ``` A short application name that stays useful when the page title changes. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [color-scheme](https://zhead.dev/meta/color-scheme) name Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls. ``` ``` Declares support for both common schemes, with light listed first as the fallback preference. ### [default-style](https://zhead.dev/meta/default-style) http-equiv Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited. ``` ``` Valid when a linked stylesheet set has the exact title Main Style. ### [format-detection](https://zhead.dev/meta/format-detection) name An Apple extension that can stop Safari on iOS from turning text that looks like a telephone number into a call link. ``` ``` The value documented by Apple for disabling automatic telephone links in Safari on iOS. --- - **Page:** color-scheme · Meta Tag · zhead - **Source:** https://zhead.dev/meta/color-scheme - **Description:** Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls. Meta tags # color-scheme Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls. ## Parameters light The page supports a light color scheme. ``` ``` dark The page supports a dark color scheme. ``` ``` light dark The page supports both schemes and prefers light when no user preference is known. ``` ``` ## Code examples Good example ``` ``` Declares support for both common schemes, with light listed first as the fallback preference. Good example ``` ``` Valid for a page designed to render only with a dark color scheme. Avoid this example ``` ``` Wrong when the page has no dark palette. Declaring support does not create the styles for you. Avoid this example ``` ``` An empty tag declares no supported scheme. Omit the tag when the page has nothing to declare. ## Recommendations - 01 Declare Only Working Schemes A browser may apply a declared scheme to form controls, scrollbars, and the page canvas. Make sure the page itself is readable in every scheme you list. - 02 Set the CSS Property Too Set color-scheme on the root element so native controls and descendants use the same schemes after CSS loads. ## Related documentation - [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme) - [drafts.csswg.org: Css Color Adjust](https://drafts.csswg.org/css-color-adjust/#color-scheme-prop) ## Related meta tags ### [application-name](https://zhead.dev/meta/application-name) name Gives browsers a short name for the web application represented by the page. A browser may use it instead of the page title in bookmarks or other interface labels. ``` ``` A short application name that stays useful when the page title changes. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [color-scheme](https://zhead.dev/meta/color-scheme) name Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls. ``` ``` Declares support for both common schemes, with light listed first as the fallback preference. ### [default-style](https://zhead.dev/meta/default-style) http-equiv Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited. ``` ``` Valid when a linked stylesheet set has the exact title Main Style. ### [format-detection](https://zhead.dev/meta/format-detection) name An Apple extension that can stop Safari on iOS from turning text that looks like a telephone number into a call link. ``` ``` The value documented by Apple for disabling automatic telephone links in Safari on iOS. --- - **Page:** apple-mobile-web-app-capable · Meta Tag · zhead - **Source:** https://zhead.dev/meta/apple-mobile-web-app-capable - **Description:** Legacy Apple extension that makes a Home Screen web app open without Safari controls when set to yes. Prefer a web app manifest for a modern PWA. Meta tags # apple-mobile-web-app-capable Legacy Apple extension that makes a Home Screen web app open without Safari controls when set to yes. Prefer a web app manifest for a modern PWA. ## Code examples Good example ``` ``` The only value that enables this legacy standalone mode. Avoid this example ``` ``` Apple documents yes, not a Boolean string, as the enabling value. Avoid this example ``` ``` An empty value does not enable standalone mode. Omit the legacy tag instead. ## Recommendations - 01 Use a Manifest First Set display in a web app manifest. Modern PWA guidance treats this meta element as a deprecated fallback. - 02 Test Standalone Navigation Safari controls are absent in standalone mode, so your app must provide any navigation people need. ## Related documentation - [Apple Developer: MetaTags](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html) - [web.dev: Web App Manifest](https://web.dev/learn/pwa/web-app-manifest/) ## Related meta tags ### [apple-itunes-app](https://zhead.dev/meta/apple-itunes-app) name Adds Apple’s Smart App Banner in Safari. The banner opens the installed app or its App Store page. ``` ``` The required parameter with a numeric App Store ID. ### [apple-mobile-web-app-capable](https://zhead.dev/meta/apple-mobile-web-app-capable) name Legacy Apple extension that makes a Home Screen web app open without Safari controls when set to yes. Prefer a web app manifest for a modern PWA. ``` ``` The only value that enables this legacy standalone mode. ### [apple-mobile-web-app-status-bar-style](https://zhead.dev/meta/apple-mobile-web-app-status-bar-style) name Legacy Apple extension that sets the iOS status bar style for a Home Screen web app. It only works when apple-mobile-web-app-capable enables standalone mode. ``` ``` Uses the normal status bar. This is also the default value. ### [apple-mobile-web-app-title](https://zhead.dev/meta/apple-mobile-web-app-title) name Legacy Apple extension that sets the title shown for a Home Screen web app. Without it, iOS uses the page title. ``` ``` A short Home Screen title. ### [mobile-web-app-capable](https://zhead.dev/meta/mobile-web-app-capable) name Deprecated pre-manifest hint once used by Chrome for Android to launch a Home Screen site without browser controls. Use a web app manifest today. ``` ``` The historical value that requested standalone app mode. --- - **Page:** author · Meta Tag · zhead - **Source:** https://zhead.dev/meta/author - **Description:** Names one author of the page. Add another author meta tag for each additional author. Meta tags # author Names one author of the page. Add another author meta tag for each additional author. ## Code examples Good example ``` ``` Names the author exactly as credited on the page. Good example ``` ``` A pen name is fine when it matches the published byline. Avoid this example ``` ``` A generic account label does not identify the author. Avoid this example ``` ``` This combines two authors in one value. Use a separate author tag for each person. ## Recommendations - 01 Credit One Author per Tag The HTML standard defines each author value as the name of one author. Repeat the tag when a page has multiple authors. - 02 Match the Published Byline Use the name readers see on the page, including a pen name when that is how the author publishes. - 03 Keep Roles Out of the Name Put job titles and contributor roles in the visible byline or structured data. This value is for the author name. ## Related documentation - [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#meta-author) ## Related meta tags ### [author](https://zhead.dev/meta/author) name Names one author of the page. Add another author meta tag for each additional author. ``` ``` Names the author exactly as credited on the page. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [description](https://zhead.dev/meta/description) name Summarizes the page for directories and search engines. Google may use it as a search result snippet when it describes the page better than the visible content does. ``` ``` Specific details tell the reader what the recipe covers. ### [google](https://zhead.dev/meta/google) name Carries Google-specific page controls. Google currently documents nopagereadaloud for this metadata name. ``` ``` The documented Google-specific opt-out for page read-aloud services. ### [google-site-verification](https://zhead.dev/meta/google-site-verification) name Verifies ownership of a site in Google Search Console. Google provides the exact token to place on the site’s top-level page. ``` ``` Replace this placeholder with the exact token issued by Search Console. --- - **Page:** format-detection · Meta Tag · zhead - **Source:** https://zhead.dev/meta/format-detection - **Description:** An Apple extension that can stop Safari on iOS from turning text that looks like a telephone number into a call link. Meta tags # format-detection An Apple extension that can stop Safari on iOS from turning text that looks like a telephone number into a call link. ## Parameters telephone=no Stops Safari on iOS from automatically linking text that looks like a telephone number. ``` ``` ## Code examples Good example ``` ``` The value documented by Apple for disabling automatic telephone links in Safari on iOS. Avoid this example ``` ``` Apple’s Safari documentation does not define email or address values for this tag. Avoid this example ``` ``` The documented value is telephone=no, not telephone=off. Avoid this example ``` ``` An empty value changes nothing. Omit the tag when the default detection is acceptable. ## Recommendations - 01 Use It for False Positives Add telephone=no when identifiers, order numbers, or other text are being mistaken for phone numbers. - 02 Add Real Call Links Yourself When detection is off, mark real phone numbers with tel links so people can still call them. ## Related documentation - [Apple Developer: MetaTags](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW5) ## Related meta tags ### [application-name](https://zhead.dev/meta/application-name) name Gives browsers a short name for the web application represented by the page. A browser may use it instead of the page title in bookmarks or other interface labels. ``` ``` A short application name that stays useful when the page title changes. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [color-scheme](https://zhead.dev/meta/color-scheme) name Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls. ``` ``` Declares support for both common schemes, with light listed first as the fallback preference. ### [default-style](https://zhead.dev/meta/default-style) http-equiv Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited. ``` ``` Valid when a linked stylesheet set has the exact title Main Style. ### [format-detection](https://zhead.dev/meta/format-detection) name An Apple extension that can stop Safari on iOS from turning text that looks like a telephone number into a call link. ``` ``` The value documented by Apple for disabling automatic telephone links in Safari on iOS. --- - **Page:** generator · Meta Tag · zhead - **Source:** https://zhead.dev/meta/generator - **Description:** Names one of the software packages that generated the HTML document. Leave it out when a person wrote the markup directly. Meta tags # generator Names one of the software packages that generated the HTML document. Leave it out when a person wrote the markup directly. ## Code examples Good example ``` ``` Names the software that generated the document. Good example ``` ``` A product name and version are valid when ExamplePress generated the markup. Avoid this example ``` ``` A person belongs in author metadata, not generator metadata. Avoid this example ``` ``` An empty tag identifies no generator and should be omitted. ## Recommendations - 01 Name the Actual Generator Use the package name, and include a version only when that detail helps tooling or diagnostics. - 02 Do Not Use It as a Signature This metadata is for software that generated the document, not the author, publisher, or framework used only at runtime. ## Related documentation - [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#meta-generator) ## Related meta tags ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [creator](https://zhead.dev/meta/creator) name Adds a custom creator value to the document. The bare creator name has no standard HTML meaning, so it works only when a known consumer expects it. ``` ``` A sensible value when a documented integration expects a plain creator name. ### [generator](https://zhead.dev/meta/generator) name Names one of the software packages that generated the HTML document. Leave it out when a person wrote the markup directly. ``` ``` Names the software that generated the document. ### [rating](https://zhead.dev/meta/rating) name Marks a page as containing sexually explicit adult content so Google can filter it in SafeSearch. It is not a general age rating system. ``` ``` The simple value Google recommends for a page with sexually explicit content. --- - **Page:** creator · Meta Tag · zhead - **Source:** https://zhead.dev/meta/creator - **Description:** Adds a custom creator value to the document. The bare creator name has no standard HTML meaning, so it works only when a known consumer expects it. Meta tags # creator Adds a custom creator value to the document. The bare creator name has no standard HTML meaning, so it works only when a known consumer expects it. ## Code examples Good example ``` ``` A sensible value when a documented integration expects a plain creator name. Good example ``` ``` A team name can work when that is the value expected by the consuming system. Avoid this example ``` ``` A generic account label does not identify who created the page. Avoid this example ``` ``` An empty custom metadata value gives its consumer nothing to use. ## Recommendations - 01 Prefer Standard Author Metadata Use the standard author meta name for page authors. Use creator only when an integration documents this exact metadata name. - 02 Follow the Consumer Contract Custom metadata has no shared value format. Match the syntax required by the tool that will read it. ## Related documentation - [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#other-metadata-names) - [wiki.whatwg.org: MetaExtensions](https://wiki.whatwg.org/wiki/MetaExtensions) ## Related meta tags ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [creator](https://zhead.dev/meta/creator) name Adds a custom creator value to the document. The bare creator name has no standard HTML meaning, so it works only when a known consumer expects it. ``` ``` A sensible value when a documented integration expects a plain creator name. ### [generator](https://zhead.dev/meta/generator) name Names one of the software packages that generated the HTML document. Leave it out when a person wrote the markup directly. ``` ``` Names the software that generated the document. ### [rating](https://zhead.dev/meta/rating) name Marks a page as containing sexually explicit adult content so Google can filter it in SafeSearch. It is not a general age rating system. ``` ``` The simple value Google recommends for a page with sexually explicit content. --- - **Page:** google · Meta Tag · zhead - **Source:** https://zhead.dev/meta/google - **Description:** Carries Google-specific page controls. Google currently documents nopagereadaloud for this metadata name. Meta tags # google Carries Google-specific page controls. Google currently documents nopagereadaloud for this metadata name. ## Parameters nopagereadaloud Prevents Google text-to-speech services from reading the page aloud. ``` ``` ## Code examples Good example ``` ``` The documented Google-specific opt-out for page read-aloud services. Avoid this example ``` ``` Google ignores this historical value because the sitelinks search box no longer exists. Avoid this example ``` ``` Use robots or googlebot metadata to control indexing. Avoid this example ``` ``` An empty value has no effect and should be omitted. ## Recommendations - 01 Use the Right Google Tag Put indexing, snippet, and translation rules in robots or googlebot metadata. The google name does not replace those tags. - 02 Do Not Use Retired Values Google removed the sitelinks search box feature, so nositelinkssearchbox is now ignored. ## Related documentation - [Google Search Central: Special Tags](https://developers.google.com/search/docs/crawling-indexing/special-tags#nopagereadaloud) - [Google Search Central: Robots Meta Tag](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag#noarchive) ## Related meta tags ### [author](https://zhead.dev/meta/author) name Names one author of the page. Add another author meta tag for each additional author. ``` ``` Names the author exactly as credited on the page. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [description](https://zhead.dev/meta/description) name Summarizes the page for directories and search engines. Google may use it as a search result snippet when it describes the page better than the visible content does. ``` ``` Specific details tell the reader what the recipe covers. ### [google](https://zhead.dev/meta/google) name Carries Google-specific page controls. Google currently documents nopagereadaloud for this metadata name. ``` ``` The documented Google-specific opt-out for page read-aloud services. ### [google-site-verification](https://zhead.dev/meta/google-site-verification) name Verifies ownership of a site in Google Search Console. Google provides the exact token to place on the site’s top-level page. ``` ``` Replace this placeholder with the exact token issued by Search Console. --- - **Page:** google-site-verification · Meta Tag · zhead - **Source:** https://zhead.dev/meta/google-site-verification - **Description:** Verifies ownership of a site in Google Search Console. Google provides the exact token to place on the site’s top-level page. Meta tags # google-site-verification Verifies ownership of a site in Google Search Console. Google provides the exact token to place on the site’s top-level page. ## Code examples Good example ``` ``` Replace this placeholder with the exact token issued by Search Console. Avoid this example ``` ``` An empty value cannot prove control of the site. ## Recommendations - 01 Copy the Token Exactly The content value is case-sensitive and must match the token from Search Console exactly. - 02 Keep It After Verification The token is meant to be public in the HTML. Leave it deployed so Search Console can check ownership again later. - 03 Put It on the Top-Level Page Add the tag to the head of the site’s top-level page. Search Console will not verify a token placed on an unrelated child page. ## Related documentation - [Google Search Central: Special Tags](https://developers.google.com/search/docs/crawling-indexing/special-tags#google-site-verification) - [support.google.com: 9008080](https://support.google.com/webmasters/answer/9008080) ## Related meta tags ### [author](https://zhead.dev/meta/author) name Names one author of the page. Add another author meta tag for each additional author. ``` ``` Names the author exactly as credited on the page. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [description](https://zhead.dev/meta/description) name Summarizes the page for directories and search engines. Google may use it as a search result snippet when it describes the page better than the visible content does. ``` ``` Specific details tell the reader what the recipe covers. ### [google](https://zhead.dev/meta/google) name Carries Google-specific page controls. Google currently documents nopagereadaloud for this metadata name. ``` ``` The documented Google-specific opt-out for page read-aloud services. ### [google-site-verification](https://zhead.dev/meta/google-site-verification) name Verifies ownership of a site in Google Search Console. Google provides the exact token to place on the site’s top-level page. ``` ``` Replace this placeholder with the exact token issued by Search Console. --- - **Page:** googlebot · Meta Tag · zhead - **Source:** https://zhead.dev/meta/googlebot - **Description:** Applies indexing and search presentation rules specifically to Google. Use robots metadata when the same rule should apply to every search engine. Meta tags # googlebot Applies indexing and search presentation rules specifically to Google. Use robots metadata when the same rule should apply to every search engine. ## Parameters noindex Prevents the page from appearing in Google Search results. ``` ``` nofollow Tells Google not to follow links on the page. ``` ``` none Equivalent to noindex, nofollow. ``` ``` nosnippet Prevents a text snippet or video preview in Google Search results. ``` ``` max-snippet:-1 Lets Google choose the text snippet length. ``` ``` max-video-preview:-1 Allows a video preview of any length. ``` ``` max-image-preview:large Allows an image preview as wide as the result viewport. ``` ``` notranslate Prevents Google from offering a translated result for the page. ``` ``` ## Code examples Good example ``` ``` Prevents this page from appearing in Google Search while leaving rules for other search engines unchanged. Good example ``` ``` Limits the text snippet to 120 characters and allows a large image preview. Avoid this example ``` ``` These are Google’s defaults, so writing them adds no restriction. Avoid this example ``` ``` Google does not support crawl-delay in a meta tag or robots.txt. ## Recommendations - 01 Target Only Google When Needed Use googlebot for a Google-specific rule. A robots tag is clearer when all compliant search engines should receive the rule. - 02 Do Not Block the Tag from Crawlers Google must crawl the page to read a noindex rule. Blocking the URL in robots.txt can leave the URL eligible to appear without a snippet. ## Related documentation - [Google Search Central: Robots Meta Tag](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag) ## Related meta tags ### [author](https://zhead.dev/meta/author) name Names one author of the page. Add another author meta tag for each additional author. ``` ``` Names the author exactly as credited on the page. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [description](https://zhead.dev/meta/description) name Summarizes the page for directories and search engines. Google may use it as a search result snippet when it describes the page better than the visible content does. ``` ``` Specific details tell the reader what the recipe covers. ### [google](https://zhead.dev/meta/google) name Carries Google-specific page controls. Google currently documents nopagereadaloud for this metadata name. ``` ``` The documented Google-specific opt-out for page read-aloud services. ### [google-site-verification](https://zhead.dev/meta/google-site-verification) name Verifies ownership of a site in Google Search Console. Google provides the exact token to place on the site’s top-level page. ``` ``` Replace this placeholder with the exact token issued by Search Console. --- - **Page:** mobile-web-app-capable · Meta Tag · zhead - **Source:** https://zhead.dev/meta/mobile-web-app-capable - **Description:** Deprecated pre-manifest hint once used by Chrome for Android to launch a Home Screen site without browser controls. Use a web app manifest today. Meta tags # mobile-web-app-capable Deprecated pre-manifest hint once used by Chrome for Android to launch a Home Screen site without browser controls. Use a web app manifest today. ## Parameters yes Historically requested standalone app mode. ``` ``` no Did not request standalone app mode. ``` ``` ## Code examples Good example ``` ``` The historical value that requested standalone app mode. Avoid this example ``` ``` The legacy hint used yes, not a Boolean string, as its enabling value. ## Recommendations - 01 Use a Manifest Set display to standalone or fullscreen in the web app manifest instead of relying on this deprecated meta element. - 02 Do Not Use It as a PWA Test This hint alone does not provide a start URL, scope, icons, or the other install metadata a manifest supplies. ## Related documentation - [web.dev: Web App Manifest](https://web.dev/learn/pwa/web-app-manifest/) ## Related meta tags ### [apple-itunes-app](https://zhead.dev/meta/apple-itunes-app) name Adds Apple’s Smart App Banner in Safari. The banner opens the installed app or its App Store page. ``` ``` The required parameter with a numeric App Store ID. ### [apple-mobile-web-app-capable](https://zhead.dev/meta/apple-mobile-web-app-capable) name Legacy Apple extension that makes a Home Screen web app open without Safari controls when set to yes. Prefer a web app manifest for a modern PWA. ``` ``` The only value that enables this legacy standalone mode. ### [apple-mobile-web-app-status-bar-style](https://zhead.dev/meta/apple-mobile-web-app-status-bar-style) name Legacy Apple extension that sets the iOS status bar style for a Home Screen web app. It only works when apple-mobile-web-app-capable enables standalone mode. ``` ``` Uses the normal status bar. This is also the default value. ### [apple-mobile-web-app-title](https://zhead.dev/meta/apple-mobile-web-app-title) name Legacy Apple extension that sets the title shown for a Home Screen web app. Without it, iOS uses the page title. ``` ``` A short Home Screen title. ### [mobile-web-app-capable](https://zhead.dev/meta/mobile-web-app-capable) name Deprecated pre-manifest hint once used by Chrome for Android to launch a Home Screen site without browser controls. Use a web app manifest today. ``` ``` The historical value that requested standalone app mode. --- - **Page:** keywords · Meta Tag · zhead - **Source:** https://zhead.dev/meta/keywords - **Description:** Lists comma-separated keywords relevant to the page. HTML still defines the tag, but Google Search ignores it and many other search engines give it little or no weight. Meta tags # keywords Lists comma-separated keywords relevant to the page. HTML still defines the tag, but Google Search ignores it and many other search engines give it little or no weight. ## Code examples Good example ``` ``` A valid set for a page when an internal tool is configured to read the tag. Good example ``` ``` Three relevant tokens in the format defined by HTML. Avoid this example ``` ``` A broad list makes poor input for any tool that relies on the tag. Google ignores it either way. Avoid this example ``` ``` An empty list gives consumers nothing to use and should be omitted. ## Recommendations - 01 Do Not Add It for Google Google Search does not use the keywords meta tag for indexing or ranking. - 02 Use It Only for a Real Consumer A site search tool or content system may read this metadata. If yours does not, omit the tag. - 03 Keep Tokens Relevant When a tool does consume the tag, use a short comma-separated set that actually describes the page. ## Related documentation - [Google Search Central: Special Tags](https://developers.google.com/search/docs/crawling-indexing/special-tags) - [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#meta-keywords) ## Related meta tags ### [author](https://zhead.dev/meta/author) name Names one author of the page. Add another author meta tag for each additional author. ``` ``` Names the author exactly as credited on the page. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [description](https://zhead.dev/meta/description) name Summarizes the page for directories and search engines. Google may use it as a search result snippet when it describes the page better than the visible content does. ``` ``` Specific details tell the reader what the recipe covers. ### [google](https://zhead.dev/meta/google) name Carries Google-specific page controls. Google currently documents nopagereadaloud for this metadata name. ``` ``` The documented Google-specific opt-out for page read-aloud services. ### [google-site-verification](https://zhead.dev/meta/google-site-verification) name Verifies ownership of a site in Google Search Console. Google provides the exact token to place on the site’s top-level page. ``` ``` Replace this placeholder with the exact token issued by Search Console. --- - **Page:** msapplication-config · Meta Tag · zhead - **Source:** https://zhead.dev/meta/msapplication-config - **Description:** Legacy Internet Explorer metadata that points to browserconfig.xml for Windows pinned-site tiles. Modern Chromium-based Edge does not use it. Meta tags # msapplication-config Legacy Internet Explorer metadata that points to browserconfig.xml for Windows pinned-site tiles. Modern Chromium-based Edge does not use it. ## Code examples Good example ``` ``` Points to the configuration file at the site root. Good example ``` ``` Disables automatic browserconfig.xml discovery in supporting legacy browsers. Avoid this example ``` ``` An empty value neither points to a file nor disables discovery. ## Recommendations - 01 Treat It as Legacy Keep this only when you still support Internet Explorer pinned sites. Use a web app manifest for current install metadata. - 02 Use none to stop discovery Internet Explorer checks /browserconfig.xml by default. Set this property to none when you want to stop that lookup. ## Related documentation - [Microsoft Learn: Dn320426(V=Vs.85)]() - [web.dev: Web App Manifest](https://web.dev/learn/pwa/web-app-manifest/) ## Related meta tags ### [application-name](https://zhead.dev/meta/application-name) name Gives browsers a short name for the web application represented by the page. A browser may use it instead of the page title in bookmarks or other interface labels. ``` ``` A short application name that stays useful when the page title changes. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [color-scheme](https://zhead.dev/meta/color-scheme) name Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls. ``` ``` Declares support for both common schemes, with light listed first as the fallback preference. ### [default-style](https://zhead.dev/meta/default-style) http-equiv Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited. ``` ``` Valid when a linked stylesheet set has the exact title Main Style. ### [format-detection](https://zhead.dev/meta/format-detection) name An Apple extension that can stop Safari on iOS from turning text that looks like a telephone number into a call link. ``` ``` The value documented by Apple for disabling automatic telephone links in Safari on iOS. --- - **Page:** googlebot-news · Meta Tag · zhead - **Source:** https://zhead.dev/meta/googlebot-news - **Description:** Applies Google robots rules to news results. Use it when Google News should handle a page differently from Google’s text results. Meta tags # googlebot-news Applies Google robots rules to news results. Use it when Google News should handle a page differently from Google’s text results. ## Parameters noindex Prevents the page from appearing in Google News results. ``` ``` nofollow Tells Google not to follow links on the page for news results. ``` ``` nosnippet Prevents a text snippet or video preview in Google News results. ``` ``` max-snippet:-1 Lets Google choose the text snippet length. ``` ``` max-image-preview:large Allows an image preview as wide as the result viewport. ``` ``` ## Code examples Good example ``` ``` Hides the snippet in Google News without applying that restriction to all Google text results. Good example ``` ``` Allows Google News to show a larger preview image for the page. Avoid this example ``` ``` This is not a supported Google robots rule. Avoid this example ``` ``` Google no longer provides cached links, so it ignores noarchive. ## Recommendations - 01 Use It Only for a News Override General robots rules already apply to Google News. Add this tag only when news results need a different restriction. - 02 Keep Web and News Rules Separate For example, googlebot-news nosnippet can hide a news snippet while leaving the Google text result snippet available. - 03 Let Google Read the Rule Do not block crawling of the page in robots.txt. Google must fetch the page before it can see this tag. ## Related documentation - [Google Search Central: Robots Meta Tag](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag#robotsmeta) ## Related meta tags ### [author](https://zhead.dev/meta/author) name Names one author of the page. Add another author meta tag for each additional author. ``` ``` Names the author exactly as credited on the page. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [description](https://zhead.dev/meta/description) name Summarizes the page for directories and search engines. Google may use it as a search result snippet when it describes the page better than the visible content does. ``` ``` Specific details tell the reader what the recipe covers. ### [google](https://zhead.dev/meta/google) name Carries Google-specific page controls. Google currently documents nopagereadaloud for this metadata name. ``` ``` The documented Google-specific opt-out for page read-aloud services. ### [google-site-verification](https://zhead.dev/meta/google-site-verification) name Verifies ownership of a site in Google Search Console. Google provides the exact token to place on the site’s top-level page. ``` ``` Replace this placeholder with the exact token issued by Search Console. --- - **Page:** publisher · Meta Tag · zhead - **Source:** https://zhead.dev/meta/publisher - **Description:** Adds a custom publisher value to the document. The bare publisher name has no standard HTML meaning and Google does not document it as supported metadata. Meta tags # publisher Adds a custom publisher value to the document. The bare publisher name has no standard HTML meaning and Google does not document it as supported metadata. ## Code examples Good example ``` ``` A clear organization name for an integration that expects a plain publisher value. Good example ``` ``` An abbreviation can work when it is the publisher name required by the consuming system. Avoid this example ``` ``` An ambiguous label is poor metadata for a consumer that expects an organization name. Avoid this example ``` ``` An empty custom value gives its consumer nothing to use. ## Recommendations - 01 Do Not Expect an SEO Effect Search engines may ignore custom metadata. Use visible publisher information and supported structured data when attribution matters in search. - 02 Use It for a Documented Consumer Add this tag only when a publishing system or integration explicitly expects the publisher metadata name and defines its value format. ## Related documentation - [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#other-metadata-names) - [Google Search Central: Special Tags](https://developers.google.com/search/docs/crawling-indexing/special-tags) ## Related meta tags ### [author](https://zhead.dev/meta/author) name Names one author of the page. Add another author meta tag for each additional author. ``` ``` Names the author exactly as credited on the page. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [description](https://zhead.dev/meta/description) name Summarizes the page for directories and search engines. Google may use it as a search result snippet when it describes the page better than the visible content does. ``` ``` Specific details tell the reader what the recipe covers. ### [google](https://zhead.dev/meta/google) name Carries Google-specific page controls. Google currently documents nopagereadaloud for this metadata name. ``` ``` The documented Google-specific opt-out for page read-aloud services. ### [google-site-verification](https://zhead.dev/meta/google-site-verification) name Verifies ownership of a site in Google Search Console. Google provides the exact token to place on the site’s top-level page. ``` ``` Replace this placeholder with the exact token issued by Search Console. --- - **Page:** msapplication-TileImage · Meta Tag · zhead - **Source:** https://zhead.dev/meta/msapplication-tileimage - **Description:** Legacy Internet Explorer metadata for the image on a website tile pinned to the Windows 8 Start screen. Modern Chromium-based Edge does not use it. Meta tags # msapplication-TileImage Legacy Internet Explorer metadata for the image on a website tile pinned to the Windows 8 Start screen. Modern Chromium-based Edge does not use it. ## Code examples Good example ``` ``` A root-relative path to the legacy 144 × 144 tile image. Good example ``` ``` An absolute URL to the correctly sized PNG is also valid. Avoid this example ``` ``` Does not match the square Windows 8 tile image format. Avoid this example ``` ``` An empty value identifies no tile image. Omit this legacy tag instead. ## Recommendations - 01 Use Square Images The original Windows 8 guidance calls for a 144 × 144 pixel PNG. - 02 Treat It as Legacy Keep this only when you still support Windows 8 pinned sites. Use manifest icons for current PWAs. - 03 Pair It with a Color Use msapplication-TileColor for the legacy tile background behind transparent pixels. ## Related documentation - [Microsoft Learn: Dn255024(V=Vs.85)]() - [web.dev: Web App Manifest](https://web.dev/learn/pwa/web-app-manifest/) ## Related meta tags ### [apple-itunes-app](https://zhead.dev/meta/apple-itunes-app) name Adds Apple’s Smart App Banner in Safari. The banner opens the installed app or its App Store page. ``` ``` The required parameter with a numeric App Store ID. ### [apple-mobile-web-app-capable](https://zhead.dev/meta/apple-mobile-web-app-capable) name Legacy Apple extension that makes a Home Screen web app open without Safari controls when set to yes. Prefer a web app manifest for a modern PWA. ``` ``` The only value that enables this legacy standalone mode. ### [apple-mobile-web-app-status-bar-style](https://zhead.dev/meta/apple-mobile-web-app-status-bar-style) name Legacy Apple extension that sets the iOS status bar style for a Home Screen web app. It only works when apple-mobile-web-app-capable enables standalone mode. ``` ``` Uses the normal status bar. This is also the default value. ### [apple-mobile-web-app-title](https://zhead.dev/meta/apple-mobile-web-app-title) name Legacy Apple extension that sets the title shown for a Home Screen web app. Without it, iOS uses the page title. ``` ``` A short Home Screen title. ### [mobile-web-app-capable](https://zhead.dev/meta/mobile-web-app-capable) name Deprecated pre-manifest hint once used by Chrome for Android to launch a Home Screen site without browser controls. Use a web app manifest today. ``` ``` The historical value that requested standalone app mode. --- - **Page:** msapplication-TileColor · Meta Tag · zhead - **Source:** https://zhead.dev/meta/msapplication-tilecolor - **Description:** Legacy Internet Explorer metadata for the background color of a website tile pinned to the Windows 8 Start screen. Modern Chromium-based Edge does not use it. Meta tags # msapplication-TileColor Legacy Internet Explorer metadata for the background color of a website tile pinned to the Windows 8 Start screen. Modern Chromium-based Edge does not use it. ## Code examples Good example ``` ``` A valid hexadecimal tile color. Good example ``` ``` Another valid hexadecimal color. Avoid this example ``` ``` Missing the # prefix required by this hexadecimal form. Avoid this example ``` ``` Not a CSS color value. ## Recommendations - 01 Treat It as Legacy Keep this only when you still support Windows 8 pinned sites. Use manifest theme\_color for current PWAs. - 02 Check Icon Contrast Choose a color that keeps the legacy tile image readable. ## Related documentation - [Microsoft Learn: App Icon Construction](https://learn.microsoft.com/en-us/windows/apps/design/iconography/app-icon-construction) - [web.dev: Web App Manifest](https://web.dev/learn/pwa/web-app-manifest/) ## Related meta tags ### [application-name](https://zhead.dev/meta/application-name) name Gives browsers a short name for the web application represented by the page. A browser may use it instead of the page title in bookmarks or other interface labels. ``` ``` A short application name that stays useful when the page title changes. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [color-scheme](https://zhead.dev/meta/color-scheme) name Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls. ``` ``` Declares support for both common schemes, with light listed first as the fallback preference. ### [default-style](https://zhead.dev/meta/default-style) http-equiv Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited. ``` ``` Valid when a linked stylesheet set has the exact title Main Style. ### [format-detection](https://zhead.dev/meta/format-detection) name An Apple extension that can stop Safari on iOS from turning text that looks like a telephone number into a call link. ``` ``` The value documented by Apple for disabling automatic telephone links in Safari on iOS. --- - **Page:** rating · Meta Tag · zhead - **Source:** https://zhead.dev/meta/rating - **Description:** Marks a page as containing sexually explicit adult content so Google can filter it in SafeSearch. It is not a general age rating system. Meta tags # rating Marks a page as containing sexually explicit adult content so Google can filter it in SafeSearch. It is not a general age rating system. ## Parameters adult Marks the page as containing sexually explicit adult content. ``` ``` RTA-5042-1996-1400-1577-RTA An equivalent RTA label that Google also recognizes as explicit. ``` ``` ## Code examples Good example ``` ``` The simple value Google recommends for a page with sexually explicit content. Good example ``` ``` The equivalent RTA value recognized by Google. You only need one of the two supported values. Avoid this example ``` ``` Google does not use this tag to certify that a page is suitable for every age. Avoid this example ``` ``` This is not a supported SafeSearch rating value. ## Recommendations - 01 Mark Every Explicit Page Google recommends adding the tag to each page with sexually explicit content. - 02 Use One Supported Value Choose adult or the RTA label. Both mean the same thing to Google, so adding both is unnecessary. ## Related documentation - [Google Search Central: Guidelines](https://developers.google.com/search/docs/specialty/explicit/guidelines#add-metadata) - [Google Search Central: Special Tags](https://developers.google.com/search/docs/crawling-indexing/special-tags#rating) ## Related meta tags ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [creator](https://zhead.dev/meta/creator) name Adds a custom creator value to the document. The bare creator name has no standard HTML meaning, so it works only when a known consumer expects it. ``` ``` A sensible value when a documented integration expects a plain creator name. ### [generator](https://zhead.dev/meta/generator) name Names one of the software packages that generated the HTML document. Leave it out when a person wrote the markup directly. ``` ``` Names the software that generated the document. ### [rating](https://zhead.dev/meta/rating) name Marks a page as containing sexually explicit adult content so Google can filter it in SafeSearch. It is not a general age rating system. ``` ``` The simple value Google recommends for a page with sexually explicit content. --- - **Page:** referrer · Meta Tag · zhead - **Source:** https://zhead.dev/meta/referrer - **Description:** Sets the document’s default Referrer-Policy. The policy controls whether requests reveal the full page URL, only its origin, or no referrer information. Meta tags # referrer Sets the document’s default Referrer-Policy. The policy controls whether requests reveal the full page URL, only its origin, or no referrer information. ## Parameters no-referrer Sends no referrer information. ``` ``` no-referrer-when-downgrade Sends the full URL unless a secure page requests an insecure resource. ``` ``` origin Sends only the document origin. ``` ``` origin-when-cross-origin Sends the full URL to the same origin and only the origin elsewhere. ``` ``` same-origin Sends the full URL to the same origin and no referrer elsewhere. ``` ``` strict-origin Sends only the origin, and sends nothing on a downgrade from HTTPS to HTTP. ``` ``` strict-origin-when-cross-origin Sends the full URL to the same origin, only the origin across equally secure origins, and nothing on an HTTPS to HTTP downgrade. ``` ``` unsafe-url Sends the full URL with same-origin and cross-origin requests, including HTTPS to HTTP downgrades. ``` ``` ## Code examples Good example ``` ``` Keeps full referrers within the site and sends no referrer to other origins. Good example ``` ``` The current default balances same-origin diagnostics with less cross-origin disclosure. Avoid this example ``` ``` This misspelling is not the standard policy token. Use strict-origin-when-cross-origin. Avoid this example ``` ``` This sends full URLs across origins and even on HTTPS to HTTP downgrades, so it can reveal path and query data. ## Recommendations - 01 Know the Current Default The modern default is strict-origin-when-cross-origin. Add this tag when the page needs a different policy, or when you want the choice to be explicit. - 02 Avoid Secrets in URLs A stricter policy reduces referrer disclosure, but sensitive data still does not belong in paths or query strings. ## Related documentation - [w3c.github.io: Webappsec Referrer Policy](https://w3c.github.io/webappsec-referrer-policy/) - [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#meta-referrer) ## Related meta tags ### [Content-Security-Policy](https://zhead.dev/meta/content-security-policy) http-equiv Enforces a Content Security Policy from the document head. A policy limits where scripts, styles, images, connections, and other resources can come from, which reduces the impact of content injection bugs. ``` ``` Uses the same origin by default, blocks plugin content, and limits base URLs to the same origin. ### [referrer](https://zhead.dev/meta/referrer) name Sets the document’s default Referrer-Policy. The policy controls whether requests reveal the full page URL, only its origin, or no referrer information. ``` ``` Keeps full referrers within the site and sends no referrer to other origins. ### [refresh](https://zhead.dev/meta/refresh) http-equiv Reloads the current page after a delay or performs a timed redirect. Automatic navigation can confuse users, so a server redirect is usually a better choice. ``` ``` Valid timed redirect syntax. Prefer an HTTP redirect unless the visible delay serves a real purpose. --- - **Page:** theme-color · Meta Tag · zhead - **Source:** https://zhead.dev/meta/theme-color - **Description:** Suggests a color that browsers may use around the page, such as a title bar, tab highlight, or task switcher card. Meta tags # theme-color Suggests a color that browsers may use around the page, such as a title bar, tab highlight, or task switcher card. ## Code examples Good example ``` ``` A valid CSS hex color that browsers can use around the page. Good example ``` ``` Named CSS colors are valid values, though a precise brand color is usually more useful. Avoid this example ``` ``` An incomplete hex color is invalid and will be ignored. Avoid this example ``` ``` A design token name is not a CSS color value. ## Recommendations - 01 Use a Valid CSS Color The content can use any supported CSS color syntax, including named colors. Browsers ignore values they cannot parse. - 02 Match Light and Dark Themes Add separate theme-color tags with unique media queries when the surrounding browser color should change with the page theme. - 03 Treat It as a Suggestion Support and placement vary by browser. Check the result on the browsers your audience uses. ## Related documentation - [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color) ## Related meta tags ### [application-name](https://zhead.dev/meta/application-name) name Gives browsers a short name for the web application represented by the page. A browser may use it instead of the page title in bookmarks or other interface labels. ``` ``` A short application name that stays useful when the page title changes. ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. ### [color-scheme](https://zhead.dev/meta/color-scheme) name Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls. ``` ``` Declares support for both common schemes, with light listed first as the fallback preference. ### [default-style](https://zhead.dev/meta/default-style) http-equiv Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited. ``` ``` Valid when a linked stylesheet set has the exact title Main Style. ### [format-detection](https://zhead.dev/meta/format-detection) name An Apple extension that can stop Safari on iOS from turning text that looks like a telephone number into a call link. ``` ``` The value documented by Apple for disabling automatic telephone links in Safari on iOS. --- - **Page:** twitter:app:id:ipad · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-app-id-ipad - **Description:** Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. Meta tags # twitter:app:id:ipad Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ## Code examples Good example ``` ``` The numeric App Store ID once used by App Cards. Avoid this example ``` ``` An App Store ID is numeric. Good example ``` ``` Another valid numeric ID format. Avoid this example ``` ``` An empty value identifies no app. ## Recommendations - 01 Use the Store ID Copy the numeric ID from the app’s App Store URL, without the id prefix. - 02 Legacy Field Test the result on X before relying on it. The detailed official App Card documentation is no longer published. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:app:id:iphone · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-app-id-iphone - **Description:** Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. Meta tags # twitter:app:id:iphone Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ## Code examples Good example ``` ``` The numeric App Store ID for the former Twitter iPhone app. Avoid this example ``` ``` An App Store ID is numeric. Avoid this example ``` ``` An empty value identifies no app. ## Recommendations - 01 Use the Store ID Copy the numeric ID from the app’s App Store URL, without the id prefix. - 02 Legacy Field Test the result on X before relying on it. The detailed official App Card documentation is no longer published. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:app:name:ipad · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-app-name-ipad - **Description:** Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. Meta tags # twitter:app:name:ipad Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ## Code examples Good example ``` ``` A plain app name that matches the store listing. Avoid this example ``` ``` An empty value names no app. ## Recommendations - 01 Match the App Store Use the app name shown on its published App Store listing. - 02 Legacy Field Test the result on X before relying on it. The detailed official App Card documentation is no longer published. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:app:id:googleplay · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-app-id-googleplay - **Description:** Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. Meta tags # twitter:app:id:googleplay Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ## Code examples Good example ``` ``` A conventional Android application ID. Avoid this example ``` ``` An app display name is not its Android application ID. ## Recommendations - 01 Use the Application ID Copy the application ID from the published Google Play listing, such as com.example.app. - 02 Legacy Field Test the result on X before relying on it. The detailed official App Card documentation is no longer published. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) - [developer.android.com: Configure App Module](https://developer.android.com/build/configure-app-module#set-application-id) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:app:name:iphone · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-app-name-iphone - **Description:** Legacy Twitter App Card field for the name of an iPhone app. X has retired its public App Card reference. Meta tags # twitter:app:name:iphone Legacy Twitter App Card field for the name of an iPhone app. X has retired its public App Card reference. ## Code examples Good example ``` ``` A plain app name that matches the store listing. Avoid this example ``` ``` Adds promotional copy that is not part of the app name. ## Recommendations - 01 Match the App Store Use the app name shown on its published App Store listing. - 02 Legacy Field Test the result on X before relying on it. The detailed official App Card documentation is no longer published. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:app:name:googleplay · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-app-name-googleplay - **Description:** Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. Meta tags # twitter:app:name:googleplay Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ## Code examples Good example ``` ``` A short app name that matches the store listing. Avoid this example ``` ``` Adds promotional copy that is not part of the app name. ## Recommendations - 01 Match Google Play Use the app name shown on its published Google Play listing. - 02 Legacy Field Test the result on X before relying on it. The detailed official App Card documentation is no longer published. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:app:url:ipad · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-app-url-ipad - **Description:** Legacy Twitter App Card field for an iPad app’s custom URL scheme. It is a deep link, not an App Store URL. X has retired its public App Card reference. Meta tags # twitter:app:url:ipad Legacy Twitter App Card field for an iPad app’s custom URL scheme. It is a deep link, not an App Store URL. X has retired its public App Card reference. ## Code examples Good example ``` ``` A custom scheme deep link handled by the iPad app. Avoid this example ``` ``` A relative path is not an app URL scheme. Avoid this example ``` ``` This historical field expected the app’s custom URL scheme, not its store page. ## Recommendations - 01 Use a Tested Deep Link Provide a custom scheme URL that the iPad app handles and that opens the matching content. - 02 Legacy Field Test the result on X before relying on it. The detailed official App Card documentation is no longer published. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:app:url:googleplay · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-app-url-googleplay - **Description:** Legacy Twitter App Card field for an Android app’s custom URL scheme. It is a deep link, not a Google Play listing URL. X has retired its public App Card reference. Meta tags # twitter:app:url:googleplay Legacy Twitter App Card field for an Android app’s custom URL scheme. It is a deep link, not a Google Play listing URL. X has retired its public App Card reference. ## Code examples Good example ``` ``` A custom scheme deep link handled by the Android app. Avoid this example ``` ``` This historical field expected the app’s custom URL scheme, not its store page. Avoid this example ``` ``` An empty value provides no deep link. ## Recommendations - 01 Use a Tested Deep Link Provide a custom scheme URL that the Android app handles and that opens the matching content. - 02 Legacy Field Test the result on X before relying on it. The detailed official App Card documentation is no longer published. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:app:url:iphone · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-app-url-iphone - **Description:** Legacy Twitter App Card field for an iPhone app’s custom URL scheme. X has retired its public App Card reference. Meta tags # twitter:app:url:iphone Legacy Twitter App Card field for an iPhone app’s custom URL scheme. X has retired its public App Card reference. ## Code examples Good example ``` ``` A custom scheme deep link handled by the app. Good example ``` ``` Opens a specific article in the app. Avoid this example ``` ``` A web URL is not the custom app scheme this historical field expected. Avoid this example ``` ``` Invalid when the app has no route for this path. ## Recommendations - 01 Use a Tested Deep Link Provide a custom scheme URL that the iPhone app handles and that opens the matching content. - 02 Legacy Field Test the result on X before relying on it. The detailed official App Card documentation is no longer published. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:creator · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-creator - **Description:** Attributes the page’s content to an X account using its @handle. The metadata name retains the twitter: prefix. Meta tags # twitter:creator Attributes the page’s content to an X account using its @handle. The metadata name retains the twitter: prefix. ## Code examples Good example ``` ``` A creator handle with the required @ prefix. Good example ``` ``` Valid when the brand created the content. Avoid this example ``` ``` Missing the @ prefix used by this field. Avoid this example ``` ``` An empty value identifies no account. Omit the optional field instead. ## Recommendations - 01 Include the @ Symbol Write the account handle exactly as it appears on X, including the leading @. - 02 Credit the Content Creator Use twitter:site for the publication account and twitter:creator for the author or maker. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:creator:id · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-creator-id - **Description:** Attributes the page’s content to an X account using its numeric user ID. Use twitter:creator when you know the @handle. Meta tags # twitter:creator:id Attributes the page’s content to an X account using its numeric user ID. Use twitter:creator when you know the @handle. ## Code examples Good example ``` ``` A numeric X user ID. Avoid this example ``` ``` A handle belongs in twitter:creator. Avoid this example ``` ``` A username is not a numeric user ID. Avoid this example ``` ``` An empty value identifies no account. Omit the optional field instead. ## Recommendations - 01 Use the Numeric ID X user IDs are stable numeric strings. Do not put a handle in this field. - 02 Use Without "@" The @ prefix belongs in twitter:creator, not in the numeric ID field. ## Related documentation - [docs.x.com: X Ids](https://docs.x.com/fundamentals/x-ids) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:card · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-card - **Description:** Selects the X Card format for a page. The metadata still uses the twitter: prefix. Meta tags # twitter:card Selects the X Card format for a page. The metadata still uses the twitter: prefix. ## Parameters summary A card with a small image, title, and description. ``` ``` summary\_large\_image Similar to "summary" but with a larger image. ``` ``` app A card to represent a mobile app with direct download. ``` ``` player A card that can display audio, video, or other media. ``` ``` ## Code examples Good example ``` ``` A defined card type for a preview with a large image. Good example ``` ``` The defined value for the legacy App Card fields. Avoid this example ``` ``` Not a defined card value. Use summary\_large\_image. Avoid this example ``` ``` Not a defined card value. Use player. ## Recommendations - 01 Choose the Right Card Type Use summary for a compact preview, summary\_large\_image for a wide image, player for embedded media, or app for legacy app metadata. - 02 Use name, Not property X Card examples use the HTML name attribute for twitter:\* fields. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:data2 · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-data2 - **Description:** Unsupported legacy Product Card field for the second custom value. X no longer supports Product Cards or publishes this field in its developer documentation. Meta tags # twitter:data2 Unsupported legacy Product Card field for the second custom value. X no longer supports Product Cards or publishes this field in its developer documentation. ## Code examples Avoid this example ``` ``` A historical custom value in a field X no longer supports. Avoid this example ``` ``` Still unsupported, even when paired with twitter:label2. Avoid this example ``` ``` The field is unsupported regardless of value format. Avoid this example ``` ``` The field is unsupported and will not create a working call to action. ## Recommendations - 01 Remove This Field X retired the Product Card format that displayed twitter:data2. - 02 Do Not Rely on Rendering Keep important product facts visible on the page. X does not promise to show this metadata. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:data1 · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-data1 - **Description:** Unsupported legacy Product Card field for the first custom value. X no longer supports Product Cards or publishes this field in its developer documentation. Meta tags # twitter:data1 Unsupported legacy Product Card field for the first custom value. X no longer supports Product Cards or publishes this field in its developer documentation. ## Code examples Avoid this example ``` ``` A historical custom value in a field X no longer supports. Avoid this example ``` ``` Still unsupported, even when paired with twitter:label1. Avoid this example ``` ``` The field is unsupported regardless of value length. Avoid this example ``` ``` An empty unsupported field should be removed. ## Recommendations - 01 Remove This Field X retired the Product Card format that displayed twitter:data1. - 02 Do Not Rely on Rendering Keep important product facts visible on the page. X does not promise to show this metadata. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:image:alt · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-image-alt - **Description:** Describes the image in twitter:image for people who cannot see it. The metadata name retains the twitter: prefix. Meta tags # twitter:image:alt Describes the image in twitter:image for people who cannot see it. The metadata name retains the twitter: prefix. ## Code examples Good example ``` ``` Names the main subjects and setting. Good example ``` ``` Includes the useful values from the chart. Avoid this example ``` ``` Too vague to identify the person or what they are doing. Avoid this example ``` ``` A filename does not describe the chart. ## Recommendations - 01 Describe This Image State the useful subject, action, and visible text without padding the description. - 02 Avoid Redundancy Skip phrases such as “image of” when the description reads clearly without them. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) - [W3C: Images](https://www.w3.org/WAI/tutorials/images/) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:description · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-description - **Description:** Provides the description used in an X Card link preview. The metadata name retains the twitter: prefix. Meta tags # twitter:description Provides the description used in an X Card link preview. The metadata name retains the twitter: prefix. ## Code examples Good example ``` ``` Explains the subject in one specific sentence. Good example ``` ``` Names the product, version, and contents of the page. Avoid this example ``` ``` An empty value describes nothing. Omit the optional field instead. Avoid this example ``` ``` Too vague to explain what the page contains. ## Recommendations - 01 Describe the Page X may truncate long descriptions. Start with the detail that helps a reader understand the page. - 02 Keep It Accurate Use a specific summary rather than keywords or promotional filler. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:image · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-image - **Description:** Provides the image URL used in an X Card link preview. The metadata name retains the twitter: prefix. Meta tags # twitter:image Provides the image URL used in an X Card link preview. The metadata name retains the twitter: prefix. ## Code examples Good example ``` ``` An absolute URL to a public image. Avoid this example ``` ``` Use an absolute URL so X resolves the intended resource. Avoid this example ``` ``` A local file URL cannot be fetched from the web. ## Recommendations - 01 Match the Card Type Summary and summary\_large\_image cards use different crops. Keep the important subject clear in either layout you support. - 02 Use Absolute URLs Choose a public image URL that X can fetch without cookies or authentication. - 03 Add Alternative Text Use twitter:image:alt to describe the image for people who cannot see it. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:image:height · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-image-height - **Description:** Unsupported X Card field. The retired tag reference documented twitter:image and twitter:image:alt, but not twitter:image:height. Use og:image:height for Open Graph consumers. Meta tags # twitter:image:height Unsupported X Card field. The retired tag reference documented twitter:image and twitter:image:alt, but not twitter:image:height. Use og:image:height for Open Graph consumers. ## Code examples Avoid this example ``` ``` The number is plausible, but X does not define this metadata field. Avoid this example ``` ``` Still unsupported, regardless of the number. Avoid this example ``` ``` Still unsupported, regardless of the number. ## Recommendations - 01 Remove This Field X Card metadata does not define a separate image height tag. - 02 Use Open Graph When Needed Declare the actual pixel height with og:image:height after og:image. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:image:type · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-image-type - **Description:** Unsupported X Card field. The retired tag reference documented twitter:image and twitter:image:alt, but not twitter:image:type. Use og:image:type for Open Graph consumers. Meta tags # twitter:image:type Unsupported X Card field. The retired tag reference documented twitter:image and twitter:image:alt, but not twitter:image:type. Use og:image:type for Open Graph consumers. ## Code examples Avoid this example ``` ``` A valid MIME type in an unsupported X Card field. Avoid this example ``` ``` A valid MIME type in an unsupported X Card field. Avoid this example ``` ``` The field itself is unsupported, regardless of the media type. Avoid this example ``` ``` An empty unsupported field should be removed. ## Recommendations - 01 Remove This Field X Card metadata does not define a separate image MIME type tag. - 02 Use Open Graph When Needed Declare the served media type with og:image:type after og:image. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:label1 · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-label1 - **Description:** Unsupported legacy Product Card field for the first custom label. X no longer supports Product Cards or publishes this field in its developer documentation. Meta tags # twitter:label1 Unsupported legacy Product Card field for the first custom label. X no longer supports Product Cards or publishes this field in its developer documentation. ## Code examples Avoid this example ``` ``` A historical custom label in a field X no longer supports. Avoid this example ``` ``` Still unsupported, even when paired with twitter:data1. Avoid this example ``` ``` The field is unsupported regardless of value length. Avoid this example ``` ``` An empty unsupported field should be removed. ## Recommendations - 01 Remove This Field X retired the Product Card format that displayed twitter:label1. - 02 Do Not Rely on Rendering Keep important product labels visible on the page. X does not promise to show this metadata. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:image:width · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-image-width - **Description:** Unsupported X Card field. The retired tag reference documented twitter:image and twitter:image:alt, but not twitter:image:width. Use og:image:width for Open Graph consumers. Meta tags # twitter:image:width Unsupported X Card field. The retired tag reference documented twitter:image and twitter:image:alt, but not twitter:image:width. Use og:image:width for Open Graph consumers. ## Code examples Avoid this example ``` ``` The number is plausible, but X does not define this metadata field. Avoid this example ``` ``` Still unsupported, regardless of the number. Avoid this example ``` ``` Still unsupported, regardless of the number. Avoid this example ``` ``` An empty unsupported field should be removed. ## Recommendations - 01 Remove This Field X Card metadata does not define a separate image width tag. - 02 Use Open Graph When Needed Declare the actual pixel width with og:image:width after og:image. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:player · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-player - **Description:** Provides the HTTPS iframe URL for an X Player Card. X has retired the detailed public tag reference, so test current rendering before depending on it. Meta tags # twitter:player Provides the HTTPS iframe URL for an X Player Card. X has retired the detailed public tag reference, so test current rendering before depending on it. ## Code examples Good example ``` ``` An HTTPS URL to the embeddable player page. Avoid this example ``` ``` The historical field required HTTPS. Avoid this example ``` ``` An empty value provides no player URL. ## Recommendations - 01 Use HTTPS The historical Player Card requirements called for an HTTPS iframe URL. - 02 Declare the Dimensions Add twitter:player:width and twitter:player:height with the iframe’s pixel dimensions. - 03 Test the Embed Confirm the iframe works without cookies, plugins, or browser permissions that X cannot provide. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:label2 · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-label2 - **Description:** Unsupported legacy Product Card field for the second custom label. X no longer supports Product Cards or publishes this field in its developer documentation. Meta tags # twitter:label2 Unsupported legacy Product Card field for the second custom label. X no longer supports Product Cards or publishes this field in its developer documentation. ## Code examples Avoid this example ``` ``` A historical custom label in a field X no longer supports. Avoid this example ``` ``` Still unsupported, even when paired with twitter:data2. Avoid this example ``` ``` The field is unsupported regardless of value length. Avoid this example ``` ``` An empty unsupported field should be removed. ## Recommendations - 01 Remove This Field X retired the Product Card format that displayed twitter:label2. - 02 Do Not Rely on Rendering Keep important product labels visible on the page. X does not promise to show this metadata. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:player:stream · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-player-stream - **Description:** Legacy optional Player Card field for a direct video or audio stream URL. X no longer publishes this field in its developer documentation. Meta tags # twitter:player:stream Legacy optional Player Card field for a direct video or audio stream URL. X no longer publishes this field in its developer documentation. ## Code examples Good example ``` ``` A direct HTTPS media resource in the historical field. Good example ``` ``` A direct HTTPS audio resource. Avoid this example ``` ``` The historical Player Card requirements called for HTTPS. Avoid this example ``` ``` A player page belongs in twitter:player, not in the direct stream field. ## Recommendations - 01 Use a Direct HTTPS Resource Point to the media stream itself, not to the iframe player page. - 02 Legacy Field Test the result on X before relying on it. The detailed official Player Card documentation is no longer published. - 03 Keep the Iframe URL This optional stream did not replace the required twitter:player iframe URL. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:player:height · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-player-height - **Description:** Sets the iframe height, in pixels, for an X Player Card. X has retired the detailed public tag reference. Meta tags # twitter:player:height Sets the iframe height, in pixels, for an X Player Card. X has retired the detailed public tag reference. ## Code examples Good example ``` ``` Declares a player iframe 320 pixels high. Good example ``` ``` Valid when the iframe is actually 480 pixels high. Avoid this example ``` ``` The field expects an integer pixel count. Avoid this example ``` ``` Do not include a CSS unit. ## Recommendations - 01 Match Player Dimensions Use the actual iframe height as an integer without a unit. - 02 Use with twitter:player:width Declare both integer dimensions next to the twitter:player URL. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:player:width · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-player-width - **Description:** Sets the iframe width, in pixels, for an X Player Card. X has retired the detailed public tag reference. Meta tags # twitter:player:width Sets the iframe width, in pixels, for an X Player Card. X has retired the detailed public tag reference. ## Code examples Good example ``` ``` Declares a player iframe 435 pixels wide. Good example ``` ``` Valid when the iframe is actually 600 pixels wide. Avoid this example ``` ``` Do not include a CSS unit. Avoid this example ``` ``` The field expects an integer pixel count. ## Recommendations - 01 Match the Player Use the actual iframe width as an integer without a unit. - 02 Use with twitter:player:height Declare both integer dimensions next to the twitter:player URL. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:site · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-site - **Description:** Attributes the website or publication to an X account using its @handle. The metadata name retains the twitter: prefix. Meta tags # twitter:site Attributes the website or publication to an X account using its @handle. The metadata name retains the twitter: prefix. ## Code examples Good example ``` ``` A site handle with the required @ prefix. Avoid this example ``` ``` Missing the @ prefix used by this field. Avoid this example ``` ``` The field accepts one account handle, not a space-separated list. ## Recommendations - 01 Include the @ Symbol Write the account handle exactly as it appears on X, including the leading @. - 02 Credit the Publication Use twitter:creator separately when an individual author or maker also needs credit. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** article:author · Meta Tag · zhead - **Source:** https://zhead.dev/meta/article-author - **Description:** Links an article to one or more author profiles. The value is a URL, and you can repeat the property for multiple authors. Open Graph metadata # article:author Links an article to one or more author profiles. The value is a URL, and you can repeat the property for multiple authors. ## Code examples Good example ``` ``` Points to John Doe’s profile page. Good example ``` ``` A second property like this can identify a coauthor. Avoid this example ``` ``` A plain name is not a profile URL. Avoid this example ``` ``` An empty value identifies no author. ## Recommendations - 01 Link to a Profile Use the canonical URL of a page that describes the author. A name or social handle is not the profile object expected by Open Graph. - 02 Repeat for Coauthors Add one article:author property per author. Keep each URL directly after the article metadata it belongs to. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [article:author](https://zhead.dev/meta/article-author) property Links an article to one or more author profiles. The value is a URL, and you can repeat the property for multiple authors. ``` ``` Points to John Doe’s profile page. ### [article:expiration\_time](https://zhead.dev/meta/article-expiration-time) property Sets the date and time after which an article is out of date. Open Graph defines the value as an ISO 8601 datetime. ``` ``` Sets the expiry to a precise UTC instant. ### [article:modified\_time](https://zhead.dev/meta/article-modified-time) property Records when an article was last changed. Open Graph defines the value as an ISO 8601 datetime. ``` ``` A complete UTC timestamp that parsers can read consistently. ### [article:published\_time](https://zhead.dev/meta/article-published-time) property Records when an article was first published. Use it with og:type set to article. ``` ``` A publication time expressed in UTC. ### [article:section](https://zhead.dev/meta/article-section) property Names the high-level section that contains an article, such as Technology or Culture. ``` ``` A clear section name used across a publication. --- - **Page:** twitter:site:id · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-site-id - **Description:** Attributes the website or publication to an X account using its numeric user ID. Use twitter:site when you know the @handle. Meta tags # twitter:site:id Attributes the website or publication to an X account using its numeric user ID. Use twitter:site when you know the @handle. ## Code examples Good example ``` ``` A numeric X user ID. Avoid this example ``` ``` A handle belongs in twitter:site. Avoid this example ``` ``` An empty value identifies no account. Omit the optional field instead. ## Recommendations - 01 Use the Numeric ID X user IDs are stable numeric strings. Do not put a handle in this field. - 02 Use site for Handles The @ prefix and username belong in twitter:site, not in this numeric ID field. ## Related documentation - [docs.x.com: X Ids](https://docs.x.com/fundamentals/x-ids) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** twitter:title · Meta Tag · zhead - **Source:** https://zhead.dev/meta/twitter-title - **Description:** Provides the title used in an X Card link preview. The metadata name retains the twitter: prefix. Meta tags # twitter:title Provides the title used in an X Card link preview. The metadata name retains the twitter: prefix. ## Code examples Good example ``` ``` Names the topic of the page directly. Good example ``` ``` A specific article title. Avoid this example ``` ``` Too vague to identify the page. Avoid this example ``` ``` An empty value provides no card title. ## Recommendations - 01 Name the Page Clearly X may truncate long titles, so put the distinguishing words first. - 02 Match the Page The card title can differ from the HTML title, but both should describe the same page. ## Related documentation - [docs.x.com: Overview](https://docs.x.com/overview) ## Related meta tags ### [twitter:app:id:ipad](https://zhead.dev/meta/twitter-app-id-ipad) name Legacy Twitter App Card field for the numeric App Store ID of an iPad app. X has retired its public App Card reference. ``` ``` The numeric App Store ID once used by App Cards. ### [twitter:app:id:iphone](https://zhead.dev/meta/twitter-app-id-iphone) name Legacy Twitter App Card field for the numeric App Store ID of an iPhone app. X has retired its public App Card reference. ``` ``` The numeric App Store ID for the former Twitter iPhone app. ### [twitter:app:id:googleplay](https://zhead.dev/meta/twitter-app-id-googleplay) name Legacy Twitter App Card field for an Android application ID, usually the package name used by Google Play. X has retired its public App Card reference. ``` ``` A conventional Android application ID. ### [twitter:app:name:ipad](https://zhead.dev/meta/twitter-app-name-ipad) name Legacy Twitter App Card field for the name of an iPad app. X has retired its public App Card reference. ``` ``` A plain app name that matches the store listing. ### [twitter:app:name:googleplay](https://zhead.dev/meta/twitter-app-name-googleplay) name Legacy Twitter App Card field for the name of an Android app. X has retired its public App Card reference. ``` ``` A short app name that matches the store listing. --- - **Page:** article:expiration_time · Meta Tag · zhead - **Source:** https://zhead.dev/meta/article-expiration-time - **Description:** Sets the date and time after which an article is out of date. Open Graph defines the value as an ISO 8601 datetime. Open Graph metadata # article:expiration\_time Sets the date and time after which an article is out of date. Open Graph defines the value as an ISO 8601 datetime. ## Code examples Good example ``` ``` Sets the expiry to a precise UTC instant. Avoid this example ``` ``` This format is region-dependent and has no timezone. ## Recommendations - 01 Use ISO 8601 Format Include a timezone or UTC marker so consumers interpret the same instant. - 02 Use It for Real Expiry Add this property only when the article has a known expiry. Most evergreen articles do not need it. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [article:author](https://zhead.dev/meta/article-author) property Links an article to one or more author profiles. The value is a URL, and you can repeat the property for multiple authors. ``` ``` Points to John Doe’s profile page. ### [article:expiration\_time](https://zhead.dev/meta/article-expiration-time) property Sets the date and time after which an article is out of date. Open Graph defines the value as an ISO 8601 datetime. ``` ``` Sets the expiry to a precise UTC instant. ### [article:modified\_time](https://zhead.dev/meta/article-modified-time) property Records when an article was last changed. Open Graph defines the value as an ISO 8601 datetime. ``` ``` A complete UTC timestamp that parsers can read consistently. ### [article:published\_time](https://zhead.dev/meta/article-published-time) property Records when an article was first published. Use it with og:type set to article. ``` ``` A publication time expressed in UTC. ### [article:section](https://zhead.dev/meta/article-section) property Names the high-level section that contains an article, such as Technology or Culture. ``` ``` A clear section name used across a publication. --- - **Page:** article:modified_time · Meta Tag · zhead - **Source:** https://zhead.dev/meta/article-modified-time - **Description:** Records when an article was last changed. Open Graph defines the value as an ISO 8601 datetime. Open Graph metadata # article:modified\_time Records when an article was last changed. Open Graph defines the value as an ISO 8601 datetime. ## Code examples Good example ``` ``` A complete UTC timestamp that parsers can read consistently. Avoid this example ``` ``` The date order and timezone are both unclear. ## Recommendations - 01 Use ISO 8601 Format Include a timezone or UTC marker so the timestamp is unambiguous. - 02 Use the Actual Change Time Set the timestamp from your publishing system when the article changes. Do not use a future time. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [article:author](https://zhead.dev/meta/article-author) property Links an article to one or more author profiles. The value is a URL, and you can repeat the property for multiple authors. ``` ``` Points to John Doe’s profile page. ### [article:expiration\_time](https://zhead.dev/meta/article-expiration-time) property Sets the date and time after which an article is out of date. Open Graph defines the value as an ISO 8601 datetime. ``` ``` Sets the expiry to a precise UTC instant. ### [article:modified\_time](https://zhead.dev/meta/article-modified-time) property Records when an article was last changed. Open Graph defines the value as an ISO 8601 datetime. ``` ``` A complete UTC timestamp that parsers can read consistently. ### [article:published\_time](https://zhead.dev/meta/article-published-time) property Records when an article was first published. Use it with og:type set to article. ``` ``` A publication time expressed in UTC. ### [article:section](https://zhead.dev/meta/article-section) property Names the high-level section that contains an article, such as Technology or Culture. ``` ``` A clear section name used across a publication. --- - **Page:** article:section · Meta Tag · zhead - **Source:** https://zhead.dev/meta/article-section - **Description:** Names the high-level section that contains an article, such as Technology or Culture. Open Graph metadata # article:section Names the high-level section that contains an article, such as Technology or Culture. ## Code examples Good example ``` ``` A clear section name used across a publication. Good example ``` ``` Another useful top-level section name. Avoid this example ``` ``` This reads like an article title, not a high-level section. Avoid this example ``` ``` An empty property names no section. ## Recommendations - 01 Use Your Published Section Match the section shown on the page and used in your site navigation. - 02 Keep Names Consistent Use one spelling and capitalization for the same section across the site. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [article:author](https://zhead.dev/meta/article-author) property Links an article to one or more author profiles. The value is a URL, and you can repeat the property for multiple authors. ``` ``` Points to John Doe’s profile page. ### [article:expiration\_time](https://zhead.dev/meta/article-expiration-time) property Sets the date and time after which an article is out of date. Open Graph defines the value as an ISO 8601 datetime. ``` ``` Sets the expiry to a precise UTC instant. ### [article:modified\_time](https://zhead.dev/meta/article-modified-time) property Records when an article was last changed. Open Graph defines the value as an ISO 8601 datetime. ``` ``` A complete UTC timestamp that parsers can read consistently. ### [article:published\_time](https://zhead.dev/meta/article-published-time) property Records when an article was first published. Use it with og:type set to article. ``` ``` A publication time expressed in UTC. ### [article:section](https://zhead.dev/meta/article-section) property Names the high-level section that contains an article, such as Technology or Culture. ``` ``` A clear section name used across a publication. --- - **Page:** article:published_time · Meta Tag · zhead - **Source:** https://zhead.dev/meta/article-published-time - **Description:** Records when an article was first published. Use it with og:type set to article. Open Graph metadata # article:published\_time Records when an article was first published. Use it with og:type set to article. ## Code examples Good example ``` ``` A publication time expressed in UTC. Good example ``` ``` A publication time with an explicit UTC offset. Avoid this example ``` ``` Readable to people, but not the ISO 8601 datetime Open Graph specifies. Avoid this example ``` ``` Missing the T separator and timezone. ## Recommendations - 01 Use ISO 8601 Format Open Graph expects an ISO 8601 datetime. Include a timezone or UTC marker. - 02 Keep the Original Date Use article:modified\_time for later edits. Changing the publication time rewrites the article’s history. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [article:author](https://zhead.dev/meta/article-author) property Links an article to one or more author profiles. The value is a URL, and you can repeat the property for multiple authors. ``` ``` Points to John Doe’s profile page. ### [article:expiration\_time](https://zhead.dev/meta/article-expiration-time) property Sets the date and time after which an article is out of date. Open Graph defines the value as an ISO 8601 datetime. ``` ``` Sets the expiry to a precise UTC instant. ### [article:modified\_time](https://zhead.dev/meta/article-modified-time) property Records when an article was last changed. Open Graph defines the value as an ISO 8601 datetime. ``` ``` A complete UTC timestamp that parsers can read consistently. ### [article:published\_time](https://zhead.dev/meta/article-published-time) property Records when an article was first published. Use it with og:type set to article. ``` ``` A publication time expressed in UTC. ### [article:section](https://zhead.dev/meta/article-section) property Names the high-level section that contains an article, such as Technology or Culture. ``` ``` A clear section name used across a publication. --- - **Page:** article:tag · Meta Tag · zhead - **Source:** https://zhead.dev/meta/article-tag - **Description:** Adds a tag word or phrase associated with an article. Repeat the property to provide more than one tag. Open Graph metadata # article:tag Adds a tag word or phrase associated with an article. Repeat the property to provide more than one tag. ## Code examples Good example ``` ``` A specific topic assigned to the article. Good example ``` ``` A second property can add this related topic. Avoid this example ``` ``` Too broad to describe a useful article topic. Avoid this example ``` ``` An empty value adds no tag. ## Recommendations - 01 Use Real Article Tags Match the taxonomy used on the page. Do not add unrelated search terms. - 02 Repeat the Property Write one article:tag element for each value. A comma-separated list is still one tag string. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [article:author](https://zhead.dev/meta/article-author) property Links an article to one or more author profiles. The value is a URL, and you can repeat the property for multiple authors. ``` ``` Points to John Doe’s profile page. ### [article:expiration\_time](https://zhead.dev/meta/article-expiration-time) property Sets the date and time after which an article is out of date. Open Graph defines the value as an ISO 8601 datetime. ``` ``` Sets the expiry to a precise UTC instant. ### [article:modified\_time](https://zhead.dev/meta/article-modified-time) property Records when an article was last changed. Open Graph defines the value as an ISO 8601 datetime. ``` ``` A complete UTC timestamp that parsers can read consistently. ### [article:published\_time](https://zhead.dev/meta/article-published-time) property Records when an article was first published. Use it with og:type set to article. ``` ``` A publication time expressed in UTC. ### [article:section](https://zhead.dev/meta/article-section) property Names the high-level section that contains an article, such as Technology or Culture. ``` ``` A clear section name used across a publication. --- - **Page:** book:isbn · Meta Tag · zhead - **Source:** https://zhead.dev/meta/book-isbn - **Description:** Provides the book’s International Standard Book Number as a string. Open Graph metadata # book:isbn Provides the book’s International Standard Book Number as a string. ## Code examples Good example ``` ``` A valid ISBN-13 written without display separators. Good example ``` ``` A valid ISBN-10. Open Graph stores the value as a string and does not require ISBN-13. Avoid this example ``` ``` ISBN-13 check digits are numeric, so X makes this value invalid. ## Recommendations - 01 Use the Assigned ISBN Copy the identifier for the exact edition. Different formats and editions can have different ISBNs. - 02 Verify the ISBN Check the digits and checksum against the publisher or ISBN agency record. ## Related documentation - [Open Graph protocol](https://ogp.me/) - [isbn-international.org: 29](https://www.isbn-international.org/content/isbn-users-manual/29) ## Related meta tags ### [book:author](https://zhead.dev/meta/book-author) property Links a book to an author profile. The value is a URL, and you can repeat the property for multiple authors. ``` ``` Points to the author’s profile page. ### [book:isbn](https://zhead.dev/meta/book-isbn) property Provides the book’s International Standard Book Number as a string. ``` ``` A valid ISBN-13 written without display separators. ### [book:release\_date](https://zhead.dev/meta/book-release-date) property Records when a book was released. Open Graph defines the value as an ISO 8601 datetime. ``` ``` An ISO 8601 calendar date when no exact release time is needed. ### [book:tag](https://zhead.dev/meta/book-tag) property Adds a tag word or phrase associated with a book. Repeat the property to provide more than one tag. ``` ``` A clear genre for the book. --- - **Page:** book:author · Meta Tag · zhead - **Source:** https://zhead.dev/meta/book-author - **Description:** Links a book to an author profile. The value is a URL, and you can repeat the property for multiple authors. Open Graph metadata # book:author Links a book to an author profile. The value is a URL, and you can repeat the property for multiple authors. ## Code examples Good example ``` ``` Points to the author’s profile page. Good example ``` ``` Another valid profile URL. Avoid this example ``` ``` A plain name is not the profile URL expected by the protocol. Avoid this example ``` ``` An empty value identifies no author. ## Recommendations - 01 Link to a Profile Use the canonical URL of a page that describes the author. Open Graph defines this value as a profile object, not a name. - 02 Repeat for Coauthors Add one book:author property per author. - 03 Use a Stable URL Prefer a permanent author page over a search result or temporary campaign URL. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [book:author](https://zhead.dev/meta/book-author) property Links a book to an author profile. The value is a URL, and you can repeat the property for multiple authors. ``` ``` Points to the author’s profile page. ### [book:isbn](https://zhead.dev/meta/book-isbn) property Provides the book’s International Standard Book Number as a string. ``` ``` A valid ISBN-13 written without display separators. ### [book:release\_date](https://zhead.dev/meta/book-release-date) property Records when a book was released. Open Graph defines the value as an ISO 8601 datetime. ``` ``` An ISO 8601 calendar date when no exact release time is needed. ### [book:tag](https://zhead.dev/meta/book-tag) property Adds a tag word or phrase associated with a book. Repeat the property to provide more than one tag. ``` ``` A clear genre for the book. --- - **Page:** book:release_date · Meta Tag · zhead - **Source:** https://zhead.dev/meta/book-release-date - **Description:** Records when a book was released. Open Graph defines the value as an ISO 8601 datetime. Open Graph metadata # book:release\_date Records when a book was released. Open Graph defines the value as an ISO 8601 datetime. ## Code examples Good example ``` ``` An ISO 8601 calendar date when no exact release time is needed. Good example ``` ``` A release datetime with an explicit UTC offset. Avoid this example ``` ``` Readable to people, but outside the ISO 8601 syntax Open Graph specifies. Avoid this example ``` ``` The day and month order is ambiguous. ## Recommendations - 01 Use ISO 8601 Format Use a complete ISO 8601 value that matches the known precision of the release. - 02 Include Timezone When you include a time, add a UTC marker or offset so the instant is unambiguous. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [book:author](https://zhead.dev/meta/book-author) property Links a book to an author profile. The value is a URL, and you can repeat the property for multiple authors. ``` ``` Points to the author’s profile page. ### [book:isbn](https://zhead.dev/meta/book-isbn) property Provides the book’s International Standard Book Number as a string. ``` ``` A valid ISBN-13 written without display separators. ### [book:release\_date](https://zhead.dev/meta/book-release-date) property Records when a book was released. Open Graph defines the value as an ISO 8601 datetime. ``` ``` An ISO 8601 calendar date when no exact release time is needed. ### [book:tag](https://zhead.dev/meta/book-tag) property Adds a tag word or phrase associated with a book. Repeat the property to provide more than one tag. ``` ``` A clear genre for the book. --- - **Page:** fb:app_id · Meta Tag · zhead - **Source:** https://zhead.dev/meta/fb-app-id - **Description:** Associates the page with a Facebook app. Meta requires it when you want Facebook Insights for traffic from shared pages. Open Graph metadata # fb:app\_id Associates the page with a Facebook app. Meta requires it when you want Facebook Insights for traffic from shared pages. ## Code examples Good example ``` ``` A numeric Facebook app ID from the app dashboard. Avoid this example ``` ``` A placeholder does not identify a Facebook app. ## Recommendations - 01 Use Your App ID Copy the numeric ID from the Meta app dashboard. Do not use an app secret or access token. - 02 The ID Is Public This property appears in page source by design. Keep the app secret private, but the app ID is not a secret. - 03 Test Before Deployment Use Meta’s Sharing Debugger to see the properties its crawler reads from the page. ## Related documentation - [Meta for Developers: Webmasters](https://developers.facebook.com/docs/sharing/webmasters) - [Meta for Developers: Debug](https://developers.facebook.com/tools/debug/) ## Related meta tags ### [fb:app\_id](https://zhead.dev/meta/fb-app-id) property Associates the page with a Facebook app. Meta requires it when you want Facebook Insights for traffic from shared pages. ``` ``` A numeric Facebook app ID from the app dashboard. --- - **Page:** book:tag · Meta Tag · zhead - **Source:** https://zhead.dev/meta/book-tag - **Description:** Adds a tag word or phrase associated with a book. Repeat the property to provide more than one tag. Open Graph metadata # book:tag Adds a tag word or phrase associated with a book. Repeat the property to provide more than one tag. ## Code examples Good example ``` ``` A clear genre for the book. Good example ``` ``` A specific theme covered by the book. Avoid this example ``` ``` A subjective opinion that does not describe the book. Avoid this example ``` ``` A call to action, not a book tag. ## Recommendations - 01 Describe the Book Use subjects, themes, or genres that genuinely apply to the book. - 02 Repeat the Property Write one book:tag element for each value. A comma-separated list is still one tag string. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [book:author](https://zhead.dev/meta/book-author) property Links a book to an author profile. The value is a URL, and you can repeat the property for multiple authors. ``` ``` Points to the author’s profile page. ### [book:isbn](https://zhead.dev/meta/book-isbn) property Provides the book’s International Standard Book Number as a string. ``` ``` A valid ISBN-13 written without display separators. ### [book:release\_date](https://zhead.dev/meta/book-release-date) property Records when a book was released. Open Graph defines the value as an ISO 8601 datetime. ``` ``` An ISO 8601 calendar date when no exact release time is needed. ### [book:tag](https://zhead.dev/meta/book-tag) property Adds a tag word or phrase associated with a book. Repeat the property to provide more than one tag. ``` ``` A clear genre for the book. --- - **Page:** og:audio · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-audio - **Description:** Provides the URL of an audio file that accompanies the Open Graph object. Open Graph metadata # og:audio Provides the URL of an audio file that accompanies the Open Graph object. ## Code examples Good example ``` ``` An absolute, public URL to the audio file. Good example ``` ``` Another valid audio URL. Playback support still depends on the consumer. Avoid this example ``` ``` A local file URL cannot be fetched from the web. Avoid this example ``` ``` Use an absolute URL so consumers do not have to resolve a relative path. ## Recommendations - 01 Use a Public URL The consumer fetching your metadata must also be able to fetch the audio without signing in. - 02 Describe the File Add og:audio:type after this property when you know the file’s MIME type. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:audio:secure_url · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-audio-secure-url - **Description:** Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. Open Graph metadata # og:audio:secure\_url Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ## Code examples Good example ``` ``` A valid HTTPS alternate for the audio resource. Avoid this example ``` ``` This property specifically requires a secure URL. Avoid this example ``` ``` A relative path does not provide the secure absolute URL expected here. ## Recommendations - 01 Use HTTPS This structured property exists for a secure URL, so its value must use HTTPS. - 02 Place It After og:audio Structured properties attach to the root property immediately before them. - 03 Point to the Same Audio The secure URL is an alternate location for the same file, not a second track. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:audio:type · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-audio-type - **Description:** Provides the MIME type of the audio resource declared by the preceding og:audio property. Open Graph metadata # og:audio:type Provides the MIME type of the audio resource declared by the preceding og:audio property. ## Parameters audio/mpeg Represents MP3 audio files. ``` ``` audio/wav Represents Waveform Audio files. ``` ``` audio/ogg Represents Ogg Vorbis audio files. ``` ``` ## Code examples Good example ``` ``` The registered media type for MP3 audio. Good example ``` ``` The registered media type for audio in an Ogg container. Avoid this example ``` ``` A video media type does not describe the audio resource. Avoid this example ``` ``` Use the registered audio/mpeg type for MP3 instead. ## Recommendations - 01 Match Content Type Exactly Use the media type served for the file. A guessed or mismatched value can mislead consumers. - 02 Use Standard MIME Types Choose the registered IANA media type for the file format. ## Related documentation - [Open Graph protocol](https://ogp.me/) - [IANA: Media Types](https://www.iana.org/assignments/media-types/media-types.xhtml#audio) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:audio:url · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-audio-url - **Description:** An alias of og:audio. It provides the URL of an audio file that accompanies the object. Open Graph metadata # og:audio:url An alias of og:audio. It provides the URL of an audio file that accompanies the object. ## Code examples Good example ``` ``` An absolute URL to the audio file. Good example ``` ``` A valid URL can use any audio format the consumer supports. Avoid this example ``` ``` A local file URL cannot be fetched from the web. Avoid this example ``` ``` Use an absolute URL so every consumer resolves the same resource. ## Recommendations - 01 Place Details After the URL Follow this property with og:audio:secure\_url and og:audio:type when those details apply. - 02 Use a Stable URL Avoid short-lived signed URLs that may expire before a consumer fetches the page. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:image:alt · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-image-alt - **Description:** Describes what appears in the preceding og:image. It is a description, not a caption. Open Graph metadata # og:image:alt Describes what appears in the preceding og:image. It is a description, not a caption. ## Code examples Good example ``` ``` States the visible subject and action. Good example ``` ``` Includes the chart’s useful information, not just its format. Avoid this example ``` ``` A filename does not tell the reader what the image contains. Avoid this example ``` ``` Open Graph says an og:image should have a corresponding og:image:alt description. ## Recommendations - 01 Describe This Image Write useful replacement text for the specific image URL immediately before this property. - 02 Avoid Redundancy Skip phrases such as “image of” when the description reads clearly without them. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:description · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-description - **Description:** Provides a one or two sentence description of the Open Graph object. Open Graph metadata # og:description Provides a one or two sentence description of the Open Graph object. ## Code examples Good example ``` ``` Explains the subject in one specific sentence. Good example ``` ``` Names the product, version, and contents of the page. Avoid this example ``` ``` Too vague to explain what the page contains. Avoid this example ``` ``` An empty value describes nothing. Omit the optional property instead. ## Recommendations - 01 Describe the Page Tell readers what they will find at the URL. Open Graph does not set a character limit. - 02 Make It Stand Alone Write enough context for someone who has not read the title or page yet. - 03 Keep It Accurate Do not add claims, dates, or offers that the page does not support. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:determiner · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-determiner - **Description:** Sets the word that appears before the object title in a sentence. The default is an empty string. Open Graph metadata # og:determiner Sets the word that appears before the object title in a sentence. The default is an empty string. ## Parameters a Prepends "a" before the title. ``` ``` an Prepends "an" before the title, use for titles starting with a vowel sound. ``` ``` the Places "the" before the title. ``` ``` auto Asks the consumer to choose "a" or "an". ``` ``` Uses no determiner. This is the default. ``` ``` ## Code examples Good example ``` ``` A defined value for a title that starts with a consonant sound. Good example ``` ``` A defined value for a title that starts with a vowel sound. Avoid this example ``` ``` Not one of the values defined by Open Graph. Avoid this example ``` ``` Use an empty string when the title needs no determiner. ## Recommendations - 01 Choose Based on Phonetics Choose a or an based on the opening sound of the title. - 02 Let Consumers Choose Use auto when you want the consumer to choose between a and an. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:image:height · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-image-height - **Description:** Provides the height, in pixels, of the preceding og:image resource. Open Graph metadata # og:image:height Provides the height, in pixels, of the preceding og:image resource. ## Code examples Good example ``` ``` Declares an image that is 600 pixels high. Avoid this example ``` ``` Open Graph expects the integer pixel count, without a unit. Good example ``` ``` Valid when the actual image is 630 pixels high. Avoid this example ``` ``` Wrong if the referenced image is actually 630 pixels high. ## Recommendations - 01 Match the Image Read the actual pixel height from the image. Do not describe its CSS display size. - 02 Keep Properties Together Place width and height after the og:image they describe, before declaring another image. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:image:secure_url · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-image-secure-url - **Description:** Provides an alternate HTTPS URL for the image declared by the preceding og:image property. Open Graph metadata # og:image:secure\_url Provides an alternate HTTPS URL for the image declared by the preceding og:image property. ## Code examples Good example ``` ``` A valid HTTPS alternate for the image resource. Avoid this example ``` ``` This property specifically requires a secure URL. Avoid this example ``` ``` An empty value does not identify a secure alternate. ## Recommendations - 01 Use HTTPS URLs This structured property exists for a secure URL, so its value must use HTTPS. - 02 Place It After og:image Structured properties attach to the root property immediately before them. - 03 Point to the Same Image The secure URL is an alternate location for the same image, not another preview image. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:image:url · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-image-url - **Description:** An alias of og:image. It provides the URL of an image that represents the object. Open Graph metadata # og:image:url An alias of og:image. It provides the URL of an image that represents the object. ## Code examples Good example ``` ``` An absolute URL to the image resource. Avoid this example ``` ``` Use an absolute URL so every consumer resolves the same resource. Avoid this example ``` ``` A local file URL cannot be fetched from the web. ## Recommendations - 01 Use an Absolute URL Choose a public image URL that consumers can fetch without cookies or authentication. - 02 Keep Details Together Put type, width, height, and alt properties immediately after this URL. - 03 Use a Stable URL Avoid short-lived signed URLs that may expire before a consumer fetches the page. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:image:type · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-image-type - **Description:** Provides the MIME type of the image resource declared by the preceding og:image property. Open Graph metadata # og:image:type Provides the MIME type of the image resource declared by the preceding og:image property. ## Code examples Good example ``` ``` The registered media type for JPEG images. Good example ``` ``` The registered media type for PNG images. Avoid this example ``` ``` The registered media type is image/jpeg, not image/jpg. Avoid this example ``` ``` This does not describe an image resource. ## Recommendations - 01 Match the Response Use the media type served for the image. A guessed or mismatched value can mislead consumers. - 02 Use a Registered Type Choose the IANA media type for the image format. ## Related documentation - [Open Graph protocol](https://ogp.me/) - [IANA: Media Types](https://www.iana.org/assignments/media-types/media-types.xhtml#image) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:image:width · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-image-width - **Description:** Provides the width, in pixels, of the preceding og:image resource. Open Graph metadata # og:image:width Provides the width, in pixels, of the preceding og:image resource. ## Code examples Good example ``` ``` Declares an image that is 1200 pixels wide. Good example ``` ``` Valid when the actual image is 600 pixels wide. Avoid this example ``` ``` Open Graph expects the integer pixel count, without a unit. Avoid this example ``` ``` Wrong if the referenced image is actually 1200 pixels wide. ## Recommendations - 01 Match the Image Read the actual pixel width from the image. Do not describe its CSS display size. - 02 Match Actual Image Dimensions Place width and height after the og:image they describe, before declaring another image. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:locale · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-locale - **Description:** Sets the locale of the Open Graph metadata in language_TERRITORY form. The default is en_US. Open Graph metadata # og:locale Sets the locale of the Open Graph metadata in language\_TERRITORY form. The default is en\_US. ## Code examples Good example ``` ``` English as used in the United States. Good example ``` ``` French as used in France. Avoid this example ``` ``` Open Graph uses an underscore here, so write en\_GB. Avoid this example ``` ``` An empty value is not a locale. Omit the property to use the en\_US default. ## Recommendations - 01 Use Correct Locale Format Use a language code, an underscore, then a territory code, such as en\_GB. - 02 List Available Alternates Add one og:locale:alternate property for each other locale in which the page is available. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:locale:alternate · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-locale-alternate - **Description:** Names another locale in which the page is available. Repeat the property for each alternate. Open Graph metadata # og:locale:alternate Names another locale in which the page is available. Repeat the property for each alternate. ## Code examples Good example ``` ``` French as used in France is available as an alternate. Good example ``` ``` Spanish as used in Spain is available as an alternate. Avoid this example ``` ``` Use the locale code rather than a language name. Avoid this example ``` ``` Open Graph uses an underscore here, so write en\_US. ## Recommendations - 01 Use the Locale Code Use language\_TERRITORY form, such as fr\_FR. - 02 Declare the Primary Locale Set og:locale first, then list only the other locales available for this page. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:site_name · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-site-name - **Description:** Provides the name of the larger website that contains this object, such as IMDb. Open Graph metadata # og:site\_name Provides the name of the larger website that contains this object, such as IMDb. ## Code examples Good example ``` ``` A concise name for the overall website. Avoid this example ``` ``` Includes an offer instead of naming only the website. ## Recommendations - 01 Be Consistent Use the same site name across pages unless the site genuinely has separate publications. - 02 Avoid Dynamic Values Keep page titles and promotional copy in og:title and og:description. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:type · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-type - **Description:** Sets the Open Graph object type. It is one of the four required basic properties, and some types require extra metadata. Open Graph metadata # og:type Sets the Open Graph object type. It is one of the four required basic properties, and some types require extra metadata. ## Parameters article Used for article pages, including news and blog posts. ``` ``` video.movie Specifies that the content is a movie. ``` ``` video.episode Used for TV show episodes. ``` ``` video.tv\_show Indicates that the content is a TV show. ``` ``` video.other For videos that don't fit other categories. ``` ``` music.song For individual songs. ``` ``` music.album Used for music albums. ``` ``` music.playlist Indicates a playlist of songs. ``` ``` music.radio\_station Used for radio station profiles. ``` ``` book For books and publications. ``` ``` profile Used for personal or professional profiles. ``` ``` website A general page that does not fit other og:type categories. ``` ``` ## Code examples Good example ``` ``` The defined type for an article page. Good example ``` ``` The defined type for one song. Avoid this example ``` ``` Not a defined global type. Use a specific video type such as video.other. Avoid this example ``` ``` Not a defined global type. Use article for a post or website for a general page. ## Recommendations - 01 Accurate Content Type Use the most specific defined type that describes the object. A general page can use website. - 02 Add Type Properties Check the protocol for extra properties required by the type you choose. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:url · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-url - **Description:** Provides the canonical URL used as the object’s permanent identifier. It is one of the four required basic properties. Open Graph metadata # og:url Provides the canonical URL used as the object’s permanent identifier. It is one of the four required basic properties. ## Code examples Good example ``` ``` An absolute, canonical page URL. Avoid this example ``` ``` A relative path is not a canonical absolute URL. Avoid this example ``` ``` Wrong when this URL identifies a different page rather than the current object. ## Recommendations - 01 Always Use Absolute URLs Include the scheme and host so every consumer identifies the same URL. - 02 Match the Canonical URL If the page declares a canonical link, use the same URL here. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:video:alt · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-video-alt - **Description:** Describes the content of the preceding og:video resource. It is a description, not a caption. Open Graph metadata # og:video:alt Describes the content of the preceding og:video resource. It is a description, not a caption. ## Code examples Good example ``` ``` States what happens in the video without promotional filler. Good example ``` ``` Summarizes the main actions in the tutorial. Avoid this example ``` ``` Names the medium but says nothing about its content. Avoid this example ``` ``` An empty value does not describe the video. ## Recommendations - 01 Describe This Video State the useful action, subject, or information in the specific video immediately before this property. - 02 Keep It Factual Write for someone who cannot watch the video. Do not stuff search keywords into the description. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:video · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-video - **Description:** Provides the URL of a video resource that complements the Open Graph object. Open Graph metadata # og:video Provides the URL of a video resource that complements the Open Graph object. ## Code examples Good example ``` ``` An absolute URL to a public video resource. Good example ``` ``` A video resource hosted on another origin is also valid. Avoid this example ``` ``` Use an absolute URL so every consumer resolves the same resource. Avoid this example ``` ``` A local file URL cannot be fetched from the web. ## Recommendations - 01 Use Absolute URLs Choose a public resource URL that consumers can fetch without cookies or authentication. - 02 Add Video Details Put type, width, height, and alt properties immediately after the video they describe. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:video:secure_url · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-video-secure-url - **Description:** Provides an alternate HTTPS URL for the video declared by the preceding og:video property. Open Graph metadata # og:video:secure\_url Provides an alternate HTTPS URL for the video declared by the preceding og:video property. ## Code examples Good example ``` ``` A valid HTTPS alternate for the video resource. Avoid this example ``` ``` This property specifically requires a secure URL. ## Recommendations - 01 Use HTTPS This structured property exists for a secure URL, so its value must use HTTPS. - 02 Place It After og:video Structured properties attach to the root property immediately before them. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:video:height · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-video-height - **Description:** Provides the height, in pixels, of the preceding og:video resource. Open Graph metadata # og:video:height Provides the height, in pixels, of the preceding og:video resource. ## Code examples Good example ``` ``` Declares a video that is 1080 pixels high. Good example ``` ``` Valid when the actual video is 720 pixels high. Avoid this example ``` ``` Open Graph expects the integer pixel count, without a unit. Avoid this example ``` ``` Open Graph expects an integer. ## Recommendations - 01 Match Actual Video Height Read the actual pixel height from the video. Do not describe its CSS display size. - 02 Keep Properties Together Place width and height after the og:video they describe, before declaring another video. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:video:type · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-video-type - **Description:** Provides the MIME type of the video resource declared by the preceding og:video property. Open Graph metadata # og:video:type Provides the MIME type of the video resource declared by the preceding og:video property. ## Parameters video/mp4 Indicates the video is in MP4 format, widely supported across platforms. ``` ``` video/ogg Defines the video as OGG, a free, open container format. ``` ``` video/webm Specifies the video is in WebM format, designed for the web. ``` ``` ## Code examples Good example ``` ``` The registered media type for MP4 video. Good example ``` ``` The registered media type for WebM video. Avoid this example ``` ``` A document media type does not describe the video resource. Avoid this example ``` ``` An empty value is not a media type. Omit the optional property instead. ## Recommendations - 01 Match the Response Use the media type served for the video. A guessed or mismatched value can mislead consumers. - 02 Use a Registered Type Choose the IANA media type for the video format. ## Related documentation - [Open Graph protocol](https://ogp.me/) - [IANA: Media Types](https://www.iana.org/assignments/media-types/media-types.xhtml#video) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:video:url · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-video-url - **Description:** An alias of og:video. It provides the URL of a video resource that complements the object. Open Graph metadata # og:video:url An alias of og:video. It provides the URL of a video resource that complements the object. ## Code examples Good example ``` ``` An absolute URL to a public video resource. Good example ``` ``` A video resource hosted on another origin is also valid. Avoid this example ``` ``` Use an absolute URL so every consumer resolves the same resource. Avoid this example ``` ``` A local file URL cannot be fetched from the web. ## Recommendations - 01 Use Absolute URLs Choose a public resource URL that consumers can fetch without cookies or authentication. - 02 Keep Details Together Put type, width, height, and alt properties immediately after this URL. - 03 Use a Stable URL Avoid short-lived signed URLs that may expire before a consumer fetches the page. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** og:video:width · Meta Tag · zhead - **Source:** https://zhead.dev/meta/og-video-width - **Description:** Provides the width, in pixels, of the preceding og:video resource. Open Graph metadata # og:video:width Provides the width, in pixels, of the preceding og:video resource. ## Code examples Good example ``` ``` Declares a video that is 1920 pixels wide. Good example ``` ``` Valid when the actual video is 1280 pixels wide. Avoid this example ``` ``` Open Graph expects the integer pixel count, without a unit. Avoid this example ``` ``` Wrong if the referenced video is actually 1280 pixels wide. ## Recommendations - 01 Match the Video Read the actual pixel width from the video. Do not describe its CSS display size. - 02 Keep Aspect Ratio Consistent Place width and height after the og:video they describe, before declaring another video. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [og:audio](https://zhead.dev/meta/og-audio) property Provides the URL of an audio file that accompanies the Open Graph object. ``` ``` An absolute, public URL to the audio file. ### [og:audio:secure\_url](https://zhead.dev/meta/og-audio-secure-url) property Provides an alternate HTTPS URL for the audio declared by the preceding og:audio property. ``` ``` A valid HTTPS alternate for the audio resource. ### [og:audio:type](https://zhead.dev/meta/og-audio-type) property Provides the MIME type of the audio resource declared by the preceding og:audio property. ``` ``` The registered media type for MP3 audio. ### [og:audio:url](https://zhead.dev/meta/og-audio-url) property An alias of og:audio. It provides the URL of an audio file that accompanies the object. ``` ``` An absolute URL to the audio file. ### [og:description](https://zhead.dev/meta/og-description) property Provides a one or two sentence description of the Open Graph object. ``` ``` Explains the subject in one specific sentence. --- - **Page:** profile:first_name · Meta Tag · zhead - **Source:** https://zhead.dev/meta/profile-first-name - **Description:** Provides the given name of the person represented by a profile page. Open Graph metadata # profile:first\_name Provides the given name of the person represented by a profile page. ## Code examples Good example ``` ``` A given name written as plain text. Good example ``` ``` Unicode names and their accents are valid strings. Avoid this example ``` ``` HTML markup is not part of the person’s name. Avoid this example ``` ``` Does not match the name shown on the example profile. ## Recommendations - 01 Match the Person’s Name Use the spelling, accents, and capitalization shown on the profile page. - 02 Keep Markup Out The content value is plain text. Do not put HTML around the name. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [profile:first\_name](https://zhead.dev/meta/profile-first-name) property Provides the given name of the person represented by a profile page. ``` ``` A given name written as plain text. ### [profile:gender](https://zhead.dev/meta/profile-gender) property Sets the Open Graph gender value for the person represented by a profile page. The protocol only defines male and female. ``` ``` One of the two values defined by Open Graph. ### [profile:last\_name](https://zhead.dev/meta/profile-last-name) property Provides the family name of the person represented by a profile page. ``` ``` A family name written as plain text. ### [profile:username](https://zhead.dev/meta/profile-username) property Provides a short, unique username for the person represented by a profile page. ``` ``` A short username without a platform-specific @ prefix. --- - **Page:** profile:username · Meta Tag · zhead - **Source:** https://zhead.dev/meta/profile-username - **Description:** Provides a short, unique username for the person represented by a profile page. Open Graph metadata # profile:username Provides a short, unique username for the person represented by a profile page. ## Code examples Good example ``` ``` A short username without a platform-specific @ prefix. Avoid this example ``` ``` An empty value identifies no username. Avoid this example ``` ``` A display name with spaces is not a short username. Good example ``` ``` Numbers and underscores can be part of a username. ## Recommendations - 01 Match the Profile Use the same username shown on the page this metadata describes. - 02 Keep It Short Open Graph defines this field as a short unique string, not a full name or profile URL. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [profile:first\_name](https://zhead.dev/meta/profile-first-name) property Provides the given name of the person represented by a profile page. ``` ``` A given name written as plain text. ### [profile:gender](https://zhead.dev/meta/profile-gender) property Sets the Open Graph gender value for the person represented by a profile page. The protocol only defines male and female. ``` ``` One of the two values defined by Open Graph. ### [profile:last\_name](https://zhead.dev/meta/profile-last-name) property Provides the family name of the person represented by a profile page. ``` ``` A family name written as plain text. ### [profile:username](https://zhead.dev/meta/profile-username) property Provides a short, unique username for the person represented by a profile page. ``` ``` A short username without a platform-specific @ prefix. --- - **Page:** profile:gender · Meta Tag · zhead - **Source:** https://zhead.dev/meta/profile-gender - **Description:** Sets the Open Graph gender value for the person represented by a profile page. The protocol only defines male and female. Open Graph metadata # profile:gender Sets the Open Graph gender value for the person represented by a profile page. The protocol only defines male and female. ## Code examples Good example ``` ``` One of the two values defined by Open Graph. Good example ``` ``` The other value defined by Open Graph. Avoid this example ``` ``` Not a member of the Open Graph enum. Avoid this example ``` ``` Not a defined value. Omit the property when no supported value applies. ## Recommendations - 01 Use Only When Appropriate Omit the property if neither supported value fits the person or you do not have a reason to publish it. - 02 Correct Syntax The Open Graph enum accepts male or female. Values such as unspecified are not part of the protocol. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [profile:first\_name](https://zhead.dev/meta/profile-first-name) property Provides the given name of the person represented by a profile page. ``` ``` A given name written as plain text. ### [profile:gender](https://zhead.dev/meta/profile-gender) property Sets the Open Graph gender value for the person represented by a profile page. The protocol only defines male and female. ``` ``` One of the two values defined by Open Graph. ### [profile:last\_name](https://zhead.dev/meta/profile-last-name) property Provides the family name of the person represented by a profile page. ``` ``` A family name written as plain text. ### [profile:username](https://zhead.dev/meta/profile-username) property Provides a short, unique username for the person represented by a profile page. ``` ``` A short username without a platform-specific @ prefix. --- - **Page:** profile:last_name · Meta Tag · zhead - **Source:** https://zhead.dev/meta/profile-last-name - **Description:** Provides the family name of the person represented by a profile page. Open Graph metadata # profile:last\_name Provides the family name of the person represented by a profile page. ## Code examples Good example ``` ``` A family name written as plain text. Avoid this example ``` ``` HTML markup is not part of the family name. Good example ``` ``` Preserves the spelling and punctuation used by the person. Avoid this example ``` ``` Incorrect if the person writes their name with a hyphen. ## Recommendations - 01 Match the Person’s Name Use the spelling, spacing, punctuation, and capitalization shown on the profile page. - 02 Respect Name Conventions Do not force every family name into one capitalization pattern. ## Related documentation - [Open Graph protocol](https://ogp.me/) ## Related meta tags ### [profile:first\_name](https://zhead.dev/meta/profile-first-name) property Provides the given name of the person represented by a profile page. ``` ``` A given name written as plain text. ### [profile:gender](https://zhead.dev/meta/profile-gender) property Sets the Open Graph gender value for the person represented by a profile page. The protocol only defines male and female. ``` ``` One of the two values defined by Open Graph. ### [profile:last\_name](https://zhead.dev/meta/profile-last-name) property Provides the family name of the person represented by a profile page. ``` ``` A family name written as plain text. ### [profile:username](https://zhead.dev/meta/profile-username) property Provides a short, unique username for the person represented by a profile page. ``` ``` A short username without a platform-specific @ prefix. --- - **Page:** charset · Meta Tag · zhead - **Source:** https://zhead.dev/meta/charset - **Description:** Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. Meta tags # charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ## Code examples Good example ``` ``` The required character encoding for modern HTML. Avoid this example ``` ``` The charset attribute does not allow legacy encodings in a conforming HTML document. Avoid this example ``` ``` UTF-16 is not a valid value for the HTML charset attribute. Avoid this example ``` ``` An empty value does not declare an encoding. ## Recommendations - 01 Use UTF-8 UTF-8 is the only conforming value for the charset attribute in an HTML document. - 02 Declare Early Put the complete declaration within the first 1024 bytes of the document so the browser can determine the encoding before parsing much of the page. - 03 Keep Declarations Consistent Serve the document as UTF-8 too. Do not combine a charset tag with the older content-type pragma. ## Related documentation - [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-charset) - [W3C: Qa Html Encoding Declarations.En](https://www.w3.org/International/questions/qa-html-encoding-declarations.en) ## Related meta tags ### [charset](https://zhead.dev/meta/charset) charset Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8. ``` ``` The required character encoding for modern HTML. --- - **Page:** default-style · Meta Tag · zhead - **Source:** https://zhead.dev/meta/default-style - **Description:** Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited. Meta tags # default-style Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited. ## Code examples Good example ``` ``` Valid when a linked stylesheet set has the exact title Main Style. Avoid this example ``` ``` A value with no matching stylesheet title cannot select a preferred set. ## Recommendations - 01 Match the Stylesheet Title The value must match the title of the preferred stylesheet set exactly, including letter case. - 02 Do Not Depend on It Current support is narrow. If choosing a theme is important, provide a visible control and persist the user’s choice yourself. ## Related documentation - [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-http-equiv-default-style) - [drafts.csswg.org: Cssom](https://drafts.csswg.org/cssom/#css-style-sheet-sets) ## Related meta tags ### [Content-Security-Policy](https://zhead.dev/meta/content-security-policy) http-equiv Enforces a Content Security Policy from the document head. A policy limits where scripts, styles, images, connections, and other resources can come from, which reduces the impact of content injection bugs. ``` ``` Uses the same origin by default, blocks plugin content, and limits base URLs to the same origin. ### [content-type](https://zhead.dev/meta/content-type) http-equiv Provides the legacy pragma form of an HTML character encoding declaration. For conforming HTML, its content must be text/html; charset=utf-8. ``` ``` The only conforming content value for this pragma in an HTML document. ### [default-style](https://zhead.dev/meta/default-style) http-equiv Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited. ``` ``` Valid when a linked stylesheet set has the exact title Main Style. ### [refresh](https://zhead.dev/meta/refresh) http-equiv Reloads the current page after a delay or performs a timed redirect. Automatic navigation can confuse users, so a server redirect is usually a better choice. ``` ``` Valid timed redirect syntax. Prefer an HTTP redirect unless the visible delay serves a real purpose. ### [X-UA-Compatible](https://zhead.dev/meta/x-ua-compatible) http-equiv A legacy Internet Explorer pragma whose only conforming value is IE=edge. Current user agents must ignore it, so new pages should omit it. ``` ``` The only value allowed by the HTML standard, kept here for reading legacy markup. Current browsers ignore it. --- - **Page:** Content-Security-Policy · Meta Tag · zhead - **Source:** https://zhead.dev/meta/content-security-policy - **Description:** Enforces a Content Security Policy from the document head. A policy limits where scripts, styles, images, connections, and other resources can come from, which reduces the impact of content injection bugs. Meta tags # Content-Security-Policy Enforces a Content Security Policy from the document head. A policy limits where scripts, styles, images, connections, and other resources can come from, which reduces the impact of content injection bugs. ## Parameters default-src Provides a fallback source list for fetch directives that are not set explicitly. ``` ``` script-src Lists allowed sources for JavaScript. ``` ``` style-src Lists allowed sources for stylesheets and style blocks. ``` ``` img-src Lists allowed image sources. ``` ``` connect-src Limits connections made by APIs such as fetch, XMLHttpRequest, WebSocket, and EventSource. ``` ``` font-src Lists allowed font sources. ``` ``` object-src Lists allowed sources for object and embed elements. Set it to none when plugins are not needed. ``` ``` media-src Lists allowed audio and video sources. ``` ``` frame-src Lists allowed sources for nested browsing contexts such as iframes. ``` ``` ## Code examples Good example ``` ``` Uses the same origin by default, blocks plugin content, and limits base URLs to the same origin. Good example ``` ``` Shows the shape of a nonce based script policy. Replace the example nonce with a new unpredictable value on every response. Avoid this example ``` ``` The wildcard leaves most network sources unrestricted and provides little useful protection. Avoid this example ``` ``` Allowing every inline script removes a major CSP defence against injected JavaScript. ## Recommendations - 01 Prefer an HTTP Response Header The response header supports the full CSP feature set and protects the document before any HTML is parsed. Use a meta policy only when you cannot set headers. - 02 Place Meta Policies First A meta policy protects only content that follows it. Put it as early in the head as possible. - 03 Know the Meta Limits Meta delivery does not support report-only mode or the report-uri, frame-ancestors, and sandbox directives. - 04 Use a Fresh Nonce per Response When inline scripts are unavoidable, generate an unpredictable nonce for each response and apply it to the scripts you trust. ## Related documentation - [w3c.github.io: Webappsec Csp](https://w3c.github.io/webappsec-csp/#meta-element) ## Related meta tags ### [Content-Security-Policy](https://zhead.dev/meta/content-security-policy) http-equiv Enforces a Content Security Policy from the document head. A policy limits where scripts, styles, images, connections, and other resources can come from, which reduces the impact of content injection bugs. ``` ``` Uses the same origin by default, blocks plugin content, and limits base URLs to the same origin. ### [content-type](https://zhead.dev/meta/content-type) http-equiv Provides the legacy pragma form of an HTML character encoding declaration. For conforming HTML, its content must be text/html; charset=utf-8. ``` ``` The only conforming content value for this pragma in an HTML document. ### [default-style](https://zhead.dev/meta/default-style) http-equiv Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited. ``` ``` Valid when a linked stylesheet set has the exact title Main Style. ### [refresh](https://zhead.dev/meta/refresh) http-equiv Reloads the current page after a delay or performs a timed redirect. Automatic navigation can confuse users, so a server redirect is usually a better choice. ``` ``` Valid timed redirect syntax. Prefer an HTTP redirect unless the visible delay serves a real purpose. ### [X-UA-Compatible](https://zhead.dev/meta/x-ua-compatible) http-equiv A legacy Internet Explorer pragma whose only conforming value is IE=edge. Current user agents must ignore it, so new pages should omit it. ``` ``` The only value allowed by the HTML standard, kept here for reading legacy markup. Current browsers ignore it. --- - **Page:** refresh · Meta Tag · zhead - **Source:** https://zhead.dev/meta/refresh - **Description:** Reloads the current page after a delay or performs a timed redirect. Automatic navigation can confuse users, so a server redirect is usually a better choice. Meta tags # refresh Reloads the current page after a delay or performs a timed redirect. Automatic navigation can confuse users, so a server redirect is usually a better choice. ## Parameters seconds A non-negative integer giving the delay before reload or redirect. ``` ``` URL An optional destination written after a semicolon, whitespace, and URL=. ``` ``` ## Code examples Good example ``` ``` Valid timed redirect syntax. Prefer an HTTP redirect unless the visible delay serves a real purpose. Avoid this example ``` ``` Missing whitespace after the semicolon, so this does not match the current HTML syntax. Good example ``` ``` Reloads a dedicated status page after five minutes. Live updates are usually less disruptive. Avoid this example ``` ``` Frequent full-page reloads can interrupt reading, keyboard focus, and assistive technology. ## Recommendations - 01 Prefer an HTTP Redirect Use a 301 or 308 response for a permanent move, or 302 or 307 for a temporary one. It works before the page loads and is clearer to browsers and crawlers. - 02 Warn Before Automatic Navigation If a timed refresh is unavoidable, give people enough time to read and interact, show the countdown, and provide a link to continue manually. ## Related documentation - [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-http-equiv-refresh) - [Google Search Central: 301 Redirects](https://developers.google.com/search/docs/crawling-indexing/301-redirects) ## Related meta tags ### [Content-Security-Policy](https://zhead.dev/meta/content-security-policy) http-equiv Enforces a Content Security Policy from the document head. A policy limits where scripts, styles, images, connections, and other resources can come from, which reduces the impact of content injection bugs. ``` ``` Uses the same origin by default, blocks plugin content, and limits base URLs to the same origin. ### [content-type](https://zhead.dev/meta/content-type) http-equiv Provides the legacy pragma form of an HTML character encoding declaration. For conforming HTML, its content must be text/html; charset=utf-8. ``` ``` The only conforming content value for this pragma in an HTML document. ### [default-style](https://zhead.dev/meta/default-style) http-equiv Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited. ``` ``` Valid when a linked stylesheet set has the exact title Main Style. ### [refresh](https://zhead.dev/meta/refresh) http-equiv Reloads the current page after a delay or performs a timed redirect. Automatic navigation can confuse users, so a server redirect is usually a better choice. ``` ``` Valid timed redirect syntax. Prefer an HTTP redirect unless the visible delay serves a real purpose. ### [X-UA-Compatible](https://zhead.dev/meta/x-ua-compatible) http-equiv A legacy Internet Explorer pragma whose only conforming value is IE=edge. Current user agents must ignore it, so new pages should omit it. ``` ``` The only value allowed by the HTML standard, kept here for reading legacy markup. Current browsers ignore it. --- - **Page:** content-type · Meta Tag · zhead - **Source:** https://zhead.dev/meta/content-type - **Description:** Provides the legacy pragma form of an HTML character encoding declaration. For conforming HTML, its content must be text/html; charset=utf-8. Meta tags # content-type Provides the legacy pragma form of an HTML character encoding declaration. For conforming HTML, its content must be text/html; charset=utf-8. ## Code examples Good example ``` ``` The only conforming content value for this pragma in an HTML document. Avoid this example ``` ``` Legacy encodings are not allowed in this HTML pragma. Avoid this example ``` ``` This pragma is for HTML and has no place in an XML document. Avoid this example ``` ``` An empty value does not declare an encoding. ## Recommendations - 01 Prefer the Charset Attribute Use \ for new HTML. It says the same thing with less markup. - 02 Do Not Declare It Twice A document must not contain both this pragma and a meta charset declaration. The HTTP Content-Type header should also identify the response as HTML encoded with UTF-8. ## Related documentation - [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-http-equiv-content-type) - [W3C: Qa Html Encoding Declarations.En](https://www.w3.org/International/questions/qa-html-encoding-declarations.en) ## Related meta tags ### [Content-Security-Policy](https://zhead.dev/meta/content-security-policy) http-equiv Enforces a Content Security Policy from the document head. A policy limits where scripts, styles, images, connections, and other resources can come from, which reduces the impact of content injection bugs. ``` ``` Uses the same origin by default, blocks plugin content, and limits base URLs to the same origin. ### [content-type](https://zhead.dev/meta/content-type) http-equiv Provides the legacy pragma form of an HTML character encoding declaration. For conforming HTML, its content must be text/html; charset=utf-8. ``` ``` The only conforming content value for this pragma in an HTML document. ### [default-style](https://zhead.dev/meta/default-style) http-equiv Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited. ``` ``` Valid when a linked stylesheet set has the exact title Main Style. ### [refresh](https://zhead.dev/meta/refresh) http-equiv Reloads the current page after a delay or performs a timed redirect. Automatic navigation can confuse users, so a server redirect is usually a better choice. ``` ``` Valid timed redirect syntax. Prefer an HTTP redirect unless the visible delay serves a real purpose. ### [X-UA-Compatible](https://zhead.dev/meta/x-ua-compatible) http-equiv A legacy Internet Explorer pragma whose only conforming value is IE=edge. Current user agents must ignore it, so new pages should omit it. ``` ``` The only value allowed by the HTML standard, kept here for reading legacy markup. Current browsers ignore it. --- - **Page:** X-UA-Compatible · Meta Tag · zhead - **Source:** https://zhead.dev/meta/x-ua-compatible - **Description:** A legacy Internet Explorer pragma whose only conforming value is IE=edge. Current user agents must ignore it, so new pages should omit it. Meta tags # X-UA-Compatible A legacy Internet Explorer pragma whose only conforming value is IE=edge. Current user agents must ignore it, so new pages should omit it. ## Code examples Good example ``` ``` The only value allowed by the HTML standard, kept here for reading legacy markup. Current browsers ignore it. Avoid this example ``` ``` Version-specific Internet Explorer document modes are non-conforming. Avoid this example ``` ``` An empty pragma has no effect. Omit the element instead. ## Recommendations - 01 Remove It From New Pages Modern Edge, Chrome, Firefox, and Safari do not use Internet Explorer document modes. The tag adds no value for them. - 02 Use the HTML Doctype Start documents with \ so browsers use standards mode. That remains relevant; X-UA-Compatible does not. ## Related documentation - [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-http-equiv-x-ua-compatible) - [Microsoft Learn: Internet Explorer 11 End Of Support](https://learn.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support) ## Related meta tags ### [Content-Security-Policy](https://zhead.dev/meta/content-security-policy) http-equiv Enforces a Content Security Policy from the document head. A policy limits where scripts, styles, images, connections, and other resources can come from, which reduces the impact of content injection bugs. ``` ``` Uses the same origin by default, blocks plugin content, and limits base URLs to the same origin. ### [content-type](https://zhead.dev/meta/content-type) http-equiv Provides the legacy pragma form of an HTML character encoding declaration. For conforming HTML, its content must be text/html; charset=utf-8. ``` ``` The only conforming content value for this pragma in an HTML document. ### [default-style](https://zhead.dev/meta/default-style) http-equiv Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited. ``` ``` Valid when a linked stylesheet set has the exact title Main Style. ### [refresh](https://zhead.dev/meta/refresh) http-equiv Reloads the current page after a delay or performs a timed redirect. Automatic navigation can confuse users, so a server redirect is usually a better choice. ``` ``` Valid timed redirect syntax. Prefer an HTTP redirect unless the visible delay serves a real purpose. ### [X-UA-Compatible](https://zhead.dev/meta/x-ua-compatible) http-equiv A legacy Internet Explorer pragma whose only conforming value is IE=edge. Current user agents must ignore it, so new pages should omit it. ``` ``` The only value allowed by the HTML standard, kept here for reading legacy markup. Current browsers ignore it.