Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ meta Π² html – Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠ΅Ρ‚Π° Ρ‚Π΅Π³ΠΈ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

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

| HTML | WebReference

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <meta> (ΠΎΡ‚ Π°Π½Π³Π». metadata β€” ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅) опрСдСляСт Π΄Π°Π½Π½Ρ‹Π΅ (ΠΎΠ½ΠΈ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π΅Ρ‰Ρ‘ ΠΌΠ΅Ρ‚Π°Ρ‚Π΅Π³ΠΈ), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для хранСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠΉ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΈ поисковых систСм. НапримСр, ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΡ‹ поисковых систСм ΠΎΠ±Ρ€Π°Ρ‰Π°ΡŽΡ‚ΡΡ ΠΊ ΠΌΠ΅Ρ‚Π°Ρ‚Π΅Π³Π°ΠΌ для получСния описания сайта, ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π΄Π°Π½Π½Ρ‹Ρ…. Π Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ ΠΎΠ΄ΠΈΠ½ ΠΌΠ΅Ρ‚Π°Ρ‚Π΅Π³, всС ΠΎΠ½ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ <head>. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ любого ΠΌΠ΅Ρ‚Π°Ρ‚Π΅Π³Π° сводятся ΠΊ ΠΏΠ°Ρ€Π°ΠΌ «имя=Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅Β», ΠΈΠΌΠ΅Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌΠΈ словами content, name ΠΈΠ»ΠΈ http-equiv.

Π—Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³

Атрибуты

charset
Π—Π°Π΄Π°Ρ‘Ρ‚ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΡƒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.
content
УстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°, Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ name ΠΈΠ»ΠΈ http-equiv.
http-equiv
ΠŸΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для конвСртирования ΠΌΠ΅Ρ‚Π°Ρ‚Π΅Π³Π° Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ HTTP.
name
Имя ΠΌΠ΅Ρ‚Π°Ρ‚Π΅Π³Π°, Ρ‚Π°ΠΊΠΆΠ΅ косвСнно устанавливаСт Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

<!DOCTYPE HTML>
<html>
 <head>
  <title>META</title>
  <meta charset="utf-8">
  <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
  <meta name="ProgId" content="FrontPage.Editor.Document">
 </head>
 <body>
  <p>...</p>
 </body>
</html>

БпСцификация ?

БпСцификация

КаТдая спСцификация ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ нСсколько стадий одобрСния.

  • Recommendation (РСкомСндация) β€” спСцификация ΠΎΠ΄ΠΎΠ±Ρ€Π΅Π½Π° W3C ΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π° ΠΊΠ°ΠΊ стандарт.
  • Candidate Recommendation (ВозмоТная рСкомСндация) β€” Π³Ρ€ΡƒΠΏΠΏΠ°, ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰Π°Ρ Π·Π° стандарт, ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€Π΅Π½Π°, ΠΊΠ°ΠΊ ΠΎΠ½ соотвСтствуСт своим цСлям, Π½ΠΎ трСбуСтся ΠΏΠΎΠΌΠΎΡ‰ΡŒ сообщСства Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΏΠΎ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ стандарта.
  • Proposed Recommendation (ΠŸΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΠ°Ρ рСкомСндация) β€” Π½Π° этом этапС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ прСдставлСн Π½Π° рассмотрСниС ΠšΠΎΠ½ΡΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ совСта W3C для ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ утвСрТдСния.
  • Working Draft (Π Π°Π±ΠΎΡ‡ΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚) β€” Π±ΠΎΠ»Π΅Π΅ зрСлая вСрсия Ρ‡Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊΠ° послС обсуТдСния ΠΈ внСсСния ΠΏΠΎΠΏΡ€Π°Π²ΠΎΠΊ для рассмотрСния сообщСством.
  • Editor’s draft (РСдакторский Ρ‡Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊ) β€” чСрновая вСрсия стандарта послС внСсСния ΠΏΡ€Π°Π²ΠΎΠΊ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.
  • Draft (Π§Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊ спСцификации) β€” пСрвая чСрновая вСрсия стандарта.

Особняком стоит ΠΆΠΈΠ²ΠΎΠΉ стандарт HTML (Living) β€” ΠΎΠ½ Π½Π΅ придСрТиваСтся Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠΉ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ вСрсий, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ находится Π² постоянной Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΈ обновляСтся рСгулярно.

Γ—

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹

Π’ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ обозначСния.

  •  β€” элСмСнт ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ поддСрТиваСтся Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ;
  •  β€” элСмСнт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ Π½Π΅ воспринимаСтся ΠΈ игнорируСтся;
  •  β€” ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ появлСниС Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ошибок, Π»ΠΈΠ±ΠΎ элСмСнт поддСрТиваСтся с ΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ.

Число ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π²Π΅Ρ€ΡΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Ρ€Π΅Π°, начиная с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ элСмСнт поддСрТиваСтся.

Γ—

Автор ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹

Автор: Π’Π»Π°Π΄ ΠœΠ΅Ρ€ΠΆΠ΅Π²ΠΈΡ‡

ПослСднСС измСнСниС: 09.10.2018

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹: Π’Π»Π°Π΄ ΠœΠ΅Ρ€ΠΆΠ΅Π²ΠΈΡ‡

ΠšΡƒΡ€Ρ ΠΏΠΎ вёрсткС сайта Π½Π° CSS Grid

Атрибут http-equiv Ρ‚Π΅Π³Π° | HTML справочник

HTML Ρ‚Π΅Π³ <meta>

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅

Атрибут http-equiv (HTML Ρ‚Π΅Π³Π° <meta>) фактичСски эквивалСнтСн гипСртСкстовому Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡƒ (имитация http-Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°), Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ страницы ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Π΅Π³ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΎΠ½ΠΈ ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ дСйствиями Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для формирования ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, Π²Ρ‹Π΄Π°Π²Π°Π΅ΠΌΠΎΠΉ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌΠΈ http-Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ. НазваниС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° указываСтся Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ http-equiv, Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ указываСтся Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ content. Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях ΠΌΠΎΠ³ΡƒΡ‚ автоматичСски Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π²Π΅Π΄Π΅Π½Ρ‹ Π² настоящиС HTTP-Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ.

