[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71482":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":10,"languages":10,"totalLinesOfCode":10,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":15,"starSnapshotCount":15,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},71482,"HEAD","joshbuchea\u002FHEAD","joshbuchea","A simple guide to HTML \u003Chead> elements","https:\u002F\u002Fhtmlhead.dev",null,30254,1924,650,1,0,5,8,70.15,false,"master",true,[23,24,25,26,27,28,29,30,31,32,33],"favicon","frontend-development","head","html","html5","list","meta-tags","reference","seo","twitter-cards","web-development","2026-06-12 04:01:01","# 🤯 HEAD\n\n> A simple guide to HTML `\u003Chead>` elements\n\n[![Contributors](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fcontributors\u002Fjoshbuchea\u002Fhead.svg?style=for-the-badge)](https:\u002F\u002Fgithub.com\u002Fjoshbuchea\u002FHEAD\u002Fgraphs\u002Fcontributors)\n[![CC0](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-CC0-green.svg?style=for-the-badge)](https:\u002F\u002Fcreativecommons.org\u002Fpublicdomain\u002Fzero\u002F1.0\u002F)\n[![Follow @joshbuchea on Mastodon](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FFollow_@joshbuchea-purple?logo=mastodon&logoColor=white&style=for-the-badge)](https:\u002F\u002Fhachyderm.io\u002F@joshbuchea)\n\n## Table of Contents\n\n- [Recommended Minimum](#recommended-minimum)\n- [Elements](#elements)\n- [Recommended Order](#recommended-order)\n- [Meta](#meta)\n- [Link](#link)\n- [Scripts](#scripts)\n- [Icons](#icons)\n- [Social](#social)\n  - [Open Graph](#open-graph)\n  - [Schema.org](#schemaorg)\n  - [Google JSON-LD Schema](#google-json-ld-schema)\n  - [Pinterest](#pinterest)\n  - [OEmbed](#oembed)\n  - [QQ\u002FWechat](#qqwechat)\n  - [Dublin Core](#dublin-core)\n  - [Fediverse](#fediverse)\n- [Browsers \u002F Platforms](#browsers--platforms)\n  - [Apple iOS](#apple-ios)\n  - [Google Android](#google-android)\n  - [Google Chrome](#google-chrome)\n- [Browsers (Chinese)](#browsers-chinese)\n  - [360 Browser](#360-browser)\n  - [QQ Mobile Browser](#qq-mobile-browser)\n  - [UC Mobile Browser](#uc-mobile-browser)\n- [App Links](#app-links)\n- [Deprecated](#deprecated)\n- [Other Resources](#other-resources)\n- [Related Projects](#related-projects)\n- [Translations](#-translations)\n- [Contributing](#-contributing)\n  - [Guide](#guide)\n- [Contributors](#-contributors)\n- [Author](#-author)\n- [Support](#-support)\n- [License](#-license)\n\n## Recommended Minimum\n\nBelow are the essential elements for any web document (websites\u002Fapps):\n\n```html\n\u003Cmeta charset=\"utf-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\u003C!--\n  The above 2 meta tags should come as early as possible in the \u003Chead>\n  to consistently ensure proper document rendering.\n  Any other head element should come *after* these tags.\n-->\n\u003Ctitle>Page Title\u003C\u002Ftitle>\n```\n\n`meta charset` - defines the encoding of the website, `utf-8` is the standard\n\n`meta name=\"viewport\"` - viewport settings related to mobile responsiveness\n\n`width=device-width` - use the physical width of the device (great for mobile!)\n\n`initial-scale=1` - the initial zoom, 1 means no zoom\n\n## Elements\n\nValid `\u003Chead>` elements include `meta`, `link`, `title`, `style`, `script`, `noscript`, and `base`.\n\nThese elements provide information for how a document should be perceived, and rendered, by web technologies. e.g. browsers, search engines, bots, etc.\n\n```html\n\u003C!--\n  Set the character encoding for this document, so that\n  all characters within the UTF-8 space (such as emoji)\n  are rendered correctly.\n-->\n\u003Cmeta charset=\"utf-8\">\n\n\u003C!-- Set the document's title -->\n\u003Ctitle>Page Title\u003C\u002Ftitle>\n\n\u003C!-- Set the base URL for all relative URLs within the document -->\n\u003Cbase href=\"https:\u002F\u002Fexample.com\u002Fpage.html\">\n\n\u003C!-- Link to an external CSS file -->\n\u003Clink rel=\"stylesheet\" href=\"styles.css\">\n\n\u003C!-- Used for adding in-document CSS -->\n\u003Cstyle>\n  \u002F* ... *\u002F\n\u003C\u002Fstyle>\n\n\u003C!-- JavaScript & No-JavaScript tags -->\n\u003Cscript src=\"script.js\">\u003C\u002Fscript>\n\u003Cscript>\n  \u002F\u002F function(s) go here\n\u003C\u002Fscript>\n\u003Cnoscript>\n  \u003C!-- No JS alternative -->\n\u003C\u002Fnoscript>\n```\n\n## Recommended Order\n\nThe following is the recommended order of elements in the `\u003Chead>` for best performance and correct document rendering:\n\n1. `\u003Cmeta charset>` — Character encoding declaration; **must** appear within the first 1024 bytes of the document\n2. `\u003Cmeta name=\"viewport\">` — Viewport settings; declare early to ensure correct responsive rendering\n3. `\u003Ctitle>` — Document title; placed after encoding\u002Fviewport to prevent potential re-rendering\n4. Other `\u003Cmeta>` tags (description, robots, etc.)\n5. Open Graph \u002F Social meta tags\n6. `\u003Clink rel=\"canonical\">` and other `\u003Clink>` tags (excluding stylesheets and resource hints)\n7. `\u003Clink rel=\"preconnect\">` \u002F `\u003Clink rel=\"dns-prefetch\">` — Resource hints; early to maximize their value\n8. `\u003Clink rel=\"stylesheet\">` — External CSS; stylesheets should come before scripts\n9. `\u003Clink rel=\"icon\">` — Favicons\n10. `\u003Cscript>` — Scripts; use `defer` or `async` where possible to avoid blocking rendering\n\n```html\n\u003Chead>\n  \u003Cmeta charset=\"utf-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n  \u003Ctitle>Page Title\u003C\u002Ftitle>\n\n  \u003Cmeta name=\"description\" content=\"Page description\">\n  \u003C!-- other meta tags -->\n\n  \u003C!-- Open Graph \u002F Social meta tags -->\n  \u003Cmeta property=\"og:title\" content=\"Page Title\">\n  \u003C!-- other social meta tags -->\n\n  \u003Clink rel=\"canonical\" href=\"https:\u002F\u002Fexample.com\u002Fpage.html\">\n  \u003C!-- other link tags (excluding stylesheets and resource hints) -->\n\n  \u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fexample.com\">\n  \u003Clink rel=\"dns-prefetch\" href=\"https:\u002F\u002Fexample.com\">\n\n  \u003Clink rel=\"stylesheet\" href=\"styles.css\">\n\n  \u003Clink rel=\"icon\" href=\"favicon.ico\">\n\n  \u003Cscript defer src=\"script.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n```\n\n## Meta\n\n```html\n\u003C!--\n  The following 2 meta tags should come as early as possible in the \u003Chead>\n  to consistently ensure proper document rendering.\n  Any other head element should come *after* these tags.\n-->\n\u003Cmeta charset=\"utf-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\u003C!--\n  Allows control over where resources are loaded from.\n  Place as early in the \u003Chead> as possible, as the tag\n  only applies to resources that are declared after it.\n-->\n\u003Cmeta http-equiv=\"Content-Security-Policy\" content=\"default-src 'self'\">\n\n\u003C!-- Name of web application (only should be used if the website is used as an app) -->\n\u003Cmeta name=\"application-name\" content=\"Application Name\">\n\n\u003C!-- Theme Color for Chrome, Firefox OS and Opera -->\n\u003Cmeta name=\"theme-color\" content=\"#4285f4\">\n\n\u003C!-- Indicates the supported color schemes for the page (light, dark, or both) -->\n\u003Cmeta name=\"color-scheme\" content=\"light dark\">\n\n\u003C!-- Short description of the document (limit to 150 characters) -->\n\u003C!-- This content *may* be used as a part of search engine results. -->\n\u003Cmeta name=\"description\" content=\"A description of the page\">\n\n\u003C!-- Control the behavior of search engine crawling and indexing -->\n\u003Cmeta name=\"robots\" content=\"index,follow\">\u003C!-- All Search Engines -->\n\u003Cmeta name=\"googlebot\" content=\"index,follow\">\u003C!-- Google Specific -->\n\n\u003C!-- Tells Google not to show the sitelinks search box -->\n\u003Cmeta name=\"google\" content=\"nositelinkssearchbox\">\n\n\u003C!-- Tells Google not to provide a translation for this document -->\n\u003Cmeta name=\"google\" content=\"notranslate\">\n\n\u003C!-- Verify website ownership -->\n\u003Cmeta name=\"google-site-verification\" content=\"verification_token\">\u003C!-- Google Search Console -->\n\u003Cmeta name=\"yandex-verification\" content=\"verification_token\">\u003C!-- Yandex Webmasters -->\n\u003Cmeta name=\"msvalidate.01\" content=\"verification_token\">\u003C!-- Bing Webmaster Center -->\n\u003Cmeta name=\"p:domain_verify\" content=\"code_from_pinterest\">\u003C!-- Pinterest Console-->\n\u003Cmeta name=\"norton-safeweb-site-verification\" content=\"norton_code\">\u003C!-- Norton Safe Web -->\n\n\u003C!-- Identify the software used to build the document (i.e. - WordPress, Dreamweaver) -->\n\u003Cmeta name=\"generator\" content=\"program\">\n\n\u003C!-- Short description of your document's subject -->\n\u003Cmeta name=\"subject\" content=\"your document's subject\">\n\n\u003C!-- Gives a general age rating based on the document's content -->\n\u003Cmeta name=\"rating\" content=\"General\">\n\n\u003C!-- Allows control over how referrer information is passed -->\n\u003Cmeta name=\"referrer\" content=\"no-referrer\">\n\n\u003C!-- Disable automatic detection and formatting of possible phone numbers -->\n\u003Cmeta name=\"format-detection\" content=\"telephone=no\">\n\n\u003C!-- Geo tags -->\n\u003Cmeta name=\"ICBM\" content=\"latitude, longitude\">\u003C!-- Geographic coordinates (latitude, longitude) in decimal degrees; eg. content=\"48.8566, 2.3522\" -->\n\u003Cmeta name=\"geo.position\" content=\"latitude;longitude\">\u003C!-- Geographic coordinates; latitude and longitude are separated by a semicolon -->\n\u003Cmeta name=\"geo.region\" content=\"country[-state]\">\u003C!-- Country code (ISO 3166-1): mandatory, state code (ISO 3166-2): optional; eg. content=\"US\" \u002F content=\"US-NY\" -->\n\u003Cmeta name=\"geo.placename\" content=\"city\u002Ftown\">\u003C!-- eg. content=\"New York City\" -->\n\n\u003C!-- Web Monetization https:\u002F\u002Fwebmonetization.org\u002Fdocs\u002Fgetting-started -->\n\u003Cmeta name=\"monetization\" content=\"$paymentpointer.example\">\n```\n\n**Note:** Geo tags are **not** used by browsers directly — they are intended for search engines, web crawlers, and location-based services to understand the geographic relevance of a page's content. `ICBM` (named after the military ICBM address convention) and `geo.position` both express coordinates in decimal degrees; `ICBM` uses a comma separator while `geo.position` uses a semicolon. `geo.region` identifies the country (and optionally the state\u002Fregion) using ISO codes, and `geo.placename` provides a human-readable place name.\n\n- 📖 [Meta tags that Google understands](https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fcrawling-indexing\u002Fspecial-tags?hl=en)\n- 📖 [WHATWG Wiki: MetaExtensions](https:\u002F\u002Fwiki.whatwg.org\u002Fwiki\u002FMetaExtensions)\n- 📖 [ICBM on Wikipedia](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FICBM_address#Modern_use)\n- 📖 [Geotagging on Wikipedia](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeotagging#HTML_pages)\n\n## Link\n\n```html\n\u003C!-- Points to an external stylesheet -->\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fexample.com\u002Fstyles.css\">\n\n\u003C!-- Helps prevent duplicate content issues -->\n\u003Clink rel=\"canonical\" href=\"https:\u002F\u002Fexample.com\u002Farticle\u002F?page=2\">\n\n\u003C!-- Links to a Web App Manifest — the recommended way to define PWA metadata such as app name, icons, theme_color, and display mode -->\n\u003Clink rel=\"manifest\" href=\"manifest.json\">\n\n\u003C!-- Links to information about the author(s) of the document -->\n\u003Clink rel=\"author\" href=\"humans.txt\">\n\n\u003C!-- Refers to a copyright statement that applies to the link's context -->\n\u003Clink rel=\"license\" href=\"copyright.html\">\n\n\u003C!-- Gives a reference to a location in your document that may be in another language -->\n\u003Clink rel=\"alternate\" href=\"https:\u002F\u002Fes.example.com\u002F\" hreflang=\"es\">\n\n\u003C!-- Provides information about an author or another person\n     Used for RelMeAuth, a distributed form of identity verification.\n     See https:\u002F\u002Fmicroformats.org\u002Fwiki\u002FRelMeAuth to learn more -->\n\u003Clink rel=\"me\" href=\"https:\u002F\u002Fgoogle.com\u002Fprofiles\u002Fthenextweb\" type=\"text\u002Fhtml\">\n\u003Clink rel=\"me\" href=\"mailto:name@example.com\">\n\u003Clink rel=\"me\" href=\"sms:+15035550125\">\n\n\u003C!-- Provides a self reference - useful when the document has multiple possible references -->\n\u003Clink rel=\"self\" type=\"application\u002Fatom+xml\" href=\"https:\u002F\u002Fexample.com\u002Fatom.xml\">\n\n\u003C!-- The previous, and next documents in a series of documents, respectively -->\n\u003Clink rel=\"prev\" href=\"https:\u002F\u002Fexample.com\u002Farticle\u002F?page=1\">\n\u003Clink rel=\"next\" href=\"https:\u002F\u002Fexample.com\u002Farticle\u002F?page=3\">\n\n\u003C!-- Notifies a URL when you link to it on your document\n     More information at https:\u002F\u002Fwebmention.net -->\n\u003Clink rel=\"webmention\" href=\"https:\u002F\u002Fexample.com\u002Fwebmention\">\n\n\u003C!-- Enables posting to your own domain using a Micropub client \n     More information at https:\u002F\u002Findieweb.org\u002FMicropub -->\n\u003Clink rel=\"micropub\" href=\"https:\u002F\u002Fexample.com\u002Fmicropub\">\n\n\u003C!-- Enables you to use your site with IndieAuth, an identity solution that\n     lets you authenticate with your domain name.\n     Read more at https:\u002F\u002Findieauth.net. -->\n\u003Clink rel=\"token_endpoint\" href=\"https:\u002F\u002Fexample.com\u002Ftoken\">\n\u003Clink rel=\"authorization_endpoint\" href=\"https:\u002F\u002Fexample.com\u002Fauth\">\n\n\u003C!-- Open Search -->\n\u003Clink rel=\"search\" href=\"\u002Fopen-search.xml\" type=\"application\u002Fopensearchdescription+xml\" title=\"Search Title\">\n\n\u003C!-- Feeds -->\n\u003Clink rel=\"alternate\" href=\"https:\u002F\u002Ffeeds.feedburner.com\u002Fexample\" type=\"application\u002Frss+xml\" title=\"RSS\">\n\u003Clink rel=\"alternate\" href=\"https:\u002F\u002Fexample.com\u002Ffeed.atom\" type=\"application\u002Fatom+xml\" title=\"Atom 0.3\">\n\n\u003C!-- Prefetching, preloading, prebrowsing -->\n\u003C!-- More info: https:\u002F\u002Fcss-tricks.com\u002Fprefetching-preloading-prebrowsing\u002F -->\n\u003Clink rel=\"dns-prefetch\" href=\"\u002F\u002Fexample.com\u002F\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fwww.example.com\u002F\">\n\u003Clink rel=\"prefetch\" href=\"https:\u002F\u002Fwww.example.com\u002F\">\n\n\u003Clink rel=\"preload\" href=\"image.png\" as=\"image\">\n```\n\n**Note:** The [Web App Manifest](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FProgressive_web_apps\u002FManifest) (`manifest.json`) is the recommended, cross-platform way to declare installable web app properties — including `name`, `icons`, `theme_color`, and `display` mode — in a single file, instead of relying on multiple platform-specific `\u003Cmeta>` tags.\n\n- 📖 [Link Relations](https:\u002F\u002Fwww.iana.org\u002Fassignments\u002Flink-relations\u002Flink-relations.xhtml)\n- 📖 [Web App Manifest (MDN)](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FProgressive_web_apps\u002FManifest)\n\n## Scripts\n\n```html\n\u003C!--\n  Scripts: place \u003Cscript> tags at the end of \u003Cbody> when possible.\n  The following attributes control loading behavior when placed in \u003Chead>:\n-->\n\n\u003C!-- Blocks HTML parsing and content rendering until the script is fetched and executed -->\n\u003Cscript src=\"script.js\">\u003C\u002Fscript>\n\n\u003C!-- The script will be fetched in parallel with parsing and executed as soon as it is available (before parsing completes) -->\n\u003Cscript async src=\"script.js\">\u003C\u002Fscript>\n\n\u003C!-- The script will be fetched in parallel with parsing and executed when the page has finished parsing -->\n\u003Cscript defer src=\"script.js\">\u003C\u002Fscript>\n\n\u003C!-- async takes precedence in modern browsers; defer acts as a fallback for older browsers that don't support async -->\n\u003Cscript async defer src=\"script.js\">\u003C\u002Fscript>\n\n\u003C!-- Inline script -->\n\u003Cscript>\n  \u002F\u002F function(s) go here\n\u003C\u002Fscript>\n\n\u003C!-- Subresource Integrity (SRI): use the integrity attribute to verify that the fetched resource has been delivered without unexpected manipulation -->\n\u003Cscript src=\"https:\u002F\u002Fexample.com\u002Fscript.js\" integrity=\"sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K\u002Fuxy9rx7HNQlGYl1kPzQho1wx4JwY8wC\">\u003C\u002Fscript>\n```\n\n- 📖 [async vs defer attributes](https:\u002F\u002Fwww.growingwiththeweb.com\u002F2014\u002F02\u002Fasync-vs-defer-attributes.html)\n- 📖 [Subresource Integrity](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FSecurity\u002FDefenses\u002FSubresource_Integrity)\n\n## Icons\n\n```html\n\u003C!-- For IE 10 and below -->\n\u003C!-- Place favicon.ico in the root directory - no tag necessary -->\n\n\u003C!-- Icon in the highest resolution we need it for -->\n\u003Clink rel=\"icon\" sizes=\"192x192\" href=\"\u002Fpath\u002Fto\u002Ficon.png\">\n\n\u003C!-- Apple Touch Icon (reuse 192px icon.png) -->\n\u003Clink rel=\"apple-touch-icon\" href=\"\u002Fpath\u002Fto\u002Fapple-touch-icon.png\">\n```\n\n- 📖 [All About Favicons (And Touch Icons)](https:\u002F\u002Fbitsofco.de\u002Fall-about-favicons-and-touch-icons\u002F)\n- 📖 [Favicon Cheat Sheet](https:\u002F\u002Fgithub.com\u002Faudreyfeldroy\u002Ffavicon-cheat-sheet)\n- 📖 [Icons & Browser Colors](https:\u002F\u002Fweb.dev\u002Farticles\u002Ficons-and-browser-colors)\n\n## Social\n\n### Open Graph\n\n> The [Open Graph protocol](https:\u002F\u002Fogp.me\u002F) is the de facto standard for controlling how your content appears when shared on social platforms. Originally created by Facebook, it's now consumed by most major platforms — including LinkedIn, X (as a fallback when Twitter Card tags are absent), Discord, Slack, iMessage, Mastodon, Bluesky, and WhatsApp.\n\n```html\n\u003Cmeta property=\"og:url\" content=\"https:\u002F\u002Fexample.com\u002Fpage.html\">\n\u003Cmeta property=\"og:type\" content=\"website\">\n\u003Cmeta property=\"og:title\" content=\"Content Title\">\n\u003Cmeta property=\"og:image\" content=\"https:\u002F\u002Fexample.com\u002Fimage.jpg\">\n\u003Cmeta property=\"og:image:alt\" content=\"A description of what is in the image (not a caption)\">\n\u003Cmeta property=\"og:description\" content=\"Description Here\">\n\u003Cmeta property=\"og:site_name\" content=\"Site Name\">\n\u003Cmeta property=\"og:locale\" content=\"en_US\">\n\u003Cmeta property=\"article:author\" content=\"\">\n```\n\n- 📖 [Open Graph protocol](https:\u002F\u002Fogp.me\u002F)\n- 🛠 Test your page with the [Facebook Sharing Debugger](https:\u002F\u002Fdevelopers.facebook.com\u002Ftools\u002Fdebug\u002F) or the [LinkedIn Post Inspector](https:\u002F\u002Fwww.linkedin.com\u002Fpost-inspector\u002F)\n\n### Schema.org\n\n```html\n\u003Chtml lang=\"\" itemscope itemtype=\"https:\u002F\u002Fschema.org\u002FArticle\">\n    \u003Chead>\n      \u003Clink rel=\"author\" href=\"\">\n      \u003Clink rel=\"publisher\" href=\"\">\n      \u003Cmeta itemprop=\"name\" content=\"Content Title\">\n      \u003Cmeta itemprop=\"description\" content=\"Content description less than 200 characters\">\n      \u003Cmeta itemprop=\"image\" content=\"https:\u002F\u002Fexample.com\u002Fimage.jpg\">\n```\n\n**Note:** These meta tags require the `itemscope` and `itemtype` attributes to be added to the `\u003Chtml>` tag.\n\n- 📖 [Getting Started - schema.org](https:\u002F\u002Fschema.org\u002Fdocs\u002Fgs.html)\n- 🛠 Test your page with the [Rich Results Test](https:\u002F\u002Fsearch.google.com\u002Ftest\u002Frich-results)\n\n### Google JSON-LD Schema\n\nThe following is used by Google to help provide your site with a knowledge graph result when someone Googles you (this is the pane to the right of the search results that typically appears for larger brands):\n\n```html\n\u003Cscript type=\"application\u002Fld+json\">\n  {\n    \"@context\": \"http:\u002F\u002Fschema.org\",\n    \"@type\": \"Organization\",\n    \"name\": \"yourbrand.com\",\n    \"url\": \"https:\u002F\u002Fwww.yourbrand.com\u002F\",\n    \"logo\": \"https:\u002F\u002Fwww.yourbrand.com\u002Flogo.png\",\n    \"sameAs\": [\n      \"https:\u002F\u002Fwww.facebook.com\u002Fyourbrand\",\n      \"https:\u002F\u002Ftwitter.com\u002Fyourbrand\",\n      \"https:\u002F\u002Fuk.pinterest.com\u002Fyourbrand\u002F\",\n      \"https:\u002F\u002Fwww.instagram.com\u002Fyourbrand\u002F\",\n      \"https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fyourbrand-com\"\n    ]\n  }\n\u003C\u002Fscript>\n```\n\n### Pinterest\n\nPinterest lets you prevent people from saving things from your website, according [to their help center](https:\u002F\u002Fhelp.pinterest.com\u002Fen\u002Fbusiness\u002Farticle\u002Fprevent-saves-to-pinterest-from-your-site). The `description` is optional.\n\n```html\n\u003Cmeta name=\"pinterest\" content=\"nopin\" description=\"Sorry, you can't save from my website!\">\n```\n\n### OEmbed\n\n```html\n\u003Clink rel=\"alternate\" type=\"application\u002Fjson+oembed\"\n  href=\"https:\u002F\u002Fexample.com\u002Fservices\u002Foembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=json\"\n  title=\"oEmbed Profile: JSON\">\n\u003Clink rel=\"alternate\" type=\"text\u002Fxml+oembed\"\n  href=\"https:\u002F\u002Fexample.com\u002Fservices\u002Foembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=xml\"\n  title=\"oEmbed Profile: XML\">\n```\n\n- 📖 [oEmbed format](https:\u002F\u002Foembed.com\u002F)\n\n### QQ\u002FWechat\n\nUsers share web pages to qq wechat will have a formatted message\n\n```html\n\u003Cmeta itemprop=\"name\" content=\"share title\">\n\u003Cmeta itemprop=\"image\" content=\"http:\u002F\u002Fimgcache.qq.com\u002Fqqshow\u002Fac\u002Fv4\u002Fglobal\u002Flogo.png\">\n\u003Cmeta name=\"description\" itemprop=\"description\" content=\"share content\">\n```\n\n- 📖 [Code Format Docs](https:\u002F\u002Fopen.mobile.qq.com\u002Fapi\u002Fmqq\u002Findex#api:setShareInfo)\n\n### Dublin Core\n\n[Dublin Core](https:\u002F\u002Fwww.dublincore.org\u002F) is a metadata vocabulary standardized as [ISO 15836](https:\u002F\u002Fwww.iso.org\u002Fstandard\u002F71339.html) and maintained by the Dublin Core Metadata Initiative (DCMI). It defines fifteen core elements for describing resources and is widely used in digital libraries, institutional repositories, academic publishing, and government portals. To use Dublin Core in HTML, declare the DC namespace and then add the desired elements as `\u003Cmeta>` tags with a `DC.` prefix.\n\n```html\n\u003C!-- Declare the Dublin Core namespace -->\n\u003Clink rel=\"schema.DC\" href=\"https:\u002F\u002Fpurl.org\u002Fdc\u002Felements\u002F1.1\u002F\">\n\n\u003Cmeta name=\"DC.title\" content=\"Page Title\">\n\u003Cmeta name=\"DC.creator\" content=\"Author Name\">\n\u003Cmeta name=\"DC.subject\" content=\"Keywords; Topics\">\n\u003Cmeta name=\"DC.description\" content=\"A brief description of the page content\">\n\u003Cmeta name=\"DC.publisher\" content=\"Publisher Name\">\n\u003Cmeta name=\"DC.contributor\" content=\"Contributor Name\">\n\u003Cmeta name=\"DC.date\" content=\"YYYY-MM-DD\">\n\u003Cmeta name=\"DC.type\" content=\"Text\">\n\u003Cmeta name=\"DC.format\" content=\"text\u002Fhtml\">\n\u003Cmeta name=\"DC.identifier\" content=\"https:\u002F\u002Fexample.com\u002Fpage.html\">\n\u003Cmeta name=\"DC.source\" content=\"https:\u002F\u002Fexample.com\u002Foriginal-source\">\n\u003Cmeta name=\"DC.language\" content=\"en\">\n\u003Cmeta name=\"DC.relation\" content=\"https:\u002F\u002Fexample.com\u002Frelated\">\n\u003Cmeta name=\"DC.coverage\" content=\"Spatial or temporal coverage\">\n\u003Cmeta name=\"DC.rights\" content=\"Copyright Owner Name\">\n```\n\n- 📖 [Dublin Core Metadata Element Set](https:\u002F\u002Fwww.dublincore.org\u002Fspecifications\u002Fdublin-core\u002Fdces\u002F)\n- 📖 [Using Dublin Core in HTML](https:\u002F\u002Fwww.dublincore.org\u002Fspecifications\u002Fdublin-core\u002Fdcq-html\u002F)\n\n### Fediverse\n\nSome Fediverse software such as Mastodon allow you to put your Fediverse handle in a meta tag which will show up in embeds to your website. In addition to the tag you will also need to add your domain to the list of allowed websites in \"Settings -> Public profile -> Verification -> Author attribution\" (for Mastodon).\n\n```html\n\u003Cmeta name=\"fediverse:creator\" content=\"@handle@example.org\">\n```\n\n## Browsers \u002F Platforms\n\n### Apple iOS\n\n```html\n\u003C!-- Smart App Banner -->\n\u003Cmeta name=\"apple-itunes-app\" content=\"app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT\">\n\n\u003C!-- Disable automatic detection and formatting of possible phone numbers -->\n\u003Cmeta name=\"format-detection\" content=\"telephone=no\">\n\n\u003C!-- Launch Icon (180x180px or larger) -->\n\u003Clink rel=\"apple-touch-icon\" href=\"\u002Fpath\u002Fto\u002Fapple-touch-icon.png\">\n\n\u003C!-- Launch Screen Image -->\n\u003Clink rel=\"apple-touch-startup-image\" href=\"\u002Fpath\u002Fto\u002Flaunch.png\">\n\n\u003C!-- Launch Icon Title -->\n\u003Cmeta name=\"apple-mobile-web-app-title\" content=\"App Title\">\n\n\u003C!-- Enable standalone (full-screen) mode -->\n\u003Cmeta name=\"mobile-web-app-capable\" content=\"yes\">\n\n\u003C!-- Status bar appearance (has no effect unless standalone mode is enabled) -->\n\u003Cmeta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\">\n\n\u003C!-- Viewport fit for notched phones (iPhone X and later); add viewport-fit=cover to your existing viewport meta tag -->\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n\n\u003C!-- iOS app deep linking -->\n\u003Cmeta name=\"apple-itunes-app\" content=\"app-id=APP-ID, app-argument=http\u002Furl-sample.com\">\n\u003Clink rel=\"alternate\" href=\"ios-app:\u002F\u002FAPP-ID\u002Fhttp\u002Furl-sample.com\">\n```\n\n- 📖 [Configuring Web Applications](https:\u002F\u002Fdeveloper.apple.com\u002Flibrary\u002Farchive\u002Fdocumentation\u002FAppleApplications\u002FReference\u002FSafariWebContent\u002FConfiguringWebApplications\u002FConfiguringWebApplications.html)\n\n**Note:** Properties such as app title (`apple-mobile-web-app-title`), standalone\u002Fdisplay mode, and app icons (`apple-touch-icon`) are more reliably and portably configured using the [Web App Manifest](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FProgressive_web_apps\u002FManifest) (`\u003Clink rel=\"manifest\">`), which is the recommended approach for Progressive Web Apps (PWAs). The Apple-specific meta tags remain useful as a fallback for older iOS versions.\n\n### Google Android\n\n```html\n\u003Cmeta name=\"theme-color\" content=\"#E64545\">\n\n\u003C!-- Add to home screen -->\n\u003Cmeta name=\"mobile-web-app-capable\" content=\"yes\">\n\u003C!-- More info: https:\u002F\u002Fdeveloper.chrome.com\u002Fmultidevice\u002Fandroid\u002Finstalltohomescreen -->\n\n\u003C!-- Android app deep linking -->\n\u003Cmeta name=\"google-play-app\" content=\"app-id=package-name\">\n\u003Clink rel=\"alternate\" href=\"android-app:\u002F\u002Fpackage-name\u002Fhttp\u002Furl-sample.com\">\n```\n\n**Note:** `theme-color` and the \"add to home screen\" \u002F standalone behavior are better defined using the [Web App Manifest](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FProgressive_web_apps\u002FManifest) (`\u003Clink rel=\"manifest\">`). The `theme-color` meta tag can still serve as a fallback for browsers that do not yet support the manifest `theme_color` property.\n\n### Google Chrome\n\n```html\n\u003Clink rel=\"chrome-webstore-item\" href=\"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002FAPP_ID\">\n\n\u003C!-- Disable translation prompt -->\n\u003Cmeta name=\"google\" content=\"notranslate\">\n```\n\n## Browsers (Chinese)\n\n### 360 Browser\n\n```html\n\u003C!-- Select rendering engine order -->\n\u003Cmeta name=\"renderer\" content=\"webkit|ie-comp|ie-stand\">\n```\n\n### QQ Mobile Browser\n\n```html\n\u003C!-- Locks the screen into the specified orientation -->\n\u003Cmeta name=\"x5-orientation\" content=\"landscape\u002Fportrait\">\n\n\u003C!-- Display this document in fullscreen -->\n\u003Cmeta name=\"x5-fullscreen\" content=\"true\">\n\n\u003C!-- Document will be displayed in \"application mode\" (fullscreen, etc.) -->\n\u003Cmeta name=\"x5-page-mode\" content=\"app\">\n```\n\n### UC Mobile Browser\n\n```html\n\u003C!-- Locks the screen into the specified orientation -->\n\u003Cmeta name=\"screen-orientation\" content=\"landscape\u002Fportrait\">\n\n\u003C!-- Display this document in fullscreen -->\n\u003Cmeta name=\"full-screen\" content=\"yes\">\n\n\u003C!-- UC browser will display images even if in \"text mode\" -->\n\u003Cmeta name=\"imagemode\" content=\"force\">\n\n\u003C!-- Document will be displayed in \"application mode\"(fullscreen, forbidding gesture, etc.) -->\n\u003Cmeta name=\"browsermode\" content=\"application\">\n\n\u003C!-- Disabled the UC browser's \"night mode\" for this document -->\n\u003Cmeta name=\"nightmode\" content=\"disable\">\n\n\u003C!-- Simplify the document to reduce data transfer -->\n\u003Cmeta name=\"layoutmode\" content=\"fitscreen\">\n\n\u003C!-- Disable the UC browser's feature of \"scaling font up when there are many words in this document\" -->\n\u003Cmeta name=\"wap-font-scale\" content=\"no\">\n```\n\n- 📖 [UC Browser Docs](https:\u002F\u002Fwww.uc.cn\u002Fdownload\u002FUCBrowser_U3_API.doc)\n\n## App Links\n\n```html\n\u003C!-- iOS -->\n\u003Cmeta property=\"al:ios:url\" content=\"applinks:\u002F\u002Fdocs\">\n\u003Cmeta property=\"al:ios:app_store_id\" content=\"12345\">\n\u003Cmeta property=\"al:ios:app_name\" content=\"App Links\">\n\n\u003C!-- Android -->\n\u003Cmeta property=\"al:android:url\" content=\"applinks:\u002F\u002Fdocs\">\n\u003Cmeta property=\"al:android:app_name\" content=\"App Links\">\n\u003Cmeta property=\"al:android:package\" content=\"org.applinks\">\n\n\u003C!-- Web fall back -->\n\u003Cmeta property=\"al:web:url\" content=\"https:\u002F\u002Fapplinks.org\u002Fdocumentation\">\n```\n\n- 📖 [App Links](https:\u002F\u002Fdevelopers.facebook.com\u002Fdocs\u002Fapplinks)\n\n## Deprecated\n\nFor tags and elements that were once part of this guide but are no longer supported (Internet Explorer compatibility, Safari Pinned Tabs, Alexa verification, etc.), see [DEPRECATED.md](https:\u002F\u002Fgithub.com\u002Fjoshbuchea\u002FHEAD\u002Fblob\u002Fmaster\u002FDEPRECATED.md).\n\n## Other Resources\n\n- 📖 [HTML5 Boilerplate Docs: The HTML](https:\u002F\u002Fgithub.com\u002Fh5bp\u002Fhtml5-boilerplate\u002Fblob\u002Fmain\u002Fdocs\u002Fhtml.md)\n- 📖 [HTML5 Boilerplate Docs: Extend and customize](https:\u002F\u002Fgithub.com\u002Fh5bp\u002Fhtml5-boilerplate\u002Fblob\u002Fmain\u002Fdocs\u002Fextend.md)\n\n## Related Projects\n\n- [Atom HTML Head Snippets](https:\u002F\u002Fgithub.com\u002Fjoshbuchea\u002Fatom-html-head-snippets) - Atom package for `HEAD` snippets\n- [Sublime Text HTML Head Snippets](https:\u002F\u002Fgithub.com\u002Fmarcobiedermann\u002Fsublime-head-snippets) - Sublime Text package for `HEAD` snippets\n- [head-it](https:\u002F\u002Fgithub.com\u002Fhemanth\u002Fhead-it) - CLI interface for `HEAD` snippets\n- [vue-head](https:\u002F\u002Fgithub.com\u002Fktquez\u002Fvue-head) - Manipulating the meta information of the `HEAD` tag for Vue.js\n\n## 🌐 Translations\n\n- [Bahasa](https:\u002F\u002Fgithub.com\u002Frijdz\u002FHEAD)\n- [Bengali](https:\u002F\u002Fgithub.com\u002FAveyBD\u002FHEAD)\n- [Brazilian Portuguese](https:\u002F\u002Fgithub.com\u002FWebschool-io\u002FHEAD)\n- [Chinese (Simplified)](https:\u002F\u002Fgithub.com\u002FAmery2010\u002FHEAD)\n- [German](https:\u002F\u002Fgithub.com\u002FShidigital\u002FHEAD)\n- [Italian](https:\u002F\u002Fgithub.com\u002FFakkio\u002FHEAD)\n- [Japanese](https:\u002F\u002Fcoliss.com\u002Farticles\u002Fbuild-websites\u002Foperation\u002Fwork\u002Fcollection-of-html-head-elements.html)\n- [Korean](https:\u002F\u002Fgithub.com\u002FLutece\u002FHEAD)\n- [Malay](https:\u002F\u002Fgithub.com\u002Fshoen1x\u002FHEAD)\n- [Russian\u002FРусский](https:\u002F\u002Fgithub.com\u002FKonfuze\u002FHEAD)\n- [Spanish](https:\u002F\u002Fgithub.com\u002Falvaroadlf\u002FHEAD)\n- [Turkish\u002FTürkçe](https:\u002F\u002Fgithub.com\u002Fmkg0\u002FHEAD)\n- [Ukrainian](https:\u002F\u002Fgithub.com\u002FShramkoweb\u002FHEAD)\n\n## 🤝 Contributing\n\n**Open an issue or a pull request to suggest changes or additions.**\n\n### Guide\n\nThe **HEAD** repository consists of two branches:\n\n#### 1. `master`\n\nThis branch consists of the `README.md` file that is reflected on the [htmlhead.dev](https:\u002F\u002Fhtmlhead.dev\u002F) website. All changes to the content of the guide should be made in this file.\n\nPlease follow these steps for pull requests:\n\n{:.list-style-default}\n\n- Modify only one tag, or one related set of tags at a time\n- Use double quotes on attributes\n- Don't include a trailing slash in self-closing elements — the HTML5 spec says they're optional\n- Consider including a link to documentation that supports your change\n\n#### 2. `gh-pages`\n\nThis branch is responsible for the [htmlhead.dev](https:\u002F\u002Fhtmlhead.dev\u002F) website. We use [Jekyll](https:\u002F\u002Fjekyllrb.com\u002F) to deploy the `README.md` markdown file to [GitHub Pages](https:\u002F\u002Fpages.github.com\u002F). All website related modifications should be made in this branch.\n\nYou may find it helpful to review the [Jekyll Docs](https:\u002F\u002Fjekyllrb.com\u002Fdocs\u002Fhome\u002F) and understand how Jekyll works before working in this branch.\n\n## 🌟 Contributors\n\nCheck out all the super awesome [contributors](https:\u002F\u002Fgithub.com\u002Fjoshbuchea\u002FHEAD\u002Fgraphs\u002Fcontributors) 🤩\n\n## 👤 Author\n\n**Josh Buchea**\n\n- GitHub: [@joshbuchea](https:\u002F\u002Fgithub.com\u002Fjoshbuchea)\n- Mastodon: [@joshbuchea@hachyderm.io](https:\u002F\u002Fhachyderm.io\u002F@joshbuchea)\n\n## 💛 Support\n\nIf this project was helpful for you or your organization, please considering supporting my work directly:\n\n- 💛 [Sponsor me on GitHub](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fjoshbuchea)\n- ⭐️ [Star this project on GitHub](https:\u002F\u002Fgithub.com\u002Fjoshbuchea\u002FHEAD)\n- 🐙 [Follow me on GitHub](https:\u002F\u002Fgithub.com\u002Fjoshbuchea)\n- 🐘 [Follow me on Mastodon](https:\u002F\u002Fhachyderm.io\u002F@joshbuchea)\n\nEverything helps, thanks! 🙏\n\n— Josh\n\n## 📝 License\n\n[![CC0](https:\u002F\u002Flicensebuttons.net\u002Fp\u002Fzero\u002F1.0\u002F88x31.png)](https:\u002F\u002Fcreativecommons.org\u002Fpublicdomain\u002Fzero\u002F1.0\u002F)\n","该项目是一个关于HTML `\u003Chead>`元素的简洁指南。它提供了对`\u003Chead>`标签内各种元素如`meta`、`link`、`title`等的详细介绍，以及推荐的最佳实践和使用顺序，帮助开发者优化网页性能、SEO及社交媒体分享效果。特别适合前端开发人员在构建网站或应用时参考，以确保文档能够被浏览器、搜索引擎和其他网络技术正确解析与呈现。",2,"2026-06-11 03:37:59","high_star"]