Title в html что это

<title>: элемент заголовка документа

HTML-элемент заголовка ( <title> ) определяет заголовок документа, который отображается в заголовке окна браузера или на вкладке страницы. Он содержит только текст, а теги внутри элемента игнорируются.

Категории контента	Метаданные.
Допустимое содержимое	Текст, который не является межэлементным разделителем.
Пропуск тегов	Открывающий и закрывающий теги обязательны. Обратите внимание, что отсутствие </title> заставляет браузер игнорировать остальную часть страницы.
Допустимые родители	Элемент <head> , который не содержит других элементов <title> .
Допустимые ARIA-роли	Нет
DOM-интерфейс	HTMLTitleElement (en-US)

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Примечание

Элемент <title> всегда используется внутри блока <head> .

Заголовок страницы и SEO

Содержимое заголовка страницы может иметь важное значение для поисковой оптимизации (SEO). Как правило, более длинный описательный заголовок будет лучше ранжироваться (Ranking), чем короткий или скучный. Не только содержимое заголовка является одним из компонентов, используемых алгоритмами для определения порядка, в котором перечисляются страницы в поисковой выдаче, но и сам заголовок является приёмом, которым вы привлекаете внимание читателей бегло просматривающих результаты поиска.

Несколько методических рекомендаций и советов для составления хороших заголовков:

избегайте заголовков состоящих из одного или двух слов. Используйте описательные фразы или сочетание термин-определение для страниц глоссария (словарь терминов) или справки;
поисковые системы, как правило, отображают примерно 55-60 первых символов заголовка страницы. Текст, превышающий это количество символов, может быть потерян, так что постарайтесь, чтобы заголовки не были длиннее. Если вам нужно использовать более длинный заголовок, убедитесь, что важные части появляются раньше и что нет ничего критического в части заголовка, которая может быть отброшена;
избегайте специальных символов, когда это возможно; не все браузеры будут отображать их одинаково. Например, «<» часто отображается в строке заголовка окна как «<» — символ-мнемоника «меньше» в HTML (entity);
не используйте ключевые слова («keyword blobs»). Если ваш заголовок состоит только из списка слов, то алгоритмы будут часто искусственно понижать позицию вашей страницы в поисковой выдаче;
убедитесь, что ваш заголовок является уникальным на вашем сайте, насколько это возможно. Повторяющиеся или частично повторяющиеся заголовки могут способствовать неточным результатам поиска.

Пример

Этот пример устанавливает заголовок страницы (отображается в верхней части окна или вкладки браузера) как «Потрясающий заголовок страницы».

Проблемы доступности

Важно указать такое значение title , которое описывает назначение страницы.

Обычная техника навигации для пользователей вспомогательных технологий — прочитать заголовок страницы и определить какой контент она содержит. Это потому, что навигация по странице для определения её содержимого может занять время и, возможно, привести к путанице.

Пример

Для того чтобы помочь пользователю, обновите значение title , чтобы отразить важные изменения состояния страницы (например, проблемы с проверкой формы).

HTML для JavaScript разработчика

HTML определяет содержимое каждой веб-страницы в Интернете. «Пометив» свое исходное содержимое тегами HTML, вы говорите веб-браузерам, как вы хотите отображать различные части вашего контента. Создание HTML-документа с правильно размеченным контентом — это первый шаг к созданию веб-страницы.

Hpertext Markup Language является языком, описывающим структуру и семантику содержимого веб-документа.

2. Директива <!DOCTYPE html>

Большинство современных html-документов начинается с строки <!DOCTYPE html>, это говорит браузеру, что документ надо интерпретировать в соответствии с современными стандартом HTML (HTML5.*).

Это просто специальная строка в начале html-документа и она всегда должна выглядеть точно так же:

3. Понятие тега

HTML теги — это имена элементов, заключенные в угловые скобки.

Весь текст, заключённый между начальным и конечным тегом, включая и сами эти теги, называется элементом. Сам же текст между тегами — содержанием элемента. Содержание элемента может включать в себя любой текст, в том числе и другие элементы.

У тегов может быть несколько форм. Элемент вроде тела, параграфа и ссылки начинается открывающим тегом <p> и заканчивается закрывающим </p>. Некоторые открывающие теги, типа ссылки <a>, содержат дополнительную информацию в виде имя=”значение”. Она называется «атрибутами».