Если Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ http-equiv ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, Ρ‚ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ name Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΌΠ΅Ρ‚Π°-Ρ‚Π΅Π³Π΅.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

Бинтаксис:

<meta http-equiv = "content-security-policy | content-type | default-style | refresh">

ЗначСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
content-security-policyΠ­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ позволяСт администраторам Π²Π΅Π±-сайта ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° (ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΡƒ) для обслуТиваСмых рСсурсов. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ обСспСчСния бСзопасности, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Ρ‰ΠΈΡ‰Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ Π°Ρ‚Π°ΠΊ с Π²Π½Π΅Π΄Ρ€Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, мСТсайтового скриптинга.
content-typeΠ—Π°Π΄Π°Π΅Ρ‚ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΡƒ для Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. БчитаСтся ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌ Π² HTML 5.
default-styleΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ имя ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹Ρ… стилСй Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Имя задаСтся Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ content ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ условиям (ограничСниям):
  • имя Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ глобального Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° title HTML Ρ‚Π΅Π³Π° <link> Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, ΠΏΡ€ΠΈ этом элСмСнт Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ href, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ссылаСтся Π½Π° располоТСниС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй CSS.
  • имя Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ глобального Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° title HTML Ρ‚Π΅Π³Π° <style> Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, содСрТаниС этого элСмСнта Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй CSS.
refreshΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π² сСкундах Ρ‡Π΅Ρ€Π΅Π· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½. Если Π²Π½ΡƒΡ‚Ρ€ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° content ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄ΠΎΠΌΠ΅Π½Π° (ss, URL=Β»domainΒ»), Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ со страницы Π½Π° Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ рСсурс.

ΠžΡ‚Π»ΠΈΡ‡ΠΈΡ HTML 4.01 ΠΎΡ‚ HTML 5

Π’ HTML 5 Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ content-type считаСтся ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌ.
Π”ΠΎ стандарта HTML 5 Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΠΈ страницы ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π»ΠΎΡΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:
<meta http-equiv = "Content-Type" content = "text/html; charset = character_set">

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования

<!DOCTYPE html>
<html>
	<head>
		<meta  http-equiv  = "refresh" content = "15, URL='http://basicweb.ru'" > <!-- ΠΌΠ΅Ρ‚Π° элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ страница Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π° Ρ‡Π΅Ρ€Π΅Π· 15 сСкунд ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅Ρ‚ ΠΏΠΎ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡƒ URL -->
		<meta  http-equiv  = "content-security-policy" content = "default-src https:" > <!-- ΠΌΠ΅Ρ‚Π° элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ рСсурсов (изобраТСния, ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, скрипты ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅) Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с использованиСм https -->
		<meta  http-equiv  = "default-style" content = "default style" > <!-- ΠΌΠ΅Ρ‚Π° элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ имя ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹Ρ… css стилСй Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° -->
		<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° http-equiv Ρ‚Π΅Π³Π° <meta></title>
		<link href = "default.css" rel = "stylesheet" type = "text/css" title = "default style">
	</head>
	<body>
		<h3> Π­Ρ‚ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ.</h3>
		<p>Π­Ρ‚ΠΎ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„. </p>
	</body>
</html>

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ использовали Ρ‚Ρ€ΠΈ элСмСнта <meta> для ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π±Ρ‹Π»ΠΈ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° http-equiv:

  • ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΌΠ΅Ρ‚Π° элСмСнт, ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ страница Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π° (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ refresh) Ρ‡Π΅Ρ€Π΅Π· 15 сСкунд ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅Ρ‚ ΠΏΠΎ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡƒ URL (значСния, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ content). Если адрСс URL Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½, Ρ‚ΠΎ страница просто Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π°.
  • Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΌΠ΅Ρ‚Π° элСмСнт Ρ€Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ рСсурсов (изобраТСния, ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, скрипты ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅) Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с использованиСм https. Π­Ρ‚ΠΎ стало доступным благодаря использованию значСния content-security-policy, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ позволяСт с использованиСм Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° content ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° (ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΡƒ) для обслуТиваСмых рСсурсов.
  • Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ ΠΌΠ΅Ρ‚Π° элСмСнт, ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ имя ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹Ρ… css стилСй Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° content Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ глобального Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° title HTML Ρ‚Π΅Π³Π° <link>.

HTML Ρ‚Π΅Π³ <meta>

Π§Ρ‚ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ Β«headΒ»? ΠœΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅ Π² HTML β€” Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ head HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π½Π΅ отобраТаСтся Π½Π° страницС Π² Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Он содСрТит Ρ‚Π°ΠΊΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΊΠ°ΠΊ:

  • Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ (title) страницы
  • ссылки Π½Π° Ρ„Π°ΠΉΠ»Ρ‹ CSS (Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ HTML стили CSS)
  • ссылки Π½Π° ΠΈΠΊΠΎΠ½ΠΊΠΈ
  • Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅ (Π΄Π°Π½Π½Ρ‹Π΅ ΠΎ HTML: Π°Π²Ρ‚ΠΎΡ€ ΠΈ Π²Π°ΠΆΠ½Ρ‹Π΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова, ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.)

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим всё Π²Ρ‹ΡˆΠ΅ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π°Ρ‚ΡŒ Π²Π°ΠΌ Ρ…ΠΎΡ€ΠΎΡˆΡƒΡŽ основу для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ.

ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ трСбования:Π‘Π°Π·ΠΎΠ²ΠΎΠ΅ знакомство с HTML , описанноС Π² ΠΠ°Ρ‡Π°Π»ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с HTML.
Π—Π°Π΄Π°Ρ‡Π°:Π£Π·Π½Π°Ρ‚ΡŒ ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ HTML, Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ, Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтах, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ содСрТатся Π² Π½Ρ‘ΠΌ, ΠΈ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ <head>?

Π”Π°Π²Π°ΠΉΡ‚Π΅ снова посмотрим Π½Π° HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΈΠ· ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя тСстовая страница</title>
  </head>
  <body>
    <p>Π­Ρ‚ΠΎ β€” моя страница</p>
  </body>
