Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π§Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π² Ρ‚Π΅Π³ / Π₯Π°Π±Ρ€

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ основныС элСмСнты для любого Π²Π΅Π±-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° (Π²Π΅Π±-сайта/прилоТСния):

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--
   Π’Ρ‹ΡˆΠ΅ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ 2 ΠΌΠ΅Ρ‚Π°-Ρ‚Π΅Π³Π° *Π΄ΠΎΠ»ΠΆΠ½Ρ‹* ΡΡ‚ΠΎΡΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π½ΡŒΡˆΠ΅ Π² <head>.
   для обСспСчСния ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ отобраТСния Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ².
   Π›ΡŽΠ±ΠΎΠΉ Π΄Ρ€ΡƒΠ³ΠΎΠΉ элСмСнт Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠ΄Ρ‚ΠΈ *послС* этих Ρ‚Π΅Π³ΠΎΠ².
  -->
  <title>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ страницы</title>
</head>

meta charsetΒ — опрСдСляСт ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΡƒ Π²Π΅Π±-сайта, стандартом являСтся utf-8.

meta name="viewport"Β — настройки viewport, связанныС с мобильной ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒΡŽ

width=device-widthΒ — физичСская ΡˆΠΈΡ€ΠΈΠ½Π° устройства (ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств!)

initial-scale=1Β — Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°ΡΡˆΡ‚Π°Π±, 1 ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ отсутствиС ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹

ДопустимыС элСмСнты <head> Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚

base, link, meta, noscript, script, style, template ΠΈ title.

Π­Ρ‚ΠΈ элСмСнты ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π²Π΅Π±-тСхнологиями, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, поисковыми систСмами, Π±ΠΎΡ‚Π°ΠΌΠΈ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.

<!--
 УстановитС ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΡƒ символов для этого Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹
 всС символы Π² пространствС UTF-8 (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, эмодзи)
 ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ.
-->
<meta charset="utf-8">
<!-- УстановитС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° -->
<title>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ страницы</title>
<!-- УстановитС Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ URL для всСх ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… URL Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ -->
<base href="https://example.com/page.html">
<!-- Бсылка Π½Π° внСшний Ρ„Π°ΠΉΠ» CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для добавлСния CSS Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π²Π°ΠΆΠ½ΠΎΠΉ стилизации -->
<style>
/* ... */
</style>
<!-- Бсылка Π½Π° внСшний JavaScript Ρ„Π°ΠΉΠ» -->
<script src="script.js"></script>
<!-- Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ JS Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚-->
<script>
 // функция(ΠΈ) ΠΈΠ΄ΡƒΡ‚ здСсь
</script>
<!-- Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π° случай Ссли JavaScript ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ -->
<noscript>
 <!-- ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π°, ΠΊΠΎΠ³Π΄Π° JS ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ -->
</noscript>
<!-- Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для объявлСния HTML-Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ»ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ ΠΈ вставлСны Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.
Если ΡƒΠΊΠ°Π·Π°Π½ Π² <head>, Ρ‚ΠΎ <template> ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅ --> <template> </template>

ΠœΠ΅Ρ‚Π°

<!--
 Π’Ρ‹ΡˆΠ΅ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ 2 ΠΌΠ΅Ρ‚Π°-Ρ‚Π΅Π³Π° Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΡ‚ΠΎΡΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π½ΡŒΡˆΠ΅ Π² <head>.
 для обСспСчСния ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ отобраТСния Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ².
 Π›ΡŽΠ±ΠΎΠΉ Π΄Ρ€ΡƒΠ³ΠΎΠΉ элСмСнт Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠ΄Ρ‚ΠΈ послС этих Ρ‚Π΅Π³ΠΎΠ².
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
 ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΎΡ‚ΠΊΡƒΠ΄Π° Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ рСсурсы.
 ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π½ΡŒΡˆΠ΅ Π² <head>, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρ‚Π΅Π³ 
 примСняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ рСсурсам, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±ΡŠΡΠ²Π»Π΅Π½Ρ‹ послС Π½Π΅Π³ΠΎ.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- НазваниС Π²Π΅Π±-прилоТСния (Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ‚ΠΎΠΌ случаС, Ссли Π²Π΅Π±-сайт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅) -->
<meta name="application-name" content="Имя прилоТСния">.
<!-- Π¦Π²Π΅Ρ‚ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ для Chrome Π½Π° Android, Vivaldi, Safari 15 -->
<meta name="theme-color" content="#4285f4">
<!-- ΠšΡ€Π°Ρ‚ΠΊΠΎΠ΅ описаниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° (ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ Π΄ΠΎ 150 символов) -->
<!-- Π­Ρ‚ΠΎ содСрТимоС ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°Ρ… поисковых систСм.
--> <meta name="description" content="ОписаниС страницы">. <!-- Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ поисковых машин ΠΏΡ€ΠΈ осмотрС ΠΈ индСксации сайта --> <meta name="robots" content="index,follow"><!-- ВсС поисковыС систСмы --> <meta name="googlebot" content="index,follow"><!-- Π‘ΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ° Google --> <!-- Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Google Π½Π΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡƒΡŽ строку sitelinks --> <meta name="google" content="nositelinkssearchbox"> <!-- Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Google Π½Π΅ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ --> <meta name="google" content="notranslate"> <!-- ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΎ собствСнности сайта --> <meta name="google-site-verification" content="verification_token"><!-- Google Search Console --> <meta name="yandex-verification" content="verification_token"><!-- ЯндСкс ВСбмастСрам --> <meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center --> <meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console --> <meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console--> <meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web --> <!-- Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС, использованноС для создания Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, WordPress, Dreamweaver) --> <meta name="generator" content="Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния"> <!-- ΠšΡ€Π°Ρ‚ΠΊΠΎΠ΅ описаниС Ρ‚Π΅ΠΌΡ‹ вашСго Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° --> <meta name="subject" content="Ρ‚Π΅ΠΌΠ° вашСго Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°"> <!-- Π”Π°Π΅Ρ‚ ΠΎΠ±Ρ‰ΡƒΡŽ Π²ΠΎΠ·Ρ€Π°ΡΡ‚Π½ΡƒΡŽ ΠΎΡ†Π΅Π½ΠΊΡƒ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡƒΡŽ Π½Π° содСрТании Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° --> <meta name="rating" content="General"> <!-- ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ пСрСдаСтся информация ΠΎ Ρ€Π΅Ρ„Π΅Ρ€Π΅Ρ€Π΅ --> <meta name="referrer" content="no-referrer"> <!-- ΠžΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ автоматичСскоС ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π½Ρ‹Ρ… Π½ΠΎΠΌΠ΅Ρ€ΠΎΠ² --> <meta name="format-detection" content="phone=no"> <!-- ΠŸΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π²Ρ‹Π±ΠΎΡ€ΠΊΠΈ DNS, установив Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ "off" --> <meta http-equiv="x-dns-prefetch-control" content="off"> <!-- Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠ΅ --> <meta http-equiv="Window-Target" content="_value"> <!-- Π“Π΅ΠΎ-Ρ‚Π΅Π³ΠΈ --> <meta name="ICBM" content="ΡˆΠΈΡ€ΠΎΡ‚Π°, Π΄ΠΎΠ»Π³ΠΎΡ‚Π°">.
<meta name="geo.position" content="ΡˆΠΈΡ€ΠΎΡ‚Π°;Π΄ΠΎΠ»Π³ΠΎΡ‚Π°"> <meta name="geo.region" content="country[-state]"><!-- Код страны (ISO 3166-1): ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ, ΠΊΠΎΠ΄ ΡˆΡ‚Π°Ρ‚Π° (ISO 3166-2): Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ; Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, content="US" / content="US-NY" --> <meta name="geo.placename" content="city/town"><!-- Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, content="New York City" --> <!-- ΠœΠΎΠ½Π΅Ρ‚ΠΈΠ·Π°Ρ†ΠΈΡ Π²Π΅Π±-сайтов https://webmonetization.org/docs/getting-started --> <meta name="monetization" content="$paymentpointer.example">
  • β€‹Β ΠœΠ΅Ρ‚Π°-Ρ‚Π΅Π³ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ Google

  • ​ WHATWG Wiki: MetaExtensions

  • ​ ICBM Π² Π’ΠΈΠΊΠΈΠΏΠ΅Π΄ΠΈΠΈ

  • ​ ГСотСги Π² Π’ΠΈΠΊΠΈΠΏΠ΅Π΄ΠΈΠΈ