Некоторые теги ничего не окружают, и их не надо закрывать. Пример – тег картинки

HTML разбирается парсером довольно либерально по отношению к возможным ошибкам. Если какие-то теги пропущены, браузер их воссоздаёт. Как именно это происходит, записано в стандартах, поэтому можно ожидать, что все современные браузеры будут делать это одинаково.

4. Структура HTML документа

Как уже говорилось ранее любая html5 страница начинается со строки <!DOCTYPE html>.

Затем вся наша веб-страница должна быть обернута в тег <html>. Все, что находится внутри тега, считается частью <html> элемента, который представляет собой саму веб-страницу.

Внутри элемента <html> у нас есть еще два элемента, называемые <head> и <body>. <head> веб-страницы содержит все ее метаданные, такие как заголовок страницы, любые таблицы стилей CSS и другие вещи, необходимые для отображения страницы. Основная же часть HTML-разметки будет находиться в элементе <body>, который представляет видимое содержимое страницы.

5. Cинтаксис HTML комментариев

Также обратите внимание на синтаксис комментариев HTML в приведенном ниже фрагменте. Все, что начинается с <!— и заканчивается —>, будет полностью игнорироваться браузером. Это полезно для документирования вашего кода и создания заметок самому себе.

6. Заголовок страницы

Одним из наиболее важных фрагментов метаданных является название вашей веб-страницы, определяемое тегом <title>. Браузеры отображают <title> на вкладке для вашей страницы, и Google отображает ее как результат поиска.

7. Paragraphs

Элемент <p> помечает весь текст внутри него как отдельный абзац.

8. Headings

Headings(заголовки) похожи на (title)заголовок, но на самом деле они отображаются на странице. HTML предоставляет шесть уровней заголовков, и соответствующие элементы: <h1>, <h2>, <h3>, . <h6>. Чем выше номер, тем менее заметен заголовок.

Первый заголовок страницы обычно должен быть <h1>.

Заголовки — это основной способ разметки различных разделов вашего контента. Они определяют схему вашей веб-страницы, которую видят как люди, так и поисковые системы.

9. Cписки

Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде.

В HTML5 существует 3 типа списков: unordered lists (маркированный список) — <ul>, ordered lists (нумерованный список) — <ol> и список определений(тройка элементов предназначена для создания определений) — <dd>, <dt>, <dl>.

9.1 Unordered lists

Оборачивание содержимого тегами <ul> сообщает браузеру, что все, что находится внутри, должно отображаться как неупорядоченный список. Чтобы обозначить отдельные элементы(пункты) в этом списке, Вам нужно обернуть их в теги <li> (list item) следующим образом:

9.2 Ordered lists

Если последовательность элементов списка имеет значение, вам следует использовать упорядоченный список. Чтобы создать упорядоченный список, просто измените родительский элемент <ul> на <ol>.

Различие между неупорядоченным списком и упорядоченным списком может показаться глупым, но оно действительно имеет значение для веб-браузеров, поисковых систем и восприятие контента людьми. Это, также, проще, чем нумерация каждого элемента списка вручную.

9.3 Definition list

10. Emphasis (italic) elements

Часть, упакованная в теги <em>, должна отображаться как курсив, как показано ниже. Обратите внимание, что затронута только часть строки.

11. Strong (bold) elements

Если вы хотите зделать контент более выразительным, чем в теге <em>, вы можете использовать <strong>.

12. Пустые элементы HTML

Теги HTML, с которым мы столкнулись до сих пор,имели текстовое содержимое (например, <p>) или другие элементы HTML (например, <ol>) внутри. Это не относится ко всем HTML-элементам. Некоторые из них могут быть пустыми или самозакрывающимися. Наиболее распространенными пустыми элементами являются разрывы строк <br> и горизонтальные линии <hr>.

12.1 Разрывы строк <br>

12.2 Горизонтальные линии <hr>

13. Links и images

14. Forms

Форма — гипертекстовый контейнер контейнер, позволяющий установить обратную связь между посетителем веб-страницы и веб-приложением. Получение данных от пользователя осуществляется через типовые элементы управления : текстовые поля, кнопки, чекбоксы и т.п., размещаемых в теге form.