</html>

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ <head>, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ содСрТимого ΡΠ»Π΅ΠΌΠ΅Π½Ρ‚Π° <body>

, Π½Π΅ отобраТаСтся Π½Π° страницС. Π—Π°Π΄Π°Ρ‡Π° <head> β€” Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ <head> ΡΠΎΠ²ΡΠ΅ΠΌ нСбольшой:

<head>
  <meta charset="utf-8">
  <title>Моя тСстовая страница</title>
</head>

Однако Π½Π° Π±ΠΎΠ»ΡŒΡˆΠΈΡ… страницах Π±Π»ΠΎΠΊ <head> ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ довольно ΠΎΠ±ΡŠΠ΅ΠΌΠ½Ρ‹ΠΌ. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π·Π°ΠΉΡ‚ΠΈ Π½Π° ΠΊΠ°ΠΊΠΈΠ΅-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΈΠ· Π²Π°ΡˆΠΈΡ… Π»ΡŽΠ±ΠΈΠΌΡ‹Ρ… сайтов ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ содСрТимоС <head> Ρ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнтов Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°. Наша Ρ†Π΅Π»ΡŒ сСйчас β€” Π½Π΅ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ всё, Ρ‡Ρ‚ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² head, Π° Π΄Π°Ρ‚ΡŒ прСдставлСниС ΠΈ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒ вас, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ основныС элСмСнты. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ.

НазваниС ΡΡ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ (title)

ΠœΡ‹ ΡƒΠΆΠ΅ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ элСмСнт <title>: Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ для добавлСния Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° (названия страницы) Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <h2> Ρ‚ΠΎΠΆΠ΅ ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π°Π·Π²Π°ΡŽΡ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΡΡ‚Ρ€Π°Π½ΠΈΡ†Ρ‹. Но это Ρ€Π°Π·Π½Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ!

  • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <h2> Π²ΠΈΠ΄Π΅Π½ Π½Π° страницС, ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠΉ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, β€” Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ 
    ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· Π½Π° страницС
    , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ³ΠΎ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ истории, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ новости ΠΈΠ»ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π² этом Ρ€ΠΎΠ΄Π΅.
  • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <title> β€” ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅, Π½Π°Π·Π²Π°Π½ΠΈΠ΅ всСго HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Π° Π½Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ³ΠΎ. 

АктивноС ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅: Ρ€Π°Π·Π±ΠΎΡ€ простого ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°

  1. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌΡƒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΡŽ,  ΡΠΊΠ°Ρ‡Π°ΠΉΡ‚Π΅ ΡΡ‚Ρ€Π°Π½ΠΈΡ†Ρƒ title-example.html ΠΈΠ· нашСго GitHub-рСпозитория. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ двумя способами:
    1. Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΈ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΊΠΎΠ΄ страницы Π² Π½ΠΎΠ²Ρ‹ΠΉ Ρ‚Скстовый Ρ„Π°ΠΉΠ» Π² своём Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΊΠΎΠ΄Π°, Π·Π°Ρ‚Π΅ΠΌ сохранитС Π΅Π³ΠΎ Π² любом ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌ мСстС.
    2. НаТмитС Π½Π° страницС ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«RawΒ», Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π€Π°ΠΉΠ» > Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠšΠ°ΠΊβ€¦ Π² мСню Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΠ°ΠΏΠΊΡƒ для сохранСния.
  2. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ этого:

    Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΡ‚Π°Ρ‚ΡŒ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ ясно, Π² Ρ‡Ρ‘ΠΌ Ρ€Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ <h2> ΠΈ <title>!

  3. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΠΊΠΎΠ΄ страницы Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ ΡΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ элСмСнтов ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ ΡΡ‚Ρ€Π°Π½ΠΈΡ†Ρƒ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π Π°Π·Π²Π»Π΅ΠΊΠ°ΠΉΡ‚Π΅ΡΡŒ!

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ элСмСнта <title> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ся ΠΈ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… мСстах. НапримСр, ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΡΡ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ Π² ΠΈΠ·Π±Ρ€Π°Π½Π½ΠΎΠ΅ (Bookmarks > Bookmark This Page Π² Firefox), тСкст ΠΈΠ· <title> ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ся Π² качСствС Π½Π°Π·Π²Π°Π½ΠΈΡ Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ.

ВСкст ΠΈΠ· <title> Ρ‚Π°ΠΊΠΆΠ΅ появляСтся Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°Ρ… поиска, ΠΊΠ°ΠΊ ΠΌΡ‹ скоро ΡƒΠ²ΠΈΠ΄ΠΈΠΌ.

ΠœΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅ β€” Π΄Π°Π½Π½Ρ‹Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ Π΄Π°Π½Π½Ρ‹Π΅. Π£ HTML Π΅ΡΡ‚ΡŒ Β«ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ΅Β» ΠΌΠ΅ΡΡ‚ΠΎ для ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Ρ… Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° β€” элСмСнт <meta>. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π²Π΅Ρ‰ΠΈ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅, Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹ΠΌΠΈ. БущСствуСт ΠΌΠ½ΠΎΠΆΠ΅ΡΡ‚Π²ΠΎ разновидностСй <meta>. НС станСм ΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΠΎΡ…Π²Π°Ρ‚ΠΈΡ‚ΡŒ ΠΈΡ… всС сразу β€” Ρ‚Π°ΠΊ Π½Π΅Π΄ΠΎΠ»Π³ΠΎ ΠΈ Π·Π°ΠΏΡƒΡ‚Π°Ρ‚ΡŒΡΡ β€”, Π° Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΎ самых популярных, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΊ Ρ‡Π΅ΠΌΡƒ.

Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΡƒ Ρ‚Скста Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°

Π’ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π²Ρ‹ΡˆΠ΅ Π΅ΡΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ строка:

<meta charset="utf-8">