Бсылки

<!-- ΠŸΡƒΡ‚ΡŒ Π΄ΠΎ внСшнСй Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй -->
<link rel="stylesheet" href="https://example.com/styles.css">.
<!-- ΠŸΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° -->
<link rel="canonical" href="https://example.com/article/?page=2">
<!-- Бсылки Π½Π° AMP HTML Π²Π΅Ρ€ΡΠΈΡŽ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° -->
<link rel="amphtml" href="https://example.
com/path/to/amp-version.html"> <!-- Бсылка Π½Π° JSON-Ρ„Π°ΠΉΠ», Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ Π΄Π°Π½Π½Ρ‹Π΅ для "установки" Π²Π΅Π±-прилоТСния --> <link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.webmanifest"> <!-- Бсылки Π½Π° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎΠ± Π°Π²Ρ‚ΠΎΡ€Π΅ (Π°Π²Ρ‚ΠΎΡ€Π°Ρ…) Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° --> <link rel="author" href="humans.txt"> <!-- БсылаСтся Π½Π° заявлСниС ΠΎΠ± авторском ΠΏΡ€Π°Π²Π΅, ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎΠ΅ ΠΊ контСксту ссылки --> <link rel="license" href="copyright.html"> <!-- Π”Π°Π΅Ρ‚ ссылку Π½Π° мСсто Π² вашСм Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ языкС --> <link rel="alternate" href="https://es.example.com/" hreflang="es"> <!-- ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎΠ± Π°Π²Ρ‚ΠΎΡ€Π΅ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΌ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ΅ --> <link rel="me" href="https://google.com/profiles/thenextweb" type="text/html"> <link rel="me" href="mailto:[email protected]">. <link rel="me" href="sms:+15035550125"> <!-- Бсылки Π½Π° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ записСй, Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ², ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… историчСский интСрСс --> <link rel="archives" href="https://example.
com/archives/"> <!-- Бсылки Π½Π° рСсурс Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ уровня Π² иСрархичСской структурС --> <link rel="index" href="https://example.com/article/"> <!-- ΠžΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°Π΅Ρ‚ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ссылку - ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… ссылок --> <link rel="self" type="application/atom+xml" href="https://example.com/atom.xml"> <!-- ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ, послСдний, ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ ΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Π² сСрии Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ², соотвСтствСнно --> <link rel="first" href="https://example.com/article/"> <link rel="last" href="https://example.com/article/?page=42"> <link rel="prev" href="https://example.com/article/?page=1"> <link rel="next" href="https://example.com/article/?page=3"> <!-- Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° для вСдСния Π±Π»ΠΎΠ³Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ сторонний сСрвис --> <link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD"> <!-- Π€ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ автоматичСский ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, ΠΊΠΎΠ³Π΄Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π±Π»ΠΎΠ³ WordPress ссылаСтся Π½Π° ваш Π±Π»ΠΎΠ³ WordPress ΠΈΠ»ΠΈ пост --> <link rel="pingback" href="https://example.
com/xmlrpc.php"> <!-- УвСдомляСт URL, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΡΡΡ‹Π»Π°Π΅Ρ‚Π΅ΡΡŒ Π½Π° Π½Π΅Π³ΠΎ Π² вашСм Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ --> <link rel="webmention" href="https://example.com/webmention"> <!-- ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ сообщСния Π½Π° вашСм собствСнном Π΄ΠΎΠΌΠ΅Π½Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° Micropub --> <link rel="micropub" href="https://example.com/micropub"> <!-- Open Search --> <link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ поиска">. <!-- Π€ΠΈΠ΄Ρ‹ --> <link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS"> <link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3"> <!-- Prefetching, preloading, prebrowsing --> <!-- Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ информация: https://css-tricks.com/prefetching-preloading-prebrowsing/ --> <link rel="dns-prefetch" href="//example.com/"> <link rel="preconnect" href="https://www.example.com/"> <link rel="prefetch" href="https://www. example.com/"> <link rel="prerender" href="https://example.com/">. <link rel="preload" href="image.png" as="image">
  • ​ Link Relations