Также форма — способ взаимодействия(интерфейс) пользователя с бизнес логикой и данными на сервере посредством HTTP запросов.

14.1 Radio buttons

14.2 Select elements

14.3 Textareas

14.4 checkboxes

14.5 submit buttons

15. Semantic html

*. Таблицы

*. HTML Media

16. Emmet

16.1 Syntax

16.1.1 Child

16.1.2 Sibling

16.1.3 Climb-up

16.1.4 Grouping

16.1.5 Multiplication

16.1.6 Item numbering

16.1.7 ID and CLASS attributes

16.1.8 Custom attributes

16.1.9 Text

16.1.10 Implicit tag names

16.2 HTML

16.3 CSS

16.4 Cheat Sheet

17. HTML и JavaScript

В контексте нашего курса самый главный тег HTML — <script>. Он позволяет включать в документ программу на JavaScript.

Такой скрипт запустится сразу, как только браузер встретит тег <script> при разборе HTML. На странице появится диалог-предупреждение.

Включать большие программы в HTML непрактично. У тега <script> есть атрибут src, чтобы запрашивать файл со скриптом (текст, содержащий программу на JavaScript) с адреса URL.

18. Совместимость и браузерные войны

На ранних стадиях развития Веба браузер по имени Mosaic занимал большую часть рынка. Через несколько лет баланс сместился в сторону Netscape, который затем был сильно потеснён браузером Internet Explorer от Microsoft. В любой момент превосходства одного из браузеров его разработчики позволяли себе в одностороннем порядке изобретать новые свойства веба. Так как большинство людей использовали один и тот же браузер, сайты просто начинали использовать эти свойства, не обращая внимания на остальные браузеры.

Это были тёмные века совместимости, которые иногда называли «войнами браузеров». Веб-разработчики сталкивались с двумя или тремя несовместимыми платформами. Кроме того, браузеры около 2003 года были полны ошибок, причём у каждого они были свои. Жизнь людей, создававших веб-страницы, была тяжёлой.

Mozilla Firefox, некоммерческое ответвление Netscape, бросил вызов гегемонии Internet Explorer в конце 2000-х. Так как Microsoft особо не стремилась к конкуренции, Firefox отобрал солидную часть рынка. Примерно в это время Google представил свой браузер Chrome, а Apple – Safari. Это привело к появлению четырёх основных игроков вместо одного.

У новых игроков были более серьёзные намерения по отношению к стандартам и больше инженерного опыта, что привело к лучшей совместимости и меньшему количеству багов. Microsoft, видя сжатие своей части рынка, приняла эти стандарты. Если вы начинаете изучать веб-разработку сегодня – вам повезло. Последние версии основных браузеров работают одинаково и в них мало ошибок.

Нельзя сказать, что ситуация уже идеальная. Некоторые люди в вебе по причинам инерционности или корпоративных правил используют очень старые браузеры. Пока они не отомрут совсем, написание веб-страниц для них потребует мистических знаний об их недостатках и причудах. Эта книга не про причуды – она представляет современный, разумный стиль веб-программирования.

<title>¶

Тег <title> (от англ. title — заголовок) определяет заголовок документа.

Элемент <title> не является частью документа и не показывается напрямую на веб-странице. Текст заголовка отображается, как правило, на вкладке браузера. Допускается использовать только один <title> на документ и размещать его в контейнере <head> .

Синтаксис¶

Закрывающий тег обязателен.

Атрибуты¶

Спецификации¶

Описание и примеры¶

Примечание¶

Элемент <title> выполняет множество задач, как прямо, так и косвенно. Ниже описано какую роль выполняет заголовок страницы.

Оптимизация для новичков: HTML-теги и атрибуты в SEO

Первый этап продвижения сайта — его внутренняя оптимизация, важнейшей составляющей которой считается работа с кодом. Поэтому каждый SEO-специалист должен знать основные теги и атрибуты языка HTML, уметь оптимизировать их.

Не все понимают, на чем нужно сфокусировать свое внимание в первую очередь и как правильно использовать тот или иной элемент. В этом посте мы расскажем о тегах и атрибутах, о которых важно помнить начинающему SEO-специалисту.

Теги и атрибуты как составные части языка HTML