Π’ этом ΡΠ»Π΅ΠΌΠ΅Π½Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Π½Π° ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° β€” Π½Π°Π±ΠΎΡ€ символов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² Π½Ρ‘ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ . utf-8 β€” ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ символов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΏΠΎΡ‡Ρ‚ΠΈ всС символы со всСх языков чСловСчСства. Вакая Π²Π΅Π±-страница смоТСт Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π»ΡŽΠ±Ρ‹ΠΌ ΡΠ·Ρ‹ΠΊΠΎΠΌ. Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ эту ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΡƒ Π²ΡΠ΅Ρ… Π²Π΅Π±-страницах, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ создаётС β€” отличная идСя! Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° Π² Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΠ΅ ΠΏΡ€Π΅ΠΊΡ€Π°ΡΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΊΠ°ΠΊ английскиС, Ρ‚Π°ΠΊ ΠΈ японскиС символы:

Если ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, скаТСм, ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΡƒ ISO-8859-1 (Π½Π°Π±ΠΎΡ€ символов для Π»Π°Ρ‚ΠΈΠ½ΠΈΡ†Ρ‹), тСкст ΡΡ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈΡΠΏΠΎΡ€Ρ‚ится:

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: НСкоторыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Chrome) автоматичСски ΠΈΡΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΡƒΡŽ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΡƒ, поэтому, Π² зависимости ΠΎΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ Π²Π°ΠΌΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ. НСсмотря Π½Π° это Π²Π°ΠΌ всё Ρ€Π°Π²Π½ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΡƒ UTF-8 для вашСй страницы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

АктивноС ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅: экспСримСнтируСм с ΡΠΈΠΌΠ²ΠΎΠ»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΠ°ΠΌΠΈ

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ это, Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ΡΡŒ ΠΊ HTML ΠΈΠ· ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° 

<title> (страницС title-example.html), помСняйтС meta charset Π½Π° ISO-8859-1 ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π½Π° японском ΠΈΠ»ΠΈ русском. Π’ΠΎΡ‚ тСкст ΠΈΠ· нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° (кстати, Ρ‚Π°ΠΌ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ «рис горячий»):

<p>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° японском: γ”ι£―γŒη†±γ„γ€‚</p>

Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Π°Π²Ρ‚ΠΎΡ€Π° ΠΈ описаниС

Π£ элСмСнтов <meta> часто Π΅ΡΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ name ΠΈ content:

  • name β€” Ρ‚ΠΈΠΏ элСмСнта, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅ ΠΎΠ½ содСрТит.
  • content β€” сами ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅.

Π”Π²Π° ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… элСмСнта ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Ρ… β€” ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ Π°Π²Ρ‚ΠΎΡ€Π° страницы ΠΈ ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ΅ описаниС Π΅Ρ‘ содСрТимого. Рассмотрим эти элСмСнты Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅:

<meta name="author" content="ΠšΡ€ΠΈΡ Миллс">
<meta name="description" content="Π—Π°Π΄Π°Ρ‡Π° MDN β€” Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡƒΡ‡ΠΈΡ‚ΡŒ 
Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ² всСму Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠΌ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π²Π΅Π±-сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.">

По ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡƒ ΠΈΠΌΠ΅Π½ΠΈ Π°Π²Ρ‚ΠΎΡ€Π° (author) ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ написал страницу, ΠΈ ΡΠ²ΡΠ·Π°Ρ‚ΡŒΡΡ с Π½ΠΈΠΌ. НСкоторыС систСмы управлСния содСрТимым (CMS ) автоматичСски ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ эту ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ Π΅Ρ‘ доступной для Ρ‚Π°ΠΊΠΈΡ… Ρ†Π΅Π»Π΅ΠΉ.

ΠšΡ€Π°Ρ‚ΠΊΠΎΠ΅ описаниС (description) содСрТимого страницы учитываСтся поисковыми систСмами ΠΏΡ€ΠΈ совпадСнии ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов. Π’Π°ΠΊΠΎΠ΅ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠΉ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ, ΠΈΠ»ΠΈ SEO.

АктивноС ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅: ΠΊΠ°ΠΊ поисковыС систСмы ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ описаниС

ОписаниС ΠΈΠ· <meta name="description"> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π° страницах ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠΉ Π²Ρ‹Π΄Π°Ρ‡ΠΈ. ΠŸΡ€ΠΎΠ²Π΅Π΄Ρ‘ΠΌ нСбольшоС ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΎΠ³ΠΎ сцСнария.

  1. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Π³Π»Π°Π²Π½ΡƒΡŽ страницу Mozilla Developer Network.
  2. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ исходный ΠΊΠΎΠ΄ страницы (ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ Π² контСкстном мСню.)
  3. НайдитС Ρ‚Π΅Π³ meta с описаниСм. Он выглядит Ρ‚Π°ΠΊ:
    <meta name="description" content="Π’Π΅Π±-докумСнтация Π½Π° MDN 
    прСдоставляСт собой ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎΠ± ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… Π²Π΅Π±-тСхнологиях, 
    Π²ΠΊΠ»ΡŽΡ‡Π°Ρ HTML, CSS ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ API для Π²Π΅Π±-сайтов ΠΈ 
    прогрСссивных Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π°ΠΊΠΆΠ΅ Π½Π° сайтС содСрТатся ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ 
    для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΎ Ρ‚Π°ΠΊΠΈΡ… ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°Ρ… Mozilla, ΠΊΠ°ΠΊ Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Firefox.">
  4. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ Β«Mozilla Developer NetworkΒ» Π² своём поисковикС (ΠΌΡ‹ использовали Google). ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΈΠ· <meta> ΠΈ <title> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ся Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°Ρ… поиска, β€” ΠΌΡ‹ Π½Π΅ зря ΡƒΠΊΠ°Π·Π°Π»ΠΈ ΠΈΡ…!

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Google Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π²Π°ΠΆΠ½Ρ‹Π΅ страницы MDN ΠΏΠΎΠ΄ ссылкой Π½Π° Π³Π»Π°Π²Π½ΡƒΡŽ страницу. Π’Π°ΠΊΠΈΠ΅ ссылки Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ sitelinks, ΠΈ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· Google Search Console, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³Π»ΠΈ сразу ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ Π½ΠΈΠΌ со страницы поиска.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: МногиС Ρ‚ΠΈΠΏΡ‹ <meta> Π±ΠΎΠ»ΡŒΡˆΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ. Π’Π°ΠΊ, ΠΏΠΎΠΈΡΠΊΠΎΠ²Ρ‹Π΅ систСмы большС Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ· элСмСнта <meta type="keywords" content="ваши, ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅, слова, Π²Π²Π΅Π΄ΠΈΡ‚Π΅, здСсь">, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π»ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΡΠ»ΠΎΠ²Π°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ страницу: ΡΠΏΠ°ΠΌΠ΅Ρ€Ρ‹ засовывали Ρ‚ΡƒΠ΄Π° всС слова, ΠΊΠ°ΠΊΠΈΠ΅ ΠΌΠΎΠ³Π»ΠΈ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡ… сайты ΠΏΠΎΡ‡Π°Ρ‰Π΅ появлялись Π² поискС.

