Šta znači glava u html-u. Oznaka glave: kreiranje, konfiguriranje i dodjeljivanje
Šta znači glava u html-u. Oznaka glave: kreiranje, konfiguriranje i dodjeljivanje
29.04.2019Windows 8
Pozdrav dragi čitaoci bloga! Nastavljamo odjeljak "Kreiranje stranice od nule", a posebno temu oznaka... A danas ćemo razmotriti oznake koje su prisutne na bilo kojoj web stranici - , I
. Postoji još jedan tag koji bi trebao biti u svakom HTML dokumentu i o kojem sam već pisao u jednom od prethodnih članaka - tako da ga nećemo dirati.
U prethodnim člancima kolumne pisao sam o kreiranju praznog fajla u html formatu. U stvari, korišten je u profesionalnom članku (tamo su primijenjene oznake naslova). Sada ćemo direktno urediti ovu datoteku s punim opisima.
I započnimo članak uređivanjem kreirane datoteke. Lično sam ga nazvao index.html, ali ime može biti bilo koje. Otvorite ga bilo kojim uređivačem teksta (bolje je koristiti Notepad++, jer ima isticanje koda i druge korisne gadžete). I odmah mu dodajte oznake ,
I tačno onim redom kojim su napisani. Ne zaboravite ih zatvoriti kao što je prikazano na snimku ekrana. Dokument će izgledati ovako:
Sada razmotrite značenje svake oznake posebno. Nije ni čudo što su u svakome. HTML dokument.
Funkcije oznaka
Dakle, oznaka je kontejner(). Unutar njega je sav vidljivi i nevidljivi sadržaj web stranice (uključujući oznake I ). Otvaranje oznake dolazi odmah nakon deklaracije Doctype i zatvaranja nalazi se na kraju dokumenta. Na taj način pretraživaču jasno daje do znanja gdje da započne obradu dokumenta i gdje da ga završi.
Teoretski, on sam može razumjeti šta i kako. Nakon svega ? Ovo je prevodilac HTML jezika i malo je vjerovatno da će on započeti obradu od sredine dokumenta i završiti je prije nego što stigne do kraja. Pitanje je, naravno, diskutabilno, ali uvijek sam mislio (i sada ne odustajem od svog mišljenja) da je pisanje ove oznake obavezno.
Čak i s obzirom da je funkcija ove oznake samo in razgraničenje sadržaja, ima svoje atribute (koji se sada ili ne koriste uopće, ili se koriste izuzetno rijetko). Različiti izvori ukazuju na atribute koji se međusobno razlikuju, tako da se ne usuđujem iznijeti ispravnu verziju.
Jedino što sa sigurnošću mogu reći je da većina atributa nije podržana od strane HTML 4.01 ili su nepoželjna. Ipak ću vam dati jedan primjer. - tooltip bilo gdje u dokumentu. Na primjer, kada zadržite pokazivač miša iznad slike, možda ćete vidjeti iskačući tekst. Također u slučaju ove oznake:
A evo šta ćete vidjeti kada pređete mišem preko dokumenta s ovim sadržajem:
Poželjno je koristiti atribut title koji nije u oznaci , ali u svim drugim specifičnim područjima stranice. Prvo, to je zgodno, a drugo, pretraživači će bolje tretirati vašu stranicu. Ova oznaka ne utiče direktno na optimizaciju resursa. Idemo dalje.
Tag funkcija
I sljedeći na redu je tag
. Sadrži sve tehničke informacije o stranici, koje služe kao pomoć pretraživaču i pretraživačima. Oznaka je oznaka kontejnera i slijedi odmah nakon , samo za razliku od zadnjeg, završne oznake se ne pojavljuje na kraju dokumenta, već prije početne oznake .
Koje informacije se mogu naći u
? Ali nijedan. Sve unutar ove oznake dostupno je ljudskom oku samo gledanjem izvornog koda stranice. Sav sadržaj u ovoj oznaci je za pretraživače i pretraživače. Jedina stvar koju nekako možete vidjeti je oznaka , koji je odgovoran za naslov prozora web stranice. Evo primjera:</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>Tekst iza ikone je sadržaj oznake <title>. Pogledajmo sad sadržaj. <head>, koji ne možemo vidjeti, ali koji je vrlo važan dio <b>kreiranje i promocija sajta.</b> Prije svega, ovo je linija</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</p><p>Ovo je meta oznaka za <b>tip sadržaja stranice</b>(Tip sadržaja). U ovom slučaju, ovo je html kod u UTF-8 kodiranju (content="text/html; charset=UTF-8"). Slijede gore opisana oznaka naslova. Zatim dolaze redovi koji počinju oznakom <link>. Označava vezu do eksternog dokumenta. Na primjer, linija</p><p>
<link href="http://сайт/.../style.css" rel="stylesheet" media="screen" type="text/css" />
</p><p>označava da je (rel="stylesheet") fajl sa (type="text/css") povezan, koji se nalazi na toj i toj adresi (da smanjim dužinu reda, pola adrese zamenio sam tačkama) . Nakon obrade ovog stringa od strane pretraživača, on će odrediti gdje da dobije <b>kaskadni listovi stilova</b>.</p>
<p>Općenito, u head tag-u ima puno informacija o kojima se može pričati unedogled. Posljednja stvar koju treba napomenuti (posebno u slučaju ) je prisustvo opisnih oznaka, ključnih riječi i kanonskih. ja koristim <b>dodatak Sve u jednom SEO paketu</b>, tako da su prisutni unutra <head>.</p>
<p>Danas ćemo analizirati kako postaviti stranicu tako da nije neugodno slati kupce na nju. Najvjerovatnije ste već pripremili dizajn. Ostaje samo postaviti domene i objaviti stranicu!</p>
<h3></h3>
<h3>Naziv i opis stranice</h3>
<p>Idi " <b>postavke</b>» sajt, i propisati seo-tekst (tekst za pretraživače).</p>
<p><b>Naslov kartice (vidljivo posjetiteljima)</b>= opis stranice koji se prikazuje u kartici pretraživača. U naslovu opišite svoje područje djelovanja s pojedinostima. <br><i>Primjer "Italijanski ormari sa dostavom u Moskvi"</i></p>
<p><b>Ključne riječi (nije vidljivo posjetiteljima)</b>= unesite ključne riječi koje karakteriziraju vašu stranicu. <br>VAŽNO: ove ključne riječi nisu ni na koji način povezane s Yandex.Directom. Reči mogu biti različite. <br><i>Primjer "Italija, kuhinje, ormari, kupe, Moskva, dostava"</i></p>
<p><b>Opis (nije vidljiv posjetiteljima)</b>= opis Vaše stranice u 200 znakova. Ukratko opišite svoju stranicu u 1-2 rečenice. <br><i>Primer "DOO "Kompanija" se bavi direktnim isporukama italijanskog nameštaja sa isporukom u Moskvi. Dajemo garanciju na sve okove 10 godina. Više od 100 modela na lageru i po narudžbi."</i>
</p>
<p><b>Umetanje u Head tag</b> I <b>Umetanje u oznaku Body</b>= su opcioni. Koriste ga profesionalni korisnici za umetanje posebnog koda.</p>
<h3>Veza na domenu</h3>
<p>Svaki sajt kreiran u našoj usluzi dobija besplatnu poddomenu (site.lpmotortest.ru). U ovom odjeljku možete ga promijeniti.</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>Ili možete povezati svoju domenu. Da biste to učinili, kliknite na "Priloži domenu" i unesite naziv domene. Da bi se domena priključila potrebno je registrirati ispravan dns:</p>
<p>DNS1: <b>ns1.site</b>
<br>DNS2: <b>ns2.site</b></p>
<h3>Obavještenja putem SMS-a i e-pošte</h3>
<p>Za svaku odredišnu stranicu možete postaviti obavještenja o novim aplikacijama i klijentima. U početku se sva obavještenja automatski uključuju. U svakom trenutku možete promijeniti postavke po svom ukusu.</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>Svaki HTML dokument na webu se sastoji od različitih elemenata. Mnogi od njih su prilično česti i nalaze se na gotovo svim stranicama. Na primjer, sadržaj stranice se obično dijeli na pasuse, sa naslovima, slikama i vezama. Ali, iako su ovi elementi uobičajeni, njihovo prisustvo u kodu nije obavezno. Nema tehničke potrebe za njima na web stranici. Međutim, rijetko se može naći stranica bez ovih oznaka.</p> <h2>Tag assignment <head></h2> <p>Postoje elementi koji moraju biti prisutni u kodu. Tehnički postoji samo jedna oznaka koja mora biti prisutna na vrhu svih dokumenata napisanih u HTML-u - <html>-tag. Omogućava pretraživaču da shvati gdje stranica počinje i gdje se završava. Između početne i završne oznake <html>sadrži cijeli sadržaj HTML stranice. Prije je samo doctype. Većina ostalih tehnički važnih elemenata nalazi se unutar oznake <head>, koji se nalazi unutra <html>i nalazi se na samom početku koda. On i tag <body>su njegovi potomci.</p> <h2>Šta je sadržano u <head></h2> <p>Element <head>je kontejner za druge elemente. Sadrži opšte informacije (metapodatke) o dokumentu, uključujući njegov naslov, reference skripta i stilove. Metapodaci pružaju informacije o dokumentu, kao što su naslov, opis, ključne riječi. Gdje je oznaka <head>, nalazi se <body>gdje se nalazi sadržaj stranice. Metapodaci su skriveni od posetilaca, ali ih SEO-ovi koriste za promociju stranice. Oni i oznake naslova ( <h1>-<h6>) su vrlo korisni jer prenose informacije web pretraživaču, kao i pretraživačima o stranici.</p><p>Redoslijed većine elemenata u <head>nije bitno. Ovo je stvar preferencije, tako da se mogu napisati na način koji je pogodan za dizajnera izgleda. Metapodaci su neophodni za optimizaciju pretraživača, jer olakšavaju botovima koji indeksiraju sajtove da ih pronađu i prikažu na stranici za pretragu određenim redosledom. Redosled prikaza zavisi od algoritama njihovog rada, koji između ostalog uključuju ispravne tehničke informacije o stranici.</p> <h2>Koji elementi mogu biti prisutni u <head></h2> <p>Sljedeći elementi mogu biti unutar ove oznake: <title>(ovaj element je potreban za HTML dokument), <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>
Теги
Теги
Тег
Pogledajmo svaku grupu pojedinačno.
1. Tag
- naslov stranice. Ovo je jedina oznaka glave koja je vidljiva korisnicima. To je od velike važnosti za pretraživače u smislu SEO-a. Taj naslov stranice se prikazuje u izlazu kada se naznače nazivi stranica.