Теги и атрибуты составляют основу HTML — языка гипертекстовой разметки. Последовательность тегов и их атрибутов задает структуру документа. Интерпретируя язык разметки, браузер «понимает», о чем страница и как должен отображаться ее контент (текст, картинки, видео).

Теги задают каркас страницы, атрибуты расширяют или модифицируют действия тегов. Они описываются внутри открывающего тега в виде коллекции «имя=»значение»». Например: <meta name=»description»>.

Существует два типа тегов: парные и одиночные. Парные (или контейнерные) теги состоят из пары — открывающий и закрывающий тег <. >. </. >. Одиночные теги состоят лишь из одного открывающего тега. Например, тег <img>.

Стандартно структура HTML-документа содержит такие элементы:

<!DOCTYPE> указывает на тип текущего документа. В нашем случае HTML;
тег <html> отмечает границы документа, в нем содержатся обязательные теги <head> и <body>;
тег <head> — контейнер, в него помещается информация для браузеров и поисковых систем. Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title>, с помощью которого устанавливают заголовок вкладки браузера;
тег <body> определяет видимую часть документа, которая отображается в окне браузера. К такой информации относится текст, изображения, результат работы скриптов и другое.

Сперва рассмотрим набор тегов, помещающихся в блоке <head>. Они наиболее значимы для специалиста по поисковой оптимизации.

Что такое тег <title>

Тег <title> один из важнейших в поисковом продвижении, отвечает за наименование документа. Текст в этом теге — заголовок страницы в результатах поисковой выдачи, окна браузера и ссылки в закладках. <title> помогает понять пользователям и поисковым роботам, о чем данная страница. Он влияет на ранжирование документа в поисковой выдаче.

Пример кода:

Где пользователь может увидеть ваш <title>:

Title for example

Title for example #1

Title for example #2.png

Зачем нужны метатеги

Помимо тега <title>, в <head> располагаются теги типа <meta>, которые предназначены для браузеров и поисковых систем. Корректное использование метатегов позволяет увеличить привлекательность сниппетов, управлять индексацией страниц. Также позволяет правильно отображать страницы сайта пользователям. Далее рассмотрим метатеги: description, robots, charset, viewport и keywords.

Meta description

Текст метатега description — это краткое описание контента страницы. Информация из этого тега напрямую не влияет на ранжирование страницы. При этом большинство поисковых систем использует содержимое метатега description при образовании сниппета. Цепляющий description, который к тому же отвечает на запрос пользователя, поможет привлечь человека на ваш сайт.

Пример кода:

Так выглядит description

Meta robots

Метатег robots служит для указания правил индексирования конкретных страниц сайта и позволяет следовать по гиперссылкам с данных страниц.

Пример кода:

Значение атрибута «name» указывает, что директива актуальна для всех роботов. Вы также можете закрыть доступ только одному из них. Для этого в атрибуте «name» следует указать нужного робота, например, основного робота Google — «googlebot» или Яндекса — «yandex».

Основные значения атрибута content:

index — страница доступна для индексации;
noindex — запрет добавления страницы в индекс;
follow — ссылки на странице доступны к индексации и открыты для передачи ссылочного веса;
nofollow — сигнализирует роботу о том, что переходить по ссылкам и передавать ссылочный вес запрещено;
all — инструкция, аналогичная «index, follow», противоположная настройка: «none».

Наличие метатега robots в коде сайта не обязательно. Если meta robots отсутствует, страница открыта для индексации и переходить по ссылкам разрешено.

Meta charset

Метатег с атрибутом «charset» указывает на тип кодировки документа. Он применяется для правильного отображения текста страницы браузером. Для операционной системы Windows и кириллицы используют значения атрибута «utf-8» или «windows-1251». Этот метатег следует размещать в самом начале блока <head> до элементов, которые содержат текст, включая тег <title>.

Пример кода:

Многие браузеры научились распознавать кодировку документа автоматически, но все же рекомендуется прописать короткую строку, чтобы избежать возможных проблем с выводом информации на странице.

Meta viewport

Метатег «viewport» сообщает браузеру, как следует обрабатывать размеры страницы, изменять ее масштаб под ширину экрана устройства, с которого выполнен переход. Meta viewport — один из пунктов внедрения адаптивного дизайна, когда для всех устройств используется один код с корректировкой по размеру экрана. Для корректного отображения контента сайта на любом устройстве, на всех страницах следует разместить следующий фрагмент кода:

Если этот элемент отсутствует, мобильные браузеры по умолчанию используют версию страниц для компьютера и пытаются оптимизировать контент собственными силами, подгоняя содержимое под размер экрана. Из-за этого контент страницы может выглядеть непропорционально, и посетителям сайта придется выполнять лишние действия, чтобы прочитать описание товара, посмотреть картинку, видео. Поисковые системы считают такой сайт не адаптированным для мобильных устройств и будут понижать его в результатах поиска.

Meta keywords

Правильно составленный метатег keywords должен содержать 5-7 ключевых слов, описывающих основное содержание страницы. Раньше он сильно влиял на ранжирование по заданным в нем ключевым словам, но утратил значимость из-за действий недобросовестных вебмастеров и постоянного развития поисковых систем. Тем не менее, для метатега keywords еще не все потеряно. Так, в отчете «Яндекс и Google: факторы ранжирования в 2017 году» от «Ашманов и партнеры» представлен вывод о влиянии метатега на продвижение в Google.

Пример кода:

Когда использовать теги link

В блоке <head> также располагаются теги <link>, которые устанавливают связь данного документа с другими веб-страницами. Рассмотрим такие атрибуты тега «link»: «canonical», «next / prev», «alternate».

Атрибут canonical

Атрибут «rel=»canonical»» используют для решения вопросов с дублирующимся контентом: когда на сайте есть близкие или идентичные по содержанию страницы по разным url. Атрибут canonical указывает поисковым системам, какую из дублирующихся страниц индексировать и показывать в результатах поиска, при этом передавая ей ссылочный вес и другие характеристики дубликатов. Чтобы указать, какая из страниц каноническая, нужно в коде страницы-дубля разместить тег «link» с атрибутом «canonical», где в атрибуте «href» прописать адрес канонической страницы.

Пример кода:

Особенность canonical в том, что все дублирующиеся страницы остаются доступны для пользователей. Поэтому каноникализацию рекомендуется применять для страниц, которые нужны на сайте, но по определенным причинам являются дубликатами.

Атрибут alternate

Атрибут «rel=»alternate»» используется, чтобы указывать альтернативные версии страниц сайта, например, указывает на разные языковые версии или мобильную версию сайта. С его помощью поисковые системы определяют, какую версию страницы показывать тому или иному пользователю в результатах поиска.

Указать роботам на наличие нескольких языковых версий можно, разместив на всех страницах сайта фрагмент кода:

вместо «xx» указываем код языка (в формате ISO 639-1), «YY» — региона (ISO 3166-1 Alpha 2);
URL — абсолютный url альтернативной страницы.

Помните, что информация обо всех существующих версиях должна содержаться в коде каждой из них, то есть в коде каждой страницы должен содержаться собственный атрибут «rel=»alternate» hreflang=»xx-YY»», а также ссылки на все остальные версии.

Сообщить поисковым системам о мобильной версии сайта можно, используя атрибут «media». Как правило, версия для компьютеров размещается в домене www.example.com, а вариант сайта для мобильных устройств — в домене m.example.com.

Таким образом на обычной странице https://www.example.com/page-1 нужно добавить код:

На странице для мобильных устройств https://m.example.com/page-1 следует указать «canonical» на версию для компьютеров:

Оптимизация контента сайта

Видимый пользователю контент сайта помещается между тегами <body>. </body>. Уделяйте внимание его оптимизации. Контент с четкой структурой, разметкой легче воспринимается не только поисковыми роботами, но и пользователями, что улучшает поведенческие факторы.

Теги <div>, <span>, <table>

Теги <div>. </div> используют для создания каркаса страницы. <div> — это блочный элемент, предназначенный для управления содержимым определенных фрагментов документа, будь то текст, изображение, ссылка или другое. Особенность блочных тегов в том, что они начинаются с новой строки и занимают всю доступную ширину области, в которой размещены.

С помощью <div> можно задавать стили определенным объектам страницы. Аналогичным образом установить стили для определенной части информации на странице позволяют теги <span>. </span>. Отличие от <div> состоит в том, что <span> — это строчный элемент, поэтому его следует использовать для фрагментов контента, размещенных горизонтально, тогда как <div> отображает элементы друг за другом по вертикали.