Π”Ρ€ΡƒΠ³ΠΈΠ΅ Π²ΠΈΠ΄Ρ‹ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Ρ…

Π’ сСти Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚ΠΈΠΏΡ‹ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Ρ…. МногиС ΠΈΠ· Π½ΠΈΡ… β€” это собствСнныС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹, созданныС Π΄Π»Ρ прСдоставлСния ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ ΡΠ°ΠΉΡ‚Π°ΠΌ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй) ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

НапримСр, ΠŸΡ€ΠΎΡ‚ΠΎΠΊΠΎΠ» Open Graph ΡΠΎΠ·Π΄Π°Π½ Facebook Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΡΠ°ΠΉΡ‚Π°ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ возмоТности использования ΠΌΠ΅Ρ‚Π΅Π΄Π°Π½Π½Ρ‹Ρ…. Π’ исходном ΠΊΠΎΠ΄Π΅ MDN Web Docs Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ строки:

<meta property="og:image" content="https://wiki.developer.mozilla.org/static/img/opengraph-logo.72382e605ce3.png">
<meta property="og:description" content="Π’Π΅Π±-докумСнтация Π½Π° MDN прСдоставляСт 
собой ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎΠ± ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… Π²Π΅Π±-тСхнологиях, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ HTML, CSS ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ API для Π²Π΅Π±-сайтов 
ΠΈ прогрСссивных Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π°ΠΊΠΆΠ΅ Π½Π° сайтС содСрТатся ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΎ Ρ‚Π°ΠΊΠΈΡ… 
ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°Ρ… Mozilla, ΠΊΠ°ΠΊ Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Firefox.">
<meta property="og:title" content="MDN Web Docs">

Один ΠΈΠ· Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ² добавлСния этих ΠΌΠ΅Ρ‚Π΅Π΄Π°Π½Π½Ρ‹Ρ… Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ ΡΡΡ‹Π»ΠΊΡƒ MDN Web Docs Π½Π° facebook, ΠΎΠ½Π° отобразится Ρ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ описаниСм, ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ ΠΎΠΏΡ‹Ρ‚ взаимодСйствия (User eXperience, UX).

Π£ Twitter Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Ρ…, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ  создаСтся Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ эффСкт, ΠΏΡ€ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ URL сайта Π½Π° twitter.com:

<meta name="twitter:title" content="MDN Web Docs">

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ своСму сайту узнаваСмости, ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π² ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Ρ… Ρ€Π°Π·Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ.

Favicon, ΠΎΠ΄ΠΈΠ½ ΠΈΠ· староТилов ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°, стал ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΈΠ· Ρ‚Π°ΠΊΠΈΡ… ΠΈΠΊΠΎΠ½ΠΎΠΊ. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ Π΅Ρ‘ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈ Π² спискС ΠΈΠ·Π±Ρ€Π°Π½Π½Ρ‹Ρ… страниц.

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π° страницу favicon:

  1. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ .ico (ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ ΠΈ Π² Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ…, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ .gif ΠΈΠ»ΠΈ .png) Π² ΠΏΠ°ΠΏΠΊΡƒ со своим Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ. Π‘Ρ‚Π°Ρ€Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Internet Explorer 6, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ .ico
  2. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ссылку Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ Π² <head> Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°:
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Для Ρ€Π°Π·Π½Ρ‹Ρ… устройств ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ. НапримСр, Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС MDN:

<!-- Для iPad 3 с Retina-экраном высокого Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- Для iPhone с Retina-экраном высокого Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- Для iPad ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΈ Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ поколСния: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- Для iPhone, iPod Touch Π±Π΅Π· Retina ΠΈ устройств с Android 2.1+: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- Для Π΄Ρ€ΡƒΠ³ΠΈΡ… случаСв - ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

Π’ коммСнтариях ΡƒΠΊΠ°Π·Π°Π½ΠΎ, для Ρ‡Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ каТдая ΠΈΠΊΠΎΠ½ΠΊΠ° β€” Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ страницы Π½Π° домашний экран iPad Π±ΡƒΠ΄Π΅Ρ‚ использована ΠΈΠΊΠΎΠ½ΠΊΠ° Π² высоком Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ. 