Иконки

<!-- Для IE 10 ΠΈ Π½ΠΈΠΆΠ΅ -->
<!-- ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ favicon.ico Π² ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΉ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ - Ρ‚Π΅Π³ Π½Π΅ Π½ΡƒΠΆΠ΅Π½ -->
<!-- Иконка Π² максимальном Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΎΠ½Π° Π½Π°ΠΌ Π½ΡƒΠΆΠ½Π° -->
<link rel="icon" href="/path/to/icon.png">
<!-- Иконка Apple Touch (ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ΅ использованиС 192px icon.png) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- Π—Π½Π°Ρ‡ΠΎΠΊ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Safari -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">
  • ​ ВсС ΠΎ Ρ„Π°Π²ΠΈΠΊΠΎΠ½Π°Ρ… (ΠΈ сСнсорных ΠΈΠΊΠΎΠ½ΠΊΠ°Ρ…)

  • ​ БозданиС ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ

  • ​ Favicon Cheat Sheet

  • β€‹Β Π˜ΠΊΠΎΠ½ΠΊΠΈ ΠΈ Ρ†Π²Π΅Ρ‚Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

Π‘ΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ сСти

Facebook Open Graph

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² пСрСдаСтся Π½Π° Facebook Π² Π²ΠΈΠ΄Π΅ URL, поэтому Π²Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ свой сайт Ρ‚Π΅Π³Π°ΠΌΠΈ Open Graph, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π·ΡΡ‚ΡŒ ΠΏΠΎΠ΄ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Ρ‚ΠΎ, ΠΊΠ°ΠΊ ваши ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π° Facebook. Β ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ Facebook Open Graph

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ содСрТимого">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:alt" content="ОписаниС Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ находится Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ (Π½Π΅ подпись)">
<meta property="og:description" content="ОписаниС">
<meta property="og:site_name" content="НазваниС сайта">
<meta property="og:locale" content="ru_RU">
<meta property="article:author" content="">
  • ​ Open Graph protocol

  • β€‹Β ΠŸΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ свою страницу с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽΒ Facebook Sharing Debugger

Twitter Card

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Twitter Cards Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»ΡΡ‚ΡŒ ΠΊ Ρ‚Π²ΠΈΡ‚Π°ΠΌ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹, Ρ‚Π΅ΠΌ самым способствуя ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Π½ΠΈΡŽ Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ° Π½Π° ваш сайт. Β ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ Twitter Cards

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°">.
<meta name="twitter:description" content="ОписаниС ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΌΠ΅Π½Π΅Π΅ 200 символов">.
<meta name="twitter:image" content="https://example.com/image.jpg">.
<meta name="twitter:image:alt" content="ВСкстовоС описаниС изобраТСния, ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‰Π΅Π΅ Π΅Π³ΠΎ ΡΡƒΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ с ослаблСнным Π·Ρ€Π΅Π½ΠΈΠ΅ΠΌ. ΠœΠ°ΠΊΡΠΈΠΌΡƒΠΌ 420 символов.">
  • ​ Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ — Twitter Developers

  • β€‹Β ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ свою страницу с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽΒ Twitter Card Validator

Twitter Privacy

Если Π²Ρ‹ встраиваСтС Ρ‚Π²ΠΈΡ‚Ρ‹ Π² свой сайт, Twitter ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ с вашСго сайта для Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠΉ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Twitter. Β ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ возмоТностях ΠΊΠΎΠ½Ρ„ΠΈΠ΄Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Twitter.