Задать фрагменту документа стили можно двумя способами:

использовать внешние таблицы стилей, подключенные с помощью тега <link>:

Нужный фрагмент текста связывается с определенным стилем посредством атрибутов «class» или «id».

использовать атрибут «style», который применяется непосредственно в HTML-коде с указанием правил CSS, например:

Задавать стили с помощью атрибута следует в единичных случаях. Массовое добавление атрибута «style» к тегам лишь неоправданно увеличит размер кода и скорость его загрузки.

Элемент <table> служит для создания таблиц и является контейнером для элементов, которые определяют содержимое таблицы.

Прямого отношения к поисковой оптимизации перечисленные выше теги не имеют, но ошибки в разметке контента могут повлиять на валидность кода, то есть — соответствие структуры кода стандартам. Некорректная верстка исказит отображение страницы в браузере и может привести к неправильной интерпретации ее содержимого поисковыми системами. А это уже серьезная проблема для SEO-специалиста.

Заголовки H1 — H6

Существует множество тегов для оформления текстового контента сайта. Наиболее важные из них — теги заголовков «Н1 — Н6», и особенно — главный заголовок страницы — «Н1». Наряду с <title> значение этого тега сообщает пользователям и поисковым роботам о содержании конкретной страницы сайта. Также теги заголовков зачастую содержат основные тезисы текста, бегло просмотрев их, пользователь понимает, будет он читать текст целиком или нет.

Пример кода:

Внедряя заголовки, важно соблюдать их иерархию: после заголовка «Н1» должен следовать «Н2», если «H2» отсутствует, то «H3» и так далее.

Тег параграфа

Чтобы разделить текст на параграфы, нужно использовать теги <p>. </p>. Будьте предельно внимательны к первому абзацу, который иногда выводится в сниппет страницы в поисковой выдаче. Он должен мотивировать пользователя прочитать текст полностью и содержать ключевые слова.

Оформление списков

Поисковые системы положительно относятся к маркированным и нумерованным спискам в контенте страницы. Они помогают представить информацию в краткой и структурированной форме.

Для формирования списков используют теги:

<ul>. </ul> — для создания маркированного списка;
<ol>. </ol> — обрамляют нумерованные списки;.
<li>. </li> — определяют элементы списка в маркированных и нумерованных списках.

Пример кода:

Теги акцентирования

Наиболее важные мысли в тексте можно выделять тегами <strong>. </strong> и <em>. </em>, которые отображают заключенный в них текст жирным начертанием и курсивом соответственно.

Аналогичного визуального эффекта можно добиться с помощью тегов <b>. </b> (жирный) и <i>. </i> (курсив).

Теги <i> и <b> — теги физической разметки и просто устанавливают начертание текста, в то время как <em> и <strong> — теги логической разметки и подчеркивают важность размеченного ими текста.

В любом случае увлекаться использованием этих тегов, а тем более выделять ими каждое второе ключевое слово, не рекомендуется — такой текст будет неудобно читать пользователям, а поисковые системы воспримут его как спам.

Оформление ссылок

Для создания ссылок используют тег <a>. Подробнее: в атрибуте «href» указываем адрес страницы, на которую происходит переход. Между тегами <a>. </a> прописываем кликабельную часть текста, при нажатии на которую будет осуществляться переход на другую страницу. Согласно рекомендациям поисковых систем, текст ссылки должен отличаться от остального контента страницы и быть заметным пользователю.

На странице сайта могут быть обнаружены нежелательные ссылки, когда вебмастер не может поручиться за качество документов, на которые ведет ссылка (например, она размещена в комментарии пользователя). Такие ссылки можно закрывать атрибутом «rel=»nofollow»», который укажет роботам, что конкретно по этой ссылке следовать и передавать указанной странице вес не нужно.

Пример кода:

Существует также возможность запретить индексирование размещенной на странице ссылки или другого фрагмента текста. Для этих целей Яндексом был разработан тег <noindex>. </noindex>. К сожалению, он не работает для Google.

Пример кода:

Тег <img>

Тег <img> добавляет изображение в HTML-документ. Обязательный атрибут — «src=»https://netpeak.net/ru/blog/optimizatsiya-dlya-novichkov-html-tegi-i-atributy-v-seo/URL»» определяет имя и местоположение файла изображения. При необходимости, картинку можно оформить ссылкой на другой файл. Для этого нужно поместить тег <img> в контейнер <a>.