НС Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡ‚Π΅ΡΡŒ ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ всСх этих Ρ‚ΠΈΠΏΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² β€” это довольно продвинутая функция, ΠΈ ΠΌΡ‹ Π½Π΅ станСм Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊ Π½Π΅ΠΉ Π² курсС. Основная Ρ†Π΅Π»ΡŒ β€” ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅, Ссли Π²Ρ‹ ΡΡ‚ΠΎΠ»ΠΊΠ½Π΅Ρ‚Π΅ΡΡŒ с Π½ΠΈΠΌΠΈ ΠΏΡ€ΠΈ просмотрС исходного ΠΊΠΎΠ΄Π° Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²Π΅Π±-сайтов.

ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ CSS ΠΈ JavaScript

Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ сайты ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Π΅Π΅, ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Ρ‡Π΅Ρ€Π΅Π· JavaScript: Π²ΠΈΠ΄Π΅ΠΎΠΏΠ»Π΅Π΅Ρ€Ρ‹, ΠΊΠ°Ρ€Ρ‚Ρ‹, ΠΈΠ³Ρ€Ρ‹. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ связянныС стили Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ Π½Π° страницу Ρ‡Π΅Ρ€Π΅Π· элСмСнт <link>, Π° скрипты β€” Ρ‡Π΅Ρ€Π΅Π· элСмСнт <script> .

  • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <link> ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π£ Π½Π΅Π³ΠΎ Π΅ΡΡ‚ΡŒ Π΄Π²Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°: rel="stylesheet" ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ ΡΡ‚ΠΈΠ»ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Π° Π² href ΡƒΠΊΠ°Π·Π°Π½ ΠΏΡƒΡ‚ΡŒ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ:

    <link rel="stylesheet" href="my-css-file.css">
  • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <script> Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ находится Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ β€” Π½Π° самом Π΄Π΅Π»Π΅ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² самом ΠΊΠΎΠ½Ρ†Π΅ страницы, прямо ΠΏΠ΅Ρ€Π΅Π΄ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌ Ρ‚Π΅Π³ΠΎΠΌ </body>. Π’Π°ΠΊ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ сначала ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ саму страницу, Π° ΡƒΠΆΠ΅ Π·Π°Ρ‚Π΅ΠΌ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ ΠΈ запустит скрипт β€” ΠΈΠ½Π°Ρ‡Π΅ ΡΠΊΡ€ΠΈΠΏΡ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ Π΅Ρ‰Ρ‘ Π½Π΅ созданному элСмСнту страницы ΠΈ ΡΠ»ΠΎΠΌΠ°Ρ‚ΡŒΡΡ.

    <script src="my-js-file.js"></script>

    ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <script> ΠΊΠ°ΠΆΠ΅Ρ‚ся пустым, Π½ΠΎ это Π½Π΅ всСгда Ρ‚Π°ΠΊ, ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ. ВмСсто Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΡΡ‹Π»Π°Ρ‚ΡŒΡΡ Π½Π° внСшний скрипт, ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ прямо Π²Π½ΡƒΡ‚Ρ€ΠΈ этого элСмСнта β€” Ρ‚Π°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π½Π° Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ скрипта, Π½ΠΎ Π·Π°Ρ‚ΠΎ Π½Π΅ Π²Ρ‹ΠΉΠ΄Π΅Ρ‚ ΡΠΎΡΠ»Π°Ρ‚ΡŒΡΡ Π½Π° ΠΎΠ΄ΠΈΠ½ js-Ρ„Π°ΠΉΠ» с Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… страниц.

АктивноС ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅: добавляСм Π½Π° страницу CSS ΠΈ JavaScript

  1. Для этого упраТнСния скачайтС Ρ„Π°ΠΉΠ»Ρ‹ meta-example.html, script.js ΠΈ style.css ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅ ΠΈΡ… Π² ΠΎΠ΄Π½Ρƒ ΠΏΠ°ΠΏΠΊΡƒ Π½Π° своём ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅. ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΠΈΠ»ΠΈΡΡŒ с ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡΠΌΠΈ.
  2. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ HTML Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΈ тСкстовом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅.
  3. БлСдуя ΠΈΠ·ΡƒΡ‡Π΅Π½Π½ΠΎΠΌΡƒ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρƒ, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π½Π° страницу ΡΠΊΡ€ΠΈΠΏΡ‚ ΠΈ ΡΡ‚ΠΈΠ»ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнтов <link> ΠΈ <script>.

Если всё ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ сохранитС HTML ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ страницу Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΊΠΎΠ΅-Ρ‡Ρ‚ΠΎ новСнькоС:

  • JavaScript Π΄ΠΎΠ±Π°Π²ΠΈΠ» Π½Π° страницу пустой список. ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΡ€Π°ΡΠ½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ появляСтся ΠΎΠΊΠ½ΠΎ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ввСсти тСкст Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° списка. ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ OK ΠΏΡƒΠ½ΠΊΡ‚ добавляСтся Π½Π° страницу. ВСкст ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² списка ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, наТимая Π½Π° Π½ΠΈΡ….
  • CSS покрасил Ρ„ΠΎΠ½ Π·Π΅Π»Ρ‘Π½Ρ‹ΠΌ ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ» Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°, Π° Ρ‚Π°ΠΊΠΆΠ΅ стилизовал элСмСнты, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹Π΅ JavaScript. ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ ΠΈ Ρ€Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ списка β€” Ρ‚ΠΎΠΆΠ΅ Π΅Π³ΠΎ Ρ€ΡƒΠΊ Π΄Π΅Π»ΠΎ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Если Π²Π°ΠΌ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ удаётся ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ CSS ΠΈΠ»ΠΈ JS, посмотритС Π½Π° наш Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ β€” страницу css-and-js.html.

Основной язык HTML страницы

НаконСц, стоит ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ (ΠΈ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹) ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ язык для ΡΠ²ΠΎΠ΅ΠΉ страницы. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ lang Π² ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ HTML-Ρ‚Π΅Π³ (ΠΊΠ°ΠΊ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ meta-example.html: ΠΈ ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅):

<html lang="en-US">
<html lang="ru">

Π­Ρ‚ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… случаях. Π’Π°Ρˆ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ эффСктивно ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ поисковыми систСмами, Ссли Π΅Π³ΠΎ язык установлСн (Ρ‡Ρ‚ΠΎ позволяСт Π΅ΠΌΡƒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² языковых Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°Ρ…), ΠΈ ΠΎΠ½ ΠΏΠΎΠ»Π΅Π·Π΅Π½ людям с Π½Π°Ρ€ΡƒΡˆΠ΅Π½ΠΈΠ΅ΠΌ Π·Ρ€Π΅Π½ΠΈΡ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹, Ρ‡ΠΈΡ‚Π°ΡŽΡ‰ΠΈΠ΅ ΡΡ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ вслух (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, слово Β«ΡˆΠ΅ΡΡ‚ΡŒΒ» ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΠΊΠ°ΠΊ Π½Π° французском, Ρ‚Π°ΠΊ ΠΈ Π½Π° английском языках, Π½ΠΎ произносится ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ.).

