Ce înseamnă cap în html. Eticheta head: crearea, configurarea și atribuirea
Ce înseamnă cap în html. Eticheta head: crearea, configurarea și atribuirea
29.04.2019Windows 8
Salutare dragi cititori ai blogului! Continuăm titlul „Crearea unui site web de la zero”, și în special subiectul etichetelor ... Și astăzi vom lua în considerare etichetele care sunt prezente în orice pagină de internet - , și
... Mai există o etichetă care ar trebui să fie în fiecare document HTML și despre care am scris deja într-unul din articolele anterioare, așa că nu o vom atinge.
În articolele anterioare din această secțiune, am scris despre crearea unui fișier gol în format html. De fapt, a fost folosit în articolul Pro (aici au fost aplicate etichetele de titlu). Acum vom edita direct acest fișier cu descrieri complete.
Și să începem articolul prin editarea fișierului creat. Personal, l-am numit index.html, dar numele poate fi orice. Îl deschidem cu orice editor de text (este mai bine să folosiți Notepad ++, deoarece are evidențierea codului și alte gadget-uri utile). Și adăugați imediat etichete ,
și exact în ordinea în care sunt scrise. Nu uitați să le închideți așa cum se arată în captură de ecran. Documentul va arăta astfel:
Acum să ne uităm la semnificația fiecărei etichete separat. Nu degeaba sunt în toată lumea document HTML.
Funcții de etichetare
Deci eticheta este o recipient(). Conține tot conținutul vizibil și invizibil al paginii web (inclusiv etichetele și ). Etichetă de deschidere vine imediat după declarația Doctype și închiderea se află la sfârșitul documentului. Astfel, îi explică browserului unde să înceapă procesarea documentului și unde să-l termine.
În teorie, el însuși poate înțelege ce și cum. Dupa toate acestea ? Acesta este un traducător HTML și este puțin probabil ca acesta să înceapă procesarea de la mijlocul documentului și să-l termine înainte de a ajunge la sfârșit. Întrebarea, desigur, este controversată, dar mereu m-am gândit (și acum nu renunț la părerea mea) că această etichetă trebuie scrisă.
Chiar dacă funcția acestei etichete este doar în care denotă limite de conținut, are propriile atribute (care acum fie nu sunt folosite deloc, fie sunt folosite extrem de rar). Surse diferite indică atribute diferite unele de altele, așa că nu îndrăznesc să propun versiunea corectă.
Singurul lucru pe care îl pot spune cu siguranță este că majoritatea atributelor nu sunt acceptate de HTML 4.01 sau sunt nedorite. Deși vă voi da un exemplu. - tooltip oriunde în document. De exemplu, când treceți mouse-ul peste o imagine, este posibil să vedeți un text pop-up. De asemenea, în cazul acestei etichete:
Și iată ce veți vedea trecând cursorul peste documentul cu conținutul dat:
Este de preferat să folosiți atributul title nu în etichetă , dar în orice alte secțiuni specifice ale paginii. În primul rând, este convenabil, iar în al doilea rând, motoarele de căutare vor reacționa mai bine la site-ul tău. Această etichetă nu afectează direct optimizarea resurselor. Să mergem mai departe.
Funcția de etichetă
Și următorul în rând este etichetă
... Conține toate informațiile tehnice despre pagină care servesc pentru a ajuta browserul și motoarele de căutare. Eticheta este containerizată și urmează imediat după , doar spre deosebire de acesta din urmă, eticheta de închidere nu se află la sfârșitul documentului, ci înaintea etichetei de deschidere .
În ce informații pot fi văzute
? Dar nici unul. Totul din această etichetă este accesibil ochiului uman doar prin vizualizarea codului sursă al paginii. Tot conținutul acestei etichete este pentru motoare de căutare și browsere... Singurul lucru pe care îl puteți vedea cumva este eticheta. care este responsabil pentru titlul ferestrei paginii web. Iată un exemplu:</p>
<p><img src='https://i0.wp.com/monetavinternete.ru/wp-content/uploads/2013/01/Title-v-tege-head.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>Textul de după pictogramă este conținutul etichetei <title>... Acum să ne uităm la conținut <head>pe care nu o putem vedea, dar care este o parte foarte importantă <b>crearea si promovarea site-ului.</b>În primul rând, aceasta este linia</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</p><p>Aceasta este metaeticheta responsabilă pentru <b>tipul de conținut al paginii</b>(Tipul de conținut). În acest caz, acesta este codul html în codificarea UTF-8 (conținut = "text / html; set de caractere = UTF-8"). Urmează eticheta de titlu descrisă mai sus. Apoi sunt rânduri care încep cu eticheta <link>... Indică o legătură către un document extern. De exemplu, linia</p><p>
<link href="http://сайт/.../style.css" rel="stylesheet" media="screen" type="text/css" />
</p><p>indică faptul că un fișier (rel = „stylesheet”) este inclus cu (type = „text / css”), care se află la o astfel de adresă (pentru a reduce lungimea liniei, am înlocuit jumătate din adresă cu puncte). După procesarea acestei linii de către browser, acesta va stabili unde să o luați <b>foi de stil în cascadă</b>.</p>
<p>În general, eticheta head conține o mulțime de informații despre care se poate vorbi la nesfârșit. Ultimul lucru demn de remarcat (mai ales în cazul) este prezența etichetelor de descriere, cuvintelor cheie și canonice. eu folosesc <b>Pluginul All in One SEO Pack</b>, prin urmare ele sunt prezente în interior <head>.</p>
<p>Astăzi vom analiza cum să configurați un site web, astfel încât să nu vă fie rușine să trimiteți clienți către el. Cel mai probabil, ați pregătit deja designul. Mai rămâne doar să configurați domenii și să publicați site-ul!</p>
<h3></h3>
<h3>Numele și descrierea site-ului</h3>
<p>Mergi la " <b>setări</b>»Site și prescrie seo-text (text pentru motoarele de căutare).</p>
<p><b>Titlul filei (vizibil pentru vizitatori)</b>= descrierea site-ului care este afișată în fila browser. În titlu, descrieți domeniul dvs. de activitate cu detalii. <br><i>Exemplu „Dulapurile glisante italiene cu livrare la Moscova”</i></p>
<p><b>Cuvinte cheie (nu sunt vizibile pentru vizitatori)</b>= introduceți cuvintele cheie care vă caracterizează site-ul. <br>IMPORTANT: aceste cuvinte cheie nu au nimic de-a face cu Yandex.Direct. Cuvintele pot fi diferite. <br><i>Exemplu „Italia, bucătării, dulapuri, compartimente, Moscova, livrare”</i></p>
<p><b>Descriere (nu este vizibilă pentru vizitatori)</b>= descrierea site-ului dvs. în 200 de caractere. Descrieți pe scurt site-ul dvs. în 1-2 propoziții. <br><i>Exemplu Compania "LLC" "este angajată în livrări directe de mobilier italian cu livrare la Moscova. Oferim o garanție pentru toate accesoriile timp de 10 ani. Mai mult de 100 de modele în stoc și la comandă."</i>
</p>
<p><b>Introducerea etichetei de cap</b>și <b>Introducerea etichetei corporale</b>= sunt optionale. Folosit de utilizatori profesioniști pentru a introduce cod personalizat.</p>
<h3>Conexiune la domeniu</h3>
<p>Orice site creat în serviciul nostru primește un subdomeniu gratuit (site.lpmotortest.ru). În această secțiune îl puteți schimba.</p>
<p><img src='https://i0.wp.com/lpmotor.ru/help-landing/old/upload/11/Screenshot%20at%20%D0%BD%D0%BE%D1%8F%D0%B1.%2024%2011-56-13_min.png' width="100%" loading=lazy loading=lazy><br></p>
<p>Sau vă puteți conecta propriul domeniu. Pentru a face acest lucru, faceți clic pe „Atașați domeniul” și notați numele domeniului. Pentru ca domeniul să fie atașat, trebuie să înregistrați dn-ul corect:</p>
<p>DNS1: <b>ns1.site</b>
<br>DNS2: <b>ns2.site</b></p>
<h3>Notificări prin SMS și e-mail</h3>
<p>Pentru fiecare pagină de destinație, puteți configura notificări despre noi aplicații și clienți. Inițial, toate notificările sunt activate automat. În orice moment, puteți modifica setările la discreția dvs.</p>
<p><img src='https://i2.wp.com/lpmotor.ru/help-landing/old/upload/11/Screenshot%20at%20%D0%BD%D0%BE%D1%8F%D0%B1.%2024%2011-58-59_min.png' width="100%" loading=lazy loading=lazy></p>
<p>Fiecare document HTML de pe Internet este alcătuit din elemente diferite. Multe dintre ele sunt destul de comune și pot fi găsite pe aproape fiecare site. De exemplu, conținutul paginii este de obicei împărțit în paragrafe, care conțin titluri, imagini și link-uri. Cu toate acestea, deși aceste elemente sunt comune, nu trebuie să fie prezente în cod. Nu este nevoie tehnică pentru ele pe pagina web. Cu toate acestea, este rar să găsiți un site fără aceste etichete.</p> <h2>Atribuirea etichetelor <head></h2> <p>Există elemente care trebuie să fie prezente în cod. Din punct de vedere tehnic, există o singură etichetă care ar trebui să fie prezentă în partea de sus a tuturor documentelor HTML - <html>-etichetă. Acesta permite browserului să înțeleagă unde începe și unde se termină pagina. Între eticheta de deschidere și de închidere <html>se potrivește întregului conținut al paginii HTML. Doar doctype este în fața lui. Cele mai multe dintre celelalte elemente importante din punct de vedere tehnic se află în interiorul etichetei <head>care se află în interior <html>și se află chiar la începutul codului. El și eticheta <body>sunt urmașii lui.</p> <h2>Ceea ce este conținut în <head></h2> <p>Element <head>este un recipient pentru alte elemente. Conține informații generale (metadate) despre document, inclusiv titlul acestuia, link-uri către scripturi și foi de stil. Metadatele oferă despre un document, cum ar fi titlul, descrierea, cuvintele cheie. În același loc cu eticheta <head>, situat <body>unde este plasat conținutul site-ului. Metadatele sunt ascunse de vizitatori, dar sunt folosite de optimizatori pentru a promova pagina. Ei și etichetele de antet ( <h1>-<h6>) sunt foarte utile deoarece trimit informații către browserul web precum și către motoarele de căutare despre această pagină.</p><p>Ordinea majorității elementelor în <head>chiar nu conteaza. Aceasta este o chestiune de preferință, astfel încât acestea pot fi scrise într-un mod care se potrivește designerului de layout. Metadatele sunt esențiale pentru optimizarea motoarelor de căutare, deoarece le este mai ușor pentru roboții care indexează site-urile să le găsească și să le afișeze pe pagina de căutare într-o anumită ordine. Ordinea de afișare depinde de algoritmii muncii lor, care includ, printre altele, informații tehnice corecte despre pagină.</p> <h2>În ce elemente pot fi prezente <head></h2> <p>Următoarele elemente pot fi găsite în interiorul acestei etichete: <title>(acest element este necesar pentru documentul HTML) <style>, <base>, <link>, <meta> <script>, <noscript>.</p><p>В теге <head> можно:</p> <br><img src='https://i2.wp.com/fb.ru/misc/i/gallery/43581/2675140.jpg' width="100%" loading=lazy loading=lazy><p>Большинство метаданных не отображаются в браузере. Только <title> обычно появляется в строке заголовка браузера. Это может быть полезно для функциональности страницы, а информацию легко проверить через "Инспектор".</p> <h2>Синтаксис и атрибуты</h2> <p>Тег <head> - парный. Что это значит? Информация в нем записывается между открывающим и закрывающим тегами как <head></head>. Что должны иметь большинство HTML-документов? Это <title> тег в <head>. Единственное исключение: если документ — это <iframe> srcdoc, или информация, которую нужно заключить в заголовок, уже имеется в протоколе более высокого уровня. Примером может служить HTML-формат электронной почты. Атрибуты могут быть добавлены в HTML-элемент, чтобы предоставить больше информации о том, как элемент должен выглядеть или вести себя. Тег <head> принимает атрибут profile, где прописывается адрес профиля метаданных и другие глобальные атрибуты. Но они не являются обязательными.</p> <p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/43581/2675170.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Тег <title> и его особенности</h2> <p>Элемент <title> или заголовок страницы - один из важнейших мета-тегов в <head>. Он всегда должен присутствовать на веб-странице, иначе не смогут быстро найти ее и корректно отобразить в выдаче. Помимо этого, существует еще ряд причин, почему его использование обязательно:</p> <ol><li>Он отображает название сайта.</li> <li>Используется как основное средство для каталогизации. Если веб-страница не имеет названия, где описывается ее содержимое, поисковые системы дают ей более низкий рейтинг.</li> <li>Также содержимое <title> отображается как текстовая ссылка на странице выдачи, известной как SERP.</li> <li>Он отображается в верхней части окна браузера. Или на вкладке, описывающей страницу в браузере.</li> <li>Информация из заголовка страницы записывается, когда кто-то добавляет сайт в закладки. Поэтому его содержимое должно быть запоминающимся, чтобы пользователь мог легко запомнить и найти его среди других веб-страниц.</li> <li>Если этот тег не используется, то на сайте будет отображаться "Untitled Document". Он является заголовком страницы по умолчанию. Такой заголовок используется на многих программных платформах веб-разработки.</li>
</ol><p>Поскольку тег <title> предназначен для отображения информации о сайте, каждая страница должна иметь уникальный заголовок, так как на ней находится уникальный контент. Это наиболее важная вещь для SEO. Хороший заголовок должен быть реалистичным и отображать ту информацию, которая действительно присутствует на странице. Считается, что оптимальное содержание этого тега не должно превышать 60 символов. Можно добавить больше, но поисковые системы будут отсекать содержимое, если оно превышает это число.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/43581/2675163.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Метаданные в <head></h2> <p>Тег <head> определяет раздел, в котором находится техническая информация HTML-документа. Метаданные содержат дополнительную информацию о веб-странице в браузере. В них можно включать информацию, такую как имя автора, программа, которая была использована для создания страницы, и ключевые слова. Наиболее важный мета-тег, который должен быть в коде страницы, — это кодировка. Мета-теги очень важны для получения хорошего рейтинга в поисковых системах. Поэтому важно создавать качественные заголовки и описания страниц.</p> <p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/43581/2675167.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Другие важные теги</h2> <p>В теге <head> могут присутствовать и другие элементы. Например, <style> используется для добавления внутренних стилей и изменения оформления документа. Однако рекомендуется в <head> подключать внешние стили — это гораздо лучше, чтобы отделить контент от его оформления. Сделать это можно при помощи тега <link>. Добавить внешнюю таблицу стилей можно при помощи следующего кода: <link href="main.css" rel="stylesheet">. Для этого тега обязателен атрибут href, в котором указывается ссылка на файл со стилями CSS, а также rel, где прописывается, что это именно стили. Существуют и другие варианты использования тега <link>, например, для создания фавикона — значка для веб-страницы, который отображается в поисковой выдаче. Атрибут rel также используется по-разному и часто применяется при создании мобильных приложений.</p> <p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/43581/2675172.jpg' width="100%" loading=lazy loading=lazy></p> <p>Если добавить несколько элементов <style> и <link> в документ, они будут применяться в порядке следования. Потому важно убедиться, что они следуют друг за другом в правильном порядке, чтобы избежать неожиданностей. В языке HTML <link>-элемент используется для добавления в текущий документ внешнего ресурса и наиболее часто применяется для ссылки на стили. В теге <head> также могут подключаться скрипты. Тег <script> позволяет добавить JavaScript на сайт, но вставлять его рекомендуется незадолго до закрытия <body>. Тогда сначала будет загружаться все содержимое, а затем обрабатываться JavaScript. Это поможет увеличить скорость загрузки страницы и исключит возможность просмотра пользователем пустого экрана, пока подключается скрипт.</p>
<p><b>В
</b>
сем привет. Давненько ничего не писал, но сегодня вот решил вас порадовать интересной статейкой про оптимизацию, а если быть конкретнее оптимизацию служебного блока head в html коде сайта. Итак, приступим.</p>
<p>Д
ля поисковых роботов не маловажную роль играет структура и содержимое служебного тега head, в котором размещается информация не отображаемая на странице (скрипты, файлы стилей, подключаемые плагины и мета теги).</p>
<p>Все содержимое области head выводится на сайте, при помощи служебного файла wordpress header.php содержимое которого вы можете посмотреть перейдя в админ панель/внешний вид/редактор:</p>
<p>Если, вы внимательно посмотрите на HTML код wordpress блога в область head, а потом сравните это с файлом header.php, то обнаружите, что кроме указанных там вызовов: мета тегов, стилей CSS и заголовка, есть много других строк. Они, как правило, появляются при использовании различных плагинов, которые добавляют свои стили или скрипты в HTML. Иногда, результирующий код получается ну очень большим и захламленным что плохо влияет на продвижение сайта.</p>
<h2>Структура и содержимое правильного head</h2>
<p>В
соответствии со стандартами HTML только несколько тегов, могут быть помещены в раздел head. Это следующие теги: <base>, <link>, <meta>, <title>, <style> и <script>.</p>
<p>Самые важные из этих тегов в плане оптимизации страницы это title, который указывает название окна текущего документа и meta - применяется для указания информации об HTML-документе, которая помогает браузерам правильно отображать страницы, а поисковым машинам - их индексировать и ранжировать в выдаче.</p>
<p>Но, зачастую эти теги, либо вообще отсутствуют, либо из-за подключаемых плагинов оказываются в самом конце блока head, что в свою очередь не благоприятно влияет на ранжирование сайта в выдаче. Самым простым способом добавить эти теги для wordpress сайта - установить один из плагинов:</p>
<p>Один из лучших плагинов для оптимизации WordPress блога под поисковые системы. Позволяет вводить мета теги для каждой страницы, менять формат вывода тайтлов и т.д.</p>
<p>Более продвинутая версия All in One SEO Pack. Дополнительно умеет добавлять тег nofollow к ссылкам.</p>
<p>После установки одного из этих плагинов в идеале у вас должно быть содержимое head для wordpress следующего вида:</p><p>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name=”robots” content="index, follow" />
<title>Оптимизация блока head сайта на wordpress
Ну что постараемся привести код к такому виду? Конечно да!
Избавляемся от лишнего кода в head
П
ервое, что нужно сделать так это объединить все файлы стилей вашей темы в один общий файл style.css. Для этого откройте последовательно дополнительные файлы стилей скопируйте из них код и вставьте в конец файла style.css После этих действий, можно удалить из header.php код вывода дополнительных стилей. В итоге в html у вас должна остаться только одна строчка подключения стилей вашей темы:
В коде файла шаблона функция реализует большую часть «дополнительных вставок» не нужных для блока head. Просто удалить эту функцию нельзя, так как это непременно повлечет за собой определенные последствия, что негативно может отразиться на работе блога.
Поэтому, лучше будет просто деактивировать подключение в область head стилей плагинов, через файл функций fuctions.php.
Очень важно! Перед какими либо изменениями в файле fuctions.php, не поленитесь сделайте его копию.
Используем следующий алгоритм:
1). Прежде чем начать отключать добавление плагинов в head скопируйте html код который они добавляют.
2). Создайте в области Body дополнительный блок к примеру под названием header:
А тут код плагинов
В этот блок нам нужно вставить код который добавляют плагины, чтобы они не перестали корректно работать.
3). Нужно тщательно просмотреть основной файл php плагина, хуки которого Вы собрались удалить. При помощи сочетания клавиш Ctrl+F отыщите там следующую конструкцию:
Add_action("wp_head", "plugin_function_here");
4). Чтобы корректно избавится от данного вызова, нужно добавить в файл functions.php следующую строку:
Remove_action("wp_head", "plugin_function_here");
5). Сохраняем шаблон и проверяем, что у нас получилось.
Уникальные случаи тоже встречаются, при которых применение remove_action для wp_head() не работает. Приведу в пример WP-PageNavi (версия 2.5.0), там явного вызова функции в wp_head() нет, невзирая на это, плагин подгружает свой файл стилей. Внимательно посмотрите на первоначальный код wp-pagenavi.php, там есть такая функция «Enqueue PageNavi Stylesheets», добавляющая стили через:
Дописываем в самый конец файла функций fuctions.php перед ?>,
следующую строку, чтобы отделаться от этого вызова:
Add_action("init", "remheadlink");
function remheadlink()
{
remove_action("wp_print_styles", "pagenavi_stylesheets");
}
В работе с ненужными вызовами и хуками просматривается определенный принцип – Вы ищите нужную функцию и отключаете ее.
Можно освободиться и от других не нужных элементов, которые вы не используете, применив хаки для functions.php, например:
Add_action("init", "remheadlink");
function remheadlink()
{
remove_action("wp_head","feed_links_extra", 3); // ссылки на дополнительные rss
remove_action("wp_head","feed_links", 2); //ссылки на основной rss и комментарии
remove_action("wp_head","rsd_link"); // для сервиса Really Simple Discovery
remove_action("wp_head","wlwmanifest_link"); // для Windows Live Writer
remove_action("wp_head","wp_generator"); // убирает версию wordpress
}
На последних версиях wordpress в блоке head появляется странный скрипт:
Script type text javascript window. wpemojiSettings baseUrl http: s.w.org images core emoji 72x72 ext png source concatemoji http: medicinahouse.ru wp-includes js wp-emoji-release.min.js? ver 4.2.4 !function a, b, c function d a var c b.createElement canvas d c.getContext c.getContext 2d return d d.fillText? d.textBaseline top
Этот скрипт добавляет набор стандартных смайликов Emoji, даже не знаю зачем вордпресс его добавил, ну да ладно. Убрать этот скрипт, можно при помощи добавления в самый конец файла функций, перед знаком?> следующей конструкции:
Помимо всего сказанного выше, через файл функций, можно убрать версию скриптов и стилей. Нужно всего навсего добавить код:
Function _remove_script_version($src){
$parts = explode("?", $src);
return $parts;
}
//Это для скрытия версии скриптов
add_filter("script_loader_src", "_remove_script_version", 15, 1);
//Это для стилей
add_filter("style_loader_src", "_remove_script_version", 15, 1);
На этом у меня все. Спасибо за внимание.
Мета теги в html
- это группа специальных тегов, которые находятся между тегами
и
. Из названия сразу понятно, что располагаются они в начале кода.
Заголовочные теги выполняют две важные задачи:
Сообщают информацию о html-странице браузеру;
Сообщают информацию поисковым системам про конкретный html-страницу;
Особенностью заголовочных тегов является то, что они визуально для пользователя не видны (исключением является тег
, который может быть виден во вкладке страницы браузера). Все заголовочные теги являются необязательными, но это не означает, что они не нужны.</p>
<p>Эти теги можно разделить на 4 группы.</p>
<ul><li>Тег <title>
Теги
Теги
Тег
Să aruncăm o privire la fiecare grup separat.
1. Etichetați
- titlul paginii. Aceasta este singura etichetă de titlu care este vizibilă pentru utilizatori. Este de mare importanță pentru motoarele de căutare în ceea ce privește SEO. Acest titlu de pagină este afișat în SERP atunci când sunt indicate titlurile paginii.