С точки зрения SEO обязательны атрибуты картинок «alt» и «title».

Атрибут «title» — подсказка пользователю: когда он наводит курсор на изображение и видит описание того, что на картинке. Для поисковых систем это скорее вспомогательный тег, но в него все же стоит добавить ключевое слово.

Атрибут «alt» — это альтернативное текстовое описание изображения, которое выводится пользователю, если картинка не может быть загружена. Также содержимое тега «alt» помогает системам поиска картинок проиндексировать изображения с вашего сайта. Текст именно этого тега учитывается в поиске по картинкам, поэтому в него нужно добавлять ключевые слова.

Пример кода:

Также для картинок нужно указывать атрибут «width» (ширина) или «height» (высота). Лучше задать что-то одно, браузер автоматически подстроит второй параметр, чтобы пропорции не были искажены.

Рекомендуется задавать реальные размеры изображений. Если вы хотите разместить на странице небольшую картинку, просто уменьшите ее реальный размер в любом графическом редакторе. Тем самым вы уменьшите ее вес, что даст плюс к скорости загрузки.

Тег <script>

Тег <script>. </script> предназначен для подключения скриптов в HTML-документ. Есть два способа добавить код на страницу:

подключить внешний файл с кодом, разместив в теге <script> путь к файлу скрипта с помощью атрибута src:

разместить непосредственно сам код в теге <script>.

Предпочтительнее подход, при котором скрипты выносятся во внешний подключаемый файл. Этот метод позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, потому что внешний файл кэшируется браузером при первой загрузке, и в последующем браузер берет его из своего кэша.

Ускорить загрузку страниц помогут также атрибуты «defer» и «async» тега <script>. Браузер загружает и отображает веб-страницы постепенно, то есть одновременно читает и отображает уже обработанный HTML-код. Обнаружив скрипт, браузер сначала загружает и выполняет его, и лишь потом продолжает обработку оставшейся части страницы.

Решить эту проблему поможет использование атрибутов «async» или «defer». Они позволяют загружать скрипты асинхронно: браузер не ждет загрузки и отработки скрипта, а продолжает обрабатывать HTML-код.

«defer», в отличие от «async», сохраняет относительную последовательность загрузки скриптов на странице, поэтому скрипты будут загружаться в порядке их размещения в коде. Кроме того, они начнут загружаться лишь после полной загрузки HTML.

«Async» следует применять для скриптов, от которых не зависит отображение других элементов страницы, например, для подключения кодов аналитики. Defer — элементов, для которых не обязательна мгновенная загрузка.

Существует также тег <noscript>, содержащийся в нем текст будет выводиться пользователю, когда его браузер не поддерживает работу со скриптами или их поддержка отключена вручную.

В заключение отметим: нельзя сказать, что тот или иной элемент HTML-кода важнее других. Каждый тег и атрибут выполняют свою функцию, и неправильное использование любого из них может привести к печальным последствиям. Главное — понять, когда, как и зачем их нужно внедрять. И делать контент, в первую очередь для людей, а не для поисковых роботов.

Выводы

Теги и атрибуты — это основа языка HTML. Оптимизация сайта немыслима без базового знания языка гипертекстовой разметки.
Основной фронт работ SEO-специалиста связан с оптимизацией тегов из блока <head> HTML-документа, ведь именно там располагается информация для браузеров и поисковых систем. В контейнере <head> помещаются тег <title>, метатеги, теги <link>. В них содержится информация о документе, помогающая поисковым системам понять о чем страница и как следует ее интерпретировать.
Не менее важна оптимизация тегов и атрибутов, расположенных в <body>, поскольку информацию именно из этого блока видят на странице пользователи. Контент должен быть структурирован, а код валидным, что служит залогом правильного отображения сайта в любом браузере.
Нельзя сказать, что тот или иной элемент HTML-кода важнее других. Каждый тег и атрибут выполняют свою функцию и неправильное применение любого их них может привести к печальным последствиям. Главное — понять, как и зачем их нужно использовать. И делать контент в первую очередь для людей, а не для поисковых роботов.

Начала карьеру в Netpeak в 2016 году. Специалист отдела по работе с крупными проектами.