<!-- Π·Π°ΠΏΡ€Π΅Ρ‚ΠΈΡ‚ΡŒ Twitter ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ вашСм сайтС Π² цСлях пСрсонализации -->
<meta name="twitter:dnt" content="on">
Schema.org
<html lang="" itemscope itemtype="https://schema.org/Article">
   <head>
     <link rel="author" href="">
     <link rel="publisher" href="">
     <meta itemprop="name" content="Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°">.
     <meta itemprop="description" content="ОписаниС содСрТимого ΠΌΠ΅Π½Π΅Π΅ 200 символов">.
     <meta itemprop="image" content="https://example.com/image.jpg">

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅:Β Π­Ρ‚ΠΈ ΠΌΠ΅Ρ‚Π°-Ρ‚Π΅Π³ΠΈ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ добавлСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ²Β itemscopeΒ ΠΈΒ itemtypeΒ ΠΊ Ρ‚Π΅Π³ΡƒΒ <html>.

  • ​ Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ — schema.org

  • β€‹Β ΠŸΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ свою страницу с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽΒ Rich Results Test

Pinterest

Pinterest позволяСт Π·Π°ΠΏΡ€Π΅Ρ‚ΠΈΡ‚ΡŒ людям ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ страницы вашСго сайта, согласно их Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΏΠΎΠΌΠΎΡ‰ΠΈ. ОписаниС description являСтся Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ.

<meta name="pinterest" content="nopin" description="Π˜Π·Π²ΠΈΠ½ΠΈΡ‚Π΅, Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ с ΠΌΠΎΠ΅Π³ΠΎ сайта!">.
Facebook Instant Articles
<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">
<!-- URL Π²Π΅Π±-вСрсии вашСй ΡΡ‚Π°Ρ‚ΡŒΠΈ -->
<link rel="canonical" href="https://example.com/article.html">
<!-- Π‘Ρ‚ΠΈΠ»ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для этой ΡΡ‚Π°Ρ‚ΡŒΠΈ -->
<meta property="fb:article_style" content="myarticlestyle">
  • ​ БозданиС статСй — ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½Ρ‹Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

  • β€‹Β ΠžΠ±Ρ€Π°Π·Ρ†Ρ‹ ΠΊΠΎΠ΄Π° — ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½Ρ‹Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

OEmbed
<link rel="alternate" type="application/json+oembed"
 href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"
 title="ΠŸΡ€ΠΎΡ„ΠΈΠ»ΡŒ oEmbed: JSON">
 
<link rel="alternate" type="text/xml+oembed"
 href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"
 title="oEmbed Profile: XML">
  • ​ oEmbed format

QQ/Wechat

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΎΠ±ΠΌΠ΅Π½ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π²Π΅Π±-страницами Π² qq wechat с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ сообщСния

<meta itemprop="name" content="Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π°ΠΊΡ†ΠΈΠΈ">
<meta itemprop="image" content="http://imgcache. qq.com/qqshow/ac/v4/global/logo.png">
<meta name="description" itemprop="description" content="ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ содСрТимым">
  • ​ Code Format Docs

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ / ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹

Apple iOS
<!-- Π‘Π°Π½Π½Π΅Ρ€ ΡƒΠΌΠ½ΠΎΠ³ΠΎ прилоТСния -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
<!-- ΠžΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ автоматичСскоС ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π½Ρ‹Ρ… Π½ΠΎΠΌΠ΅Ρ€ΠΎΠ² -->
<meta name="format-detection" content="phone=no">
<!-- Иконка запуска (180x180px ΠΈΠ»ΠΈ большС) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ экрана запуска -->
<link rel="apple-touch-startup-image" href="/path/to/launch.png">
<!-- Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π·Π½Π°Ρ‡ΠΊΠ° запуска -->
<meta name="apple-mobile-web-app-title" content="НазваниС прилоТСния">.
<!-- Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½Ρ‹ΠΉ (полноэкранный) Ρ€Π΅ΠΆΠΈΠΌ -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ строки состояния (Π½Π΅ влияСт, Ссли Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Π“Π»ΡƒΠ±ΠΎΠΊΠΎΠ΅ связываниС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ iOS -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample. com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">
  • ​ Configuring Web Applications

Google Android
<!-- ЦвСтовая Ρ‚Π΅ΠΌ прилоТСния -->
<meta name="theme-color" content="#E64545">
<!-- Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π° Π³Π»Π°Π²Π½Ρ‹ΠΉ экран -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ информация: https://developer.chrome.com/multidevice/android/installtohomescreen -->
<!-- Π“Π»ΡƒΠ±ΠΎΠΊΠΎΠ΅ связываниС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Android -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">
Google Chrome
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">.
<!-- ΠžΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ подсказку ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π° -->
<meta name="google" content="notranslate">
Microsoft Internet Explorer
<!-- Π—Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ IE 8/9/10 ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свой послСдний Π΄Π²ΠΈΠΆΠΎΠΊ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- ΠžΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ автоматичСскоС ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π½Ρ‹Ρ… Π½ΠΎΠΌΠ΅Ρ€ΠΎΠ² Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Skype Toolbar-->
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<!-- ΠŸΠ»ΠΈΡ‚ΠΊΠΈ Windows -->
<meta name="msapplication-config" content="/browserconfig. xml">

Минимально нСобходимая Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° xml для browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="small.png"/>
            <square150x150logo src="medium.png"/>
            <wide310x150logo src="wide.png"/>
            <square310x310logo src="large.png"/>
        </tile>
    </msapplication>
</browserconfig>
  • ​ Бсылка Π½Π° схСму ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ (китайскиС)

360 Browser
<!-- Π’Ρ‹Π±ΠΎΡ€ порядка Π΄Π²ΠΈΠΆΠΊΠΎΠ² Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
QQ Mobile Browser
<!-- ЀиксируСт экран Π² Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ этого Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π² полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ΅ -->
<meta name="x5-fullscreen" content="true">
<!-- Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² "Ρ€Π΅ΠΆΠΈΠΌΠ΅ прилоТСния" (полноэкранный Ρ€Π΅ΠΆΠΈΠΌ ΠΈ Ρ‚. Π΄.) -->
<meta name="x5-page-mode" content="app">
UC Mobile Browser
<!-- Ѐиксация экрана Π² Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ этого Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π² полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ΅ -->
<meta name="full-screen" content="yes">
<!-- Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ UC Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ изобраТСния, Π΄Π°ΠΆΠ΅ Ссли находится Π² "тСкстовом Ρ€Π΅ΠΆΠΈΠΌΠ΅" -->
<meta name="imagemode" content="force">
<!-- Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² "Ρ€Π΅ΠΆΠΈΠΌΠ΅ прилоТСния" (полноэкранный Ρ€Π΅ΠΆΠΈΠΌ, Π·Π°ΠΏΡ€Π΅Ρ‰Π°ΡŽΡ‰ΠΈΠΉ ТСст ΠΈ Ρ‚.Π΄.) -->
<meta name="browsermode" content="application">
<!-- ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ "Π½ΠΎΡ‡Π½ΠΎΠ³ΠΎ Ρ€Π΅ΠΆΠΈΠΌΠ°" Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° UC для этого Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° -->
<meta name="nightmode" content="disable">
<!-- Π£ΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Ρƒ Π΄Π°Π½Π½Ρ‹Ρ… -->
<meta name="layoutmode" content="fitscreen">
<!-- ΠžΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° UC "ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π± ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΠΊΠΎΠ³Π΄Π° Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ ΠΌΠ½ΠΎΠ³ΠΎ слов" -->
<meta name="wap-font-scale" content="no">
  • ​ UC Browser Docs

Бсылки Π½Π° прилоТСния

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org. applinks">
<!-- Web fall back -->
<meta property="al:web:url" content="https://applinks.org/documentation">
  • ​ Бсылки Π½Π° прилоТСния

Π”Ρ€ΡƒΠ³ΠΈΠ΅ рСсурсы

  • ​ HTML5 Boilerplate Docs: The HTML

  • ​ HTML5 Boilerplate Docs: Extend and customize

БвязанныС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹

  • Atom HTML Head SnippetsΒ — Atom ΠΏΠ°ΠΊΠ΅Ρ‚ для HEAD сниппСтов

  • Sublime Text HTML Head SnippetsΒ — ΠΏΠ°ΠΊΠ΅Ρ‚ Sublime Text для HEAD сниппСтов

  • head-itΒ — CLI интСрфСйс для HEAD сниппСтов

  • vue-headΒ — ΠœΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ΅Ρ‚Π°ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ Ρ‚Π΅Π³Π°Β HEAD для Vue.js

Π”Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹

  • ​ PDF eng

β€‹Β ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄Ρ‹

  • β€‹Β Π˜Π½Π΄ΠΎΠ½Π΅Π·ΠΈΠΉΡΠΊΠΈΠΉ

  • β€‹Β Π‘Ρ€Π°Π·ΠΈΠ»ΡŒΡΠΊΠΈΠΉ ΠΏΠΎΡ€Ρ‚ΡƒΠ³Π°Π»ΡŒΡΠΊΠΈΠΉ

  • β€‹Β ΠšΠΈΡ‚Π°ΠΉΡΠΊΠΈΠΉ (ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½Ρ‹ΠΉ)

  • ​ НСмСцкий

  • β€‹Β Π˜Ρ‚Π°Π»ΡŒΡΠ½ΡΠΊΠΈΠΉ

  • ​ Японский

  • β€‹Β ΠšΠΎΡ€Π΅ΠΉΡΠΊΠΈΠΉ

  • β€‹Β Π˜ΡΠΏΠ°Π½ΡΠΊΠΈΠΉ

  • ​ ВурСцкий

​ Contributing

ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅Β issueΒ ΠΈΠ»ΠΈΒ PR, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ измСнСния ΠΈΠ»ΠΈ дополнСния.

​ Contributors

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° всСх супСр классных авторов ​

​ Автор ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ рСпозитория

Josh Buchea

β€‹Β ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°

Если этот ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π±Ρ‹Π» ΠΏΠΎΠ»Π΅Π·Π΅Π½ для вас ΠΈΠ»ΠΈ вашСй ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ, поТалуйста, рассмотритС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ прямой ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΌΠΎΠ΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π°Π²Ρ‚ΠΎΡ€Π° ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ рСпозитория:

  • ​ Sponsor me on GitHub

  • ​ Star this project on GitHub

  • ​ БлСдуйтС Π·Π° Π”ΠΆΠΎΡˆΠ΅ΠΌ Π½Π° GitHub

  • ​ БлСдуйтС Π·Π° Π”ΠΆΠΎΡˆΠ΅ΠΌ Π² Twitter

ВсСм ΠΊΡ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚, спасибо! ​

β€” Josh


ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ Π°Π²Ρ‚ΠΎΡ€Π°: это русский ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ рСпозитория HEAD ΠΎΡ‚ Josh Buchea. ΠœΡ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌ Ρ€ΡƒΡΡΠΊΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ, ΠΊΡƒΠ΄Π° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ issue ΠΈΠ»ΠΈ PR Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ, Ссли нашли нСточности ΠΈΠ»ΠΈ Π²Π°ΠΌ Π΅ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ. ΠŸΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ Π½Π° Π₯Π°Π±Ρ€Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с русскоязычным сообщСством ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠΌ.


Π”Ρ€ΡƒΠ³ΠΈΠ΅ Π²Π°ΠΆΠ½Ρ‹Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

БСмантичСская вёрстка

Pixel Perfect

Π‘Ρ‚ΠΎΠΈΡ‚ Π»ΠΈ Π΄Π΅Π»Π°Ρ‚ΡŒ слайдСры Π½Π° CSS

Π§Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ: ссылки ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ флСксы, Π° ΠΊΠΎΠ³Π΄Π° Π³Ρ€ΠΈΠ΄Ρ‹

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠ΅Ρ‚Π°Ρ‚Π΅Π³ msvalidate.

01?

Π΄ΠΆΠ°Ρ‚ΠΈΠ½Π΄Π΅Ρ€
Новый участник