[Разработка веб-сайтов, HTML, Поисковая оптимизация] SEO-friendly HTML для верстальщика
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
В этой статье не будет подробного разбора всех аспектов SEO-friendly сайта. Я собрал здесь лишь тот объем информации, с которым мне необходимо было познакомиться для решения SEO-задач в компании.В компанию ВсеИнструменты я попал больше года назад. До того момента мне еще не приходилось так тесно заниматься задачами поисковой оптимизации, а возраст и размер проекта лишь прибавляли волнения при решении seo задач. Так или иначе тот период прошел, и я не испортил своими правками уровень сайта в выдаче, благо мне помогали коллеги из SEO-подразделения.
Наш сайт, без преувеличения, состоит из огромной кодовой базы, и каждый день мы планомерно улучшаем его, добавляя новые фичи и исправляя существующие баги. Еще в начале своего пути я получил несколько крупных задач по улучшению текущей верстки проекта с использованием validator.w3.org. После окончания работ над этими задачами у меня возникла мысль собрать некоторую информацию по написанию валидной и SEO-пригодной верстки в одну небольшую статью с указанием ссылок на дополнительную и более подробную информацию.Вы познакомитесь с несколькими важными областями валидной SEO-верстки и найдете примеры работы с validators.w3.org. Дополнительные материалы, указанные ниже, будут весьма полезны в повседневной работе верстальщика.Семантические тегиСемантическая верстка - это html элементы со смыслом понятные разработчику, браузеру и поисковым роботам. К таким относят: header, footer, main, article, section, nav, aside и тд. Использование перечисленных тегов описывается по спецификациям W3C или WHATWG. Короткую вводную можно получить в цикле видео\статей “HTML шорты” от Вадима Макеева. Приведу описание к нескольким тегам.
Section - определяет раздел в документе. В соответствии со спецификацией W3C по HTML5: "Раздел — это тематически сгруппированный контент, как правило с заголовком."
Article - определяет независимый, самодостаточный контент. Контент, помещенный в этот элемент, должен иметь смысл сам по себе, т. е. он должен быть понятен в отрыве от остальных частей веб-сайта.
Подробнее о article, а так же section написано здесь.
Header - предназначен для определения заголовочного блока или "шапки" документа или раздела. Подробнее здесь.
Footer - предназначен для определения "подвала" документа или раздела.
Nav - Предназначен только для основного блока навигационных ссылок.
Aside - определяет некий контент, находящийся в стороне от контента, внутри которого он расположен (как боковой блок страницы, "сайдбар").
В целом, тема доступности сайтов довольно обширна. Со всеми нюансами предлагаю ознакомиться в этой статье и еще советую пройтись по всей серии “HTML шорты”. Еще могу посоветовать ресурс Веб стандарты, некоторые статьи писали авторы спецификации HTML5 (переводы на русский). И для понимания, можно ознакомиться с контентной моделью HTML.Микроразметка Schema.orgЧаще всего инструкции по включению микроразметки в HTML-код вы будете получать от SEO-специалистов. Но для понимания немного осветим эту тему.Schema.org - стандарт семантической разметки данных, который помогает поисковикам лучше понимать данные, представленные на сайте. Например, с помощью разметки можно явно указать поисковым роботам, что на странице site.ru/product_page1 находится товар, и передать основные параметры: название, цену, артикул, производителя и т.д. На основе этих данных поисковики формируют расширенные сниппеты в поисковой выдаче.Сайты с разметкой отличаются от остальных тем, что в поисковой выдаче их сниппеты более информативны и привлекательны. Они включают в себя больше полезного контента для пользователя. Если конкурент окажется в выдаче выше, но, допустим, у него не будет микроразметки либо там будут реализованы не все фичи, наш сниппет может оказаться больше и привлекательнее. Впоследствии это может выразиться в большем количестве переходов и, соответственно, повышении поведенческих факторов, что в итоге поднимет позиции в выдаче.Подробно о микроразметке написано в вики Яндекса. Документация Schema.org. Так же стоит обратить внимание и на гайд от Google.Как проверить свой HTMLТак как один из критериев к SEO - это валидная верстка, необходимо прогонять написанный код через ранее упомянутый валидатор. К слову, помимо него есть валидатор от Google - в нем необходимо следить за выбранным роботом (Компьютер/Смартфон) и инструмент от Яндекса. Эти инструменты помогут Вам в задачах связанных с микроразметкой. Следует сравнивать новый и старый код, удостовериться, что ошибок нет и все существующие ранее сущности правильно считываются.В целом, работа с ними сводится к тому, чтобы скопировать HTML код из браузера и вставить его в соответствующее текстовое поле валидатора. Можно копировать куски кода сразу из вашего IDE, но это должен быть чистый HTML с готовыми данными. После прохождения проверки вы будете получать уведомления о различных ошибках в коде. Warning можно опустить. Но от всех Error необходимо избавиться, чтобы верстка удовлетворяла принципам валидной HTML-страницы. В процессе работы могут возникнуть нерешаемые проблемы. Такое стоит гуглить и принимать во внимание, что валидаторы могут не поспевать за всеми нововведениями.Перейдем к нескольким конкретным примерам (не)валидной верстки и их проверке с validator.w3.org.СпискиК спискам относятся теги ul и ol (маркированные и нумерованные соответственно).
Выглядит это так:
<ul>
<li>item 1</li>
</ul>
<!-- или -->
<ol>
<li>item 1</li>
</ol>
Внутри открывающего и закрывающего тегов ul могут стоять только элементы li, а уже внутри самих этих элементов (пунктов) можно вставлять любой контент (текст, картинки, заголовки, абзацы, ссылки и даже другие списки). То есть, <ul><div></div></ul> является не валидной версией, и https://validator.w3.org/nu/ явно об этом напишет в выводе ошибок (Рис 1).
Рис 1. Ошибка спискаСсылкиВ использовании тега <a> тоже есть нюанс, в href недопустимы пробелы. То есть, <a href="tel:+7 (967) 321-22-33">phone</a> не является валидным вариантом (Рис. 2), однако <a href="tel:+7(967)321-22-33">phone</a> соответствует всем критериям.
Рис 2. Ошибка ссылкиАтрибутыУ каждого html тега есть свой набор валидных атрибутов. Часть из них можно увидеть здесь, остальное можно найти тут.
При использовании атрибутов необходимо помнить, что существуют устаревшие.ТаблицыЧасто приходится немного корректировать базовые стили таблицы. Раньше такое реализовывалось через соответствующие атрибуты.
<table border="1" cellpadding="0" cellspacing="0" width="400"></table>
На данный код мы получим сразу 4 ошибки об устаревших атрибутах (Рис. 3).
Рис 3. Устаревшие атрибуты таблицыЭто можно спокойно переписать с использованием стилей и классов.
- border - http://htmlbook.ru/html/table/border
- cellpadding - http://htmlbook.ru/html/table/cellpadding
- cellspacing - http://htmlbook.ru/html/table/cellspacing
- width - http://htmlbook.ru/html/table/width
Резюмируя вышеописанное получим примерно такой код:
<style>
.table {
border-collapse: collapse;
width: 400px;
border-spacing: 0;
}
.column {
padding: 0;
border: 1px solid #333;
}
</style>
<table class=”table”>
<tr>
<td class=”column”></td>
</tr>
</table>
Подобное решение относится ко всем атрибутам, влияющим на стили элементов. Но есть такие, которые относятся к логике DOM-элементов. Чаще их реализация полностью падает на браузеры. Остальное можно реализовать с помощью JavaScript.Атрибут idЭтот атрибут является неотъемлемой частью HTML. На нем часто завязаны стили и клиентский JavaScript. Данный подход уже давно не используется ввиду усложнения поддержки написанного кода. Используя id в браузере, часто можно наткнуться на проблему отсутствия уникальности значений этого свойства. Поэтому чаще всего чистый id заменяют на data-id или более специфичные названия. У нас часто используются data-атрибуты – data-behavior и data-selector. Первый подходит для взаимодействия с пользователем, второй чаще используется для манипуляций с DOM. Однако, насколько я знаю, это необязательное правило. Помимо этого, в css можно писать код с обращением в любые из свойств элементов, будь то data-* или любой другой атрибут.Пример микроразметкиПомимо примеров валидной верстки хотелось бы привести небольшой кейс использования микроразметки Schema.org. Используя микроразметку, желательно размечать верстку, которая видна на странице и никоем образом не скрывается от пользователя при помощи opacity, visibility, display или top/left/right/bottom: -100500px. Поисковики не жалуют скрытый контент. Иногда бывают исключения, но их стоит уточнять у SEO специалистов.
Перед тем, как мы продолжим хотелось бы описать значение используемых атрибутов:
Itemscope - задает область действия словаря в структуре данных. Как правило, работает совместно с атрибутом itemtype и задаёт пределы, где itemtype будет активен. У этого атрибута нет значений.
Itemtype - указывает адрес словаря, который будет применяться для определения свойств элемента в структуре данных. Яндекс и Google поддерживают стандарт разметки Schema.org. Соответственно, в качестве значения itemtype указывается адрес словаря на этом сайте. К примеру, для разметки организаций используется значение https://schema.org/Organization.
Itemprop - используется для добавления свойств словаря микроданных к элементу. Имя свойства определяется значением itemprop, а значение свойства определяется содержимым HTML-элемента, к примеру, текстом который располагается внутри элемента.
Приведем пример микроразметки Article.
<div itemscope="" itemtype="https://schema.org/Article">
<...>
<div class="article-meta">
<div
itemprop="author"
itemscope=""
itemtype="https://schema.org/Person"
>
<span
itemprop="name"
class="meta-item"
>
ВсеИнструменты.ру
</span>
</div>
<time
itemprop="datePublished"
class="datetime meta-item"
datetime="{{ article.getUpdatedTimeObj().format('Y-m-d') }}"
>
{{ article.getUpdatedTimeObj().format('d.m.Y') }}
</time>
</div>
<meta
itemprop="description"
content="{{ article.getShemaOrgDescription() }}"
/>
<div
itemscope
itemprop="image"
itemtype="http://schema.org/ImageObject"
>
<img
itemprop="url"
src="{{ article.getShemaOrgImageUrl() }}"
alt=""
class="d-none"
>
</div>
<...>
</div>
В данном примере представлена микроразметка статьи. Действие микроразметки ограничено дивом с атрибутами itemscope, itemtype = Article. Внутри включает микроразметку автора статьи и дату публикации. Включает в себя также краткое описание статьи и изображение. В данном кейсе при помощи бэкенда на этапе публикации парсится весь список изображений и выдается фронтенду при помощи метода getShemaOrgImageUrl().Я не хотел бы сильно погружаться в детальные гайды по микроразметке, поэтому просто укажу несколько полезных статей на эту тему.
1. Микроразметка для сайта интернет-магазина: как настроить разметку Schema.org для товаров и категорий
2. Микроразметка товаровИтогХотелось бы, чтобы этот материал был вам полезен. Я старался предоставить информацию для работы с SEO-версткой максимально сжато. Надеюсь, я смог достичь этой цели. Данной информации не хватит для формирования по-настоящему SEO-friendly сайта, поэтому я рекомендую использовать дополнительные материалы при разработке своих страниц. Эта тема сложна и обширна. Для плодотворного продвижения и удержания позиций сайта в поисковой выдаче необходимо работать в паре с SEO-специалистом и постоянно вести работы над улучшениями своих продуктов. Спасибо за уделенное время!
===========
Источник:
habr.com
===========
Похожие новости:
- [Разработка веб-сайтов, Open source, Управление персоналом, Подготовка технической документации] Mozilla пытается переложить на сообщество поддержку проекта MDN после массового увольнения сотрудников
- [Разработка веб-сайтов, JavaScript, Программирование, ReactJS] Почему Context — это не инструмент «управления состоянием» (перевод)
- [Разработка веб-сайтов, JavaScript, Программирование] Углублённое руководство по JavaScript: генераторы. Часть 1, основы (перевод)
- [Разработка веб-сайтов, Open source, Angular, TypeScript] Паттерн порталов в Angular: для чего нужен root-компонент в Taiga UI
- [Разработка веб-сайтов, Программирование, Учебный процесс в IT, DevOps] Анонс интенсива «Docker для разработчиков»
- [Разработка веб-сайтов, JavaScript] Поговорим об инструментах для создания клиентских веб-приложений с использованием традиционных языков программирования
- [Usability, Accessibility, WebAssembly] Большой отчёт об изменениях в веб-доступности (перевод)
- [CMS, Разработка веб-сайтов, Usability, Веб-аналитика, Интернет-маркетинг] 26 шагов SEO-настройки для нового сайта: что учесть, чтобы не переделывать
- [Разработка веб-сайтов, JavaScript, Программирование, Алгоритмы, Читальный зал] Библиотека Frontend-разработчика, часть 4: Алгоритмы
- [Веб-дизайн, Разработка веб-сайтов, Тестирование веб-сервисов, Веб-аналитика, Монетизация веб-сервисов] Revealed: 7 Top Web Development Companies & Trends for 2021
Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_html, #_poiskovaja_optimizatsija (Поисковая оптимизация), #_seo, #_seooptimizatsija (seo-оптимизация), #_seo_toolkit, #_htmlverstka (html-верстка), #_html, #_vebsajt (веб-сайт), #_verstka (верстка), #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_html, #_poiskovaja_optimizatsija (
Поисковая оптимизация
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 10:36
Часовой пояс: UTC + 5
Автор | Сообщение |
---|---|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
В этой статье не будет подробного разбора всех аспектов SEO-friendly сайта. Я собрал здесь лишь тот объем информации, с которым мне необходимо было познакомиться для решения SEO-задач в компании.В компанию ВсеИнструменты я попал больше года назад. До того момента мне еще не приходилось так тесно заниматься задачами поисковой оптимизации, а возраст и размер проекта лишь прибавляли волнения при решении seo задач. Так или иначе тот период прошел, и я не испортил своими правками уровень сайта в выдаче, благо мне помогали коллеги из SEO-подразделения. Наш сайт, без преувеличения, состоит из огромной кодовой базы, и каждый день мы планомерно улучшаем его, добавляя новые фичи и исправляя существующие баги. Еще в начале своего пути я получил несколько крупных задач по улучшению текущей верстки проекта с использованием validator.w3.org. После окончания работ над этими задачами у меня возникла мысль собрать некоторую информацию по написанию валидной и SEO-пригодной верстки в одну небольшую статью с указанием ссылок на дополнительную и более подробную информацию.Вы познакомитесь с несколькими важными областями валидной SEO-верстки и найдете примеры работы с validators.w3.org. Дополнительные материалы, указанные ниже, будут весьма полезны в повседневной работе верстальщика.Семантические тегиСемантическая верстка - это html элементы со смыслом понятные разработчику, браузеру и поисковым роботам. К таким относят: header, footer, main, article, section, nav, aside и тд. Использование перечисленных тегов описывается по спецификациям W3C или WHATWG. Короткую вводную можно получить в цикле видео\статей “HTML шорты” от Вадима Макеева. Приведу описание к нескольким тегам. Section - определяет раздел в документе. В соответствии со спецификацией W3C по HTML5: "Раздел — это тематически сгруппированный контент, как правило с заголовком." Article - определяет независимый, самодостаточный контент. Контент, помещенный в этот элемент, должен иметь смысл сам по себе, т. е. он должен быть понятен в отрыве от остальных частей веб-сайта. Подробнее о article, а так же section написано здесь. Header - предназначен для определения заголовочного блока или "шапки" документа или раздела. Подробнее здесь. Footer - предназначен для определения "подвала" документа или раздела. Nav - Предназначен только для основного блока навигационных ссылок. Aside - определяет некий контент, находящийся в стороне от контента, внутри которого он расположен (как боковой блок страницы, "сайдбар"). В целом, тема доступности сайтов довольно обширна. Со всеми нюансами предлагаю ознакомиться в этой статье и еще советую пройтись по всей серии “HTML шорты”. Еще могу посоветовать ресурс Веб стандарты, некоторые статьи писали авторы спецификации HTML5 (переводы на русский). И для понимания, можно ознакомиться с контентной моделью HTML.Микроразметка Schema.orgЧаще всего инструкции по включению микроразметки в HTML-код вы будете получать от SEO-специалистов. Но для понимания немного осветим эту тему.Schema.org - стандарт семантической разметки данных, который помогает поисковикам лучше понимать данные, представленные на сайте. Например, с помощью разметки можно явно указать поисковым роботам, что на странице site.ru/product_page1 находится товар, и передать основные параметры: название, цену, артикул, производителя и т.д. На основе этих данных поисковики формируют расширенные сниппеты в поисковой выдаче.Сайты с разметкой отличаются от остальных тем, что в поисковой выдаче их сниппеты более информативны и привлекательны. Они включают в себя больше полезного контента для пользователя. Если конкурент окажется в выдаче выше, но, допустим, у него не будет микроразметки либо там будут реализованы не все фичи, наш сниппет может оказаться больше и привлекательнее. Впоследствии это может выразиться в большем количестве переходов и, соответственно, повышении поведенческих факторов, что в итоге поднимет позиции в выдаче.Подробно о микроразметке написано в вики Яндекса. Документация Schema.org. Так же стоит обратить внимание и на гайд от Google.Как проверить свой HTMLТак как один из критериев к SEO - это валидная верстка, необходимо прогонять написанный код через ранее упомянутый валидатор. К слову, помимо него есть валидатор от Google - в нем необходимо следить за выбранным роботом (Компьютер/Смартфон) и инструмент от Яндекса. Эти инструменты помогут Вам в задачах связанных с микроразметкой. Следует сравнивать новый и старый код, удостовериться, что ошибок нет и все существующие ранее сущности правильно считываются.В целом, работа с ними сводится к тому, чтобы скопировать HTML код из браузера и вставить его в соответствующее текстовое поле валидатора. Можно копировать куски кода сразу из вашего IDE, но это должен быть чистый HTML с готовыми данными. После прохождения проверки вы будете получать уведомления о различных ошибках в коде. Warning можно опустить. Но от всех Error необходимо избавиться, чтобы верстка удовлетворяла принципам валидной HTML-страницы. В процессе работы могут возникнуть нерешаемые проблемы. Такое стоит гуглить и принимать во внимание, что валидаторы могут не поспевать за всеми нововведениями.Перейдем к нескольким конкретным примерам (не)валидной верстки и их проверке с validator.w3.org.СпискиК спискам относятся теги ul и ol (маркированные и нумерованные соответственно). Выглядит это так: <ul>
<li>item 1</li> </ul> <!-- или --> <ol> <li>item 1</li> </ol> Рис 1. Ошибка спискаСсылкиВ использовании тега <a> тоже есть нюанс, в href недопустимы пробелы. То есть, <a href="tel:+7 (967) 321-22-33">phone</a> не является валидным вариантом (Рис. 2), однако <a href="tel:+7(967)321-22-33">phone</a> соответствует всем критериям. Рис 2. Ошибка ссылкиАтрибутыУ каждого html тега есть свой набор валидных атрибутов. Часть из них можно увидеть здесь, остальное можно найти тут. При использовании атрибутов необходимо помнить, что существуют устаревшие.ТаблицыЧасто приходится немного корректировать базовые стили таблицы. Раньше такое реализовывалось через соответствующие атрибуты. <table border="1" cellpadding="0" cellspacing="0" width="400"></table>
Рис 3. Устаревшие атрибуты таблицыЭто можно спокойно переписать с использованием стилей и классов.
<style>
.table { border-collapse: collapse; width: 400px; border-spacing: 0; } .column { padding: 0; border: 1px solid #333; } </style> <table class=”table”> <tr> <td class=”column”></td> </tr> </table> Перед тем, как мы продолжим хотелось бы описать значение используемых атрибутов: Itemscope - задает область действия словаря в структуре данных. Как правило, работает совместно с атрибутом itemtype и задаёт пределы, где itemtype будет активен. У этого атрибута нет значений. Itemtype - указывает адрес словаря, который будет применяться для определения свойств элемента в структуре данных. Яндекс и Google поддерживают стандарт разметки Schema.org. Соответственно, в качестве значения itemtype указывается адрес словаря на этом сайте. К примеру, для разметки организаций используется значение https://schema.org/Organization. Itemprop - используется для добавления свойств словаря микроданных к элементу. Имя свойства определяется значением itemprop, а значение свойства определяется содержимым HTML-элемента, к примеру, текстом который располагается внутри элемента. Приведем пример микроразметки Article. <div itemscope="" itemtype="https://schema.org/Article">
<...> <div class="article-meta"> <div itemprop="author" itemscope="" itemtype="https://schema.org/Person" > <span itemprop="name" class="meta-item" > ВсеИнструменты.ру </span> </div> <time itemprop="datePublished" class="datetime meta-item" datetime="{{ article.getUpdatedTimeObj().format('Y-m-d') }}" > {{ article.getUpdatedTimeObj().format('d.m.Y') }} </time> </div> <meta itemprop="description" content="{{ article.getShemaOrgDescription() }}" /> <div itemscope itemprop="image" itemtype="http://schema.org/ImageObject" > <img itemprop="url" src="{{ article.getShemaOrgImageUrl() }}" alt="" class="d-none" > </div> <...> </div> 1. Микроразметка для сайта интернет-магазина: как настроить разметку Schema.org для товаров и категорий 2. Микроразметка товаровИтогХотелось бы, чтобы этот материал был вам полезен. Я старался предоставить информацию для работы с SEO-версткой максимально сжато. Надеюсь, я смог достичь этой цели. Данной информации не хватит для формирования по-настоящему SEO-friendly сайта, поэтому я рекомендую использовать дополнительные материалы при разработке своих страниц. Эта тема сложна и обширна. Для плодотворного продвижения и удержания позиций сайта в поисковой выдаче необходимо работать в паре с SEO-специалистом и постоянно вести работы над улучшениями своих продуктов. Спасибо за уделенное время! =========== Источник: habr.com =========== Похожие новости:
Разработка веб-сайтов ), #_html, #_poiskovaja_optimizatsija ( Поисковая оптимизация ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 10:36
Часовой пояс: UTC + 5