МоТно Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ язык для Ρ‡Π°ΡΡ‚ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. НапримСр, ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ язык Π΄Π»Ρ части страницы Π½Π° японском:

<p>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° японском: <span lang="jp">γ”ι£―γŒη†±γ„γ€‚</span>.</p>

ΠšΠΎΠ΄Ρ‹ языков ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ Π² стандартС ISO 639-1. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с языками ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ·Π½Π°Ρ‚ΡŒ Π² Π―Π·Ρ‹ΠΊΠΎΠ²Ρ‹Π΅ тэги Π² HTML ΠΈ XML.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

На этом заканчиваСтся наш Π±Π΅Π³Π»Ρ‹ΠΉ ΠΎΠ±Π·ΠΎΡ€ ΠΏΠΎ HTML-Π±Π»ΠΎΠΊΡƒ head  β€”  Ρ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС, Π½ΠΎ ΠΈΡΡ‡Π΅Ρ€ΠΏΡ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΎΠ±Π·ΠΎΡ€ Π±ΡƒΠ΄Π΅Ρ‚ скучным ΠΈ Π·Π°ΠΏΡƒΡ‚Π°Π½Π½Ρ‹ΠΌ Π½Π° этом этапС, ΠΌΡ‹ ΠΆΠ΅ сСйчас Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π΄Π°Ρ‚ΡŒ Π²Π°ΠΌ прСдставлСниС ΠΎ самых распространённых Π²Π΅Ρ‰Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‚Π°ΠΌ Π½Π°ΠΉΡ‚ΠΈ! Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим основы Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ тСкста Π² HTML.

Π’ этом ΠΌΠΎΠ΄ΡƒΠ»Π΅

ΠœΠ΅Ρ‚Π°-Ρ‚Π΅Π³ΠΈ: Ρ‡Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅, Π·Π°Ρ‡Π΅ΠΌ ΠΎΠ½ΠΈ Π½ΡƒΠΆΠ½Ρ‹

ΠœΠ΅Ρ‚Π°-Ρ‚Π΅Π³ΠΈ – это HTML-Ρ‚Π΅Π³ΠΈ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΎ страницС сайта.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Ρ‚Π΅Π³Π° :

  • ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Ρ€ΠΎΠ±ΠΎΡ‚Π°ΠΌ поисковых систСм;
  • слуТат инструкциСй для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… сСрвисов ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния;
  • содСрТат свСдСния ΠΎΠ± авторствС, источникС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

ΠœΠ΅Ρ‚Π°-Ρ‚Π΅Π³ΠΈ Π±Ρ‹Π²Π°ΡŽΡ‚ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹ΠΌΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠ°ΠΊΠΈΠΌΠΈ-Ρ‚ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌΠΈ систСмами.

ΠœΠ΅Ρ‚Π°-Ρ‚Π΅Π³ΠΈ для поисковых систСм

Robots

ΠœΠ΅Ρ‚Π°-Ρ‚Π΅Π³ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ€ΠΎΠ±ΠΎΡ‚Π°ΠΌ поисковых систСм, ΠΊΠ°ΠΊ ΡΠΊΠ°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ страницу.

Для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ Π±ΠΎΡ‚Π° ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ свою ΠΈΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡŽ. НапримСр, Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ robots Π½Π° Googlebot для Π“ΡƒΠ³Π»Π° ΠΈΠ»ΠΈ Π½Π° YandexBot для ЯндСкса.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ указания:

  • all – ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½Π° индСксация ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΏΠΎ ссылкам, Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ index, follow;
  • noindex – Π·Π°ΠΏΡ€Π΅Ρ‚ индСксации;
  • index – Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½Π° индСксация;
  • nofollow – нСльзя ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΠΎ ссылкам;
  • follow – ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΠΎ ссылкам;
  • noarchive – Π·Π°ΠΏΡ€Π΅Ρ‰Π΅Π½ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ссылку Π½Π° ΡΠΎΡ…Ρ€Π°Π½Π΅Π½Π½ΡƒΡŽ копию Π² Π²Ρ‹Π΄Π°Ρ‡Π΅;
  • noyaca – (для ЯндСкса) Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для сниппСта описаниС ΠΈΠ· ЯндСкс.ΠšΠ°Ρ‚Π°Π»ΠΎΠ³Π°;
  • nosnippet – (Π² Google) нСльзя ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для сниппСта Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ тСкста ΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ;
  • noimageindex – (Π² Google) Π·Π°ΠΏΡ€Π΅Ρ‚ указания страницы ΠΊΠ°ΠΊ источника изобраТСния;
  • unavailable_after:[date] – (Π² Google) послС ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ Π΄Π°Ρ‚Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π΅ΠΊΡ€Π°Ρ‰Π΅Π½ΠΎ сканированиС ΠΈ индСксированиС страницы;
  • none – Π·Π°ΠΏΡ€Π΅Ρ‚ индСксации ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΏΠΎ ссылкам, Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π΅Π½ noindex, nofollow.

Description

ΠœΠ΅Ρ‚Π°-Ρ‚Π΅Π³ name=Β«descriptionΒ» ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ поисковыми систСмами ΠΏΡ€ΠΈ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ сниппСта, поэтому ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½:

  • Ρ‚ΠΎΡ‡Π½ΠΎ ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ содСрТаниС страницы;
  • Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ;
  • Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ³Π°Π΅ΠΌΠΎΠ΅ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово.

Π’ Ρ€Π°Π·Π½Ρ‹Ρ… поисковых систСмах выводятся 160–240 символов.

Description для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ³Π°Π΅ΠΌΠΎΠΉ страницы Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ.

Keywords

ΠœΠ΅Ρ‚Π°-Ρ‚Π΅Π³ name=Β«keywordsΒ» Ρ€Π°Π½ΡŒΡˆΠ΅ использовался поисковыми систСмами ΠΏΡ€ΠΈ Ρ€Π°Π½ΠΆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Π½ΠΎ ΠΈΠ·-Π·Π° многочислСнных манипуляций Π΅Π³ΠΎ Π·Π½Π°Ρ‡ΠΈΠΌΠΎΡΡ‚ΡŒ постоянно ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π»Π°ΡΡŒ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ поисковиков Π΅Π³ΠΎ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΡŽΡ‚. Google Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π²ΠΎΠΎΠ±Ρ‰Π΅, Π° ЯндСкс ΠΏΠΈΡˆΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ. Но Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ keywords Π΄Π°Π²Π½ΠΎ Π½Π΅ ΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ влияния, Π° Π΅Π³ΠΎ Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ пСрСспаму.

Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ‚Ρ€ΠΈ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°:

  • ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ пустым;
  • ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Π΅ Ρ„Ρ€Π°Π·Ρ‹ ΠΈΠ»ΠΈ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ слова Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ;
  • ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π» бСссвязный Π½Π°Π±ΠΎΡ€ слов, ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ составлСны ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ Ρ„Ρ€Π°Π·Ρ‹.

Если принято Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова, Π²Π°ΠΆΠ½ΠΎ Π½Π΅ Π΄ΠΎΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ спама.

ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ страницу ΠΈ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Ρ‚ΡŒΡΡ Π² ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π΅.

Title

Title тСхничСски Π½Π΅ являСтся ΠΌΠ΅Ρ‚Π°-Ρ‚Π΅Π³ΠΎΠΌ, Π½ΠΎ Π΅Π³ΠΎ часто относят ΠΊ этой Π³Ρ€ΡƒΠΏΠΏΠ΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ содСрТит ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, которая ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ поисковыми систСмами ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ.

Π”Π°Π½Π½Ρ‹ΠΉ HTML-Ρ‚Π΅Π³ Π²Π°ΠΆΠ΅Π½ для SEO: влияСт Π½Π° Ρ€Π°Π½ΠΆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎ сниппСту.

ΠšΠ»Π°ΡΡΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ заполнСнию ΠΌΠ΅Ρ‚Π°-Ρ‚Π΅Π³Π°:

  • ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ³Π°Π΅ΠΌΠΎΠ΅ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово Π½Π° страницС;
  • Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠ»ΡŽΡ‡ Π²Π½Π°Ρ‡Π°Π»Π΅;
  • ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ сайта;
  • ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ;
  • ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ Π΄Π»ΠΈΠ½Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π½Π΅ обрСзался Π² сниппСтС.

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΠ° Π΄Π»ΠΈΠ½Π° – 70–80 символов.

Π”Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠ΅Ρ‚Π°-Ρ‚Π΅Π³ΠΈ

ВСрификация

Для подтвСрТдСния ΠΏΡ€Π°Π²Π° собствСнности Π½Π° сайт ΠΈ возмоТности ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠΌ Π² ВСбмастСрС ЯндСкса ΠΈΠ»ΠΈ Search Console Π² Google ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ особыС ΠΌΠ΅Ρ‚Π°-Ρ‚Π΅Π³ΠΈ Π²Π΅Ρ€ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ google-site-verification ΠΈ yandex-verification (ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ способ).

Viewport

ΠœΠ΅Ρ‚Π°-Ρ‚Π΅Π³ Π½ΡƒΠΆΠ΅Π½ для Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ ΠΊ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ устройствам, ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΌΠ°ΡΡˆΡ‚Π°Π± Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ области просмотра Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π‘Π΅Π· Π½Π΅Π³ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ΅.

Http-equiv

ΠŸΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌΡ‹Π΅ значСния:

  • Content-Type – ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΡƒ ΠΈ Ρ‚ΠΈΠΏ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°;
  • Refresh – ΠΏΠ΅Ρ€Π΅Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ страницу послС Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π² сСкундах Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ нахоТдСния;
  • Content-Language – ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ основного языка Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

Π’Π΅Π³ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Π½Π° основании ΠΊΠ°ΠΊΠΈΡ… Π΄Π°Π½Π½Ρ‹Ρ… Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ содСрТаниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

Author ΠΈ Copyright

Ѐункция – идСнтификация Π°Π²Ρ‚ΠΎΡ€Π°. Если сайт ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Copyright, Ссли ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌΡƒ Π»ΠΈΡ†Ρƒ – Author.

Атрибут http-equiv | htmlbook.ru

ο»Ώ
Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

БпСцификация

HTML:3.24.015.0XHTML:1.01.1

ОписаниС

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Ρ‹Π²Π°ΡŽΡ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° http-equiv, Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ content, Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΎΡ‚Π²Π΅Ρ‚Π° HTTP ΠΈ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ ΠΈΡ…, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΏΡ€ΠΈΠ±Ρ‹Π»ΠΈ нСпосрСдствСнно ΠΎΡ‚ сСрвСра.

Бинтаксис

HTML
<meta http-equiv="...">
XHTML
<meta http-equiv="..." />

ЗначСния

Π›ΡŽΠ±ΠΎΠΉ подходящий ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€. НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ допустимыС значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° http-equiv.

Content-Type
Π’ΠΈΠΏ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.
expires
УстанавливаСт Π΄Π°Ρ‚Ρƒ ΠΈ врСмя, послС ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ информация Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒΡΡ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠ΅ΠΉ.
pragma
Бпособ ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.
refresh
Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π² Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

НСт.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Π’Π΅Π³ META, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ http-equiv</title>
   <meta http-equiv="expires" content="Sun, 01 Jan 2013 07:01:00 GMT">
  </head> 
  <body>
    <p>...</p>
  </body>
</html>

НС Π²Ρ‹ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΠΉΡ‚Π΅ свой ΠΊΠΎΠ΄ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Π² коммСнтариях, ΠΎΠ½ отобраТаСтся Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ. Π’ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ сСрвисом cssdeck.com ΠΈΠ»ΠΈ jsfiddle.net, сохранитС ΠΊΠΎΠ΄ ΠΈ Π² коммСнтариях Π΄Π°ΠΉΡ‚Π΅ Π½Π° Π½Π΅Π³ΠΎ ссылку. Π’Π°ΠΊ ΠΈ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ сразу увидят.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *