Урок 5 - SEO - Оптимизация структуры HTML

1. <Описание>
2. <Ключевые слова>
3. <h1> - <h6>
4. <a>
5. <Img>
6. HTML 5 теги
7. навигация

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

<Описание>

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

Google ищет как внутри статьи, так и в ее описании. Конечно, статья более актуальна для него, когда ключевые слова находятся в обоих местах. Иногда пользователи видят ярлыки на SERP. Иногда Google может взять ярлык из проекта Open Directory (dmoz.org), но в нашей стране это маловероятно.

<meta name = content => </ meta>

Обратите внимание на слова ноутбук, ультрабук, интернет-магазин, инвентарь, аксессуары, сумки для ноутбуков. Некоторые пользователи, как правило, печатают такие ярлыки:

<meta name = content => </ meta>

Не совсем

<Ключевые слова>

В прошлом поисковые системы использовали ключевые слова метатегов для перечисления ключевых слов, которые относятся к документу. Однако веб-мастера злоупотребили этим и, используя практику «подбора ключевых слов», вставляли слова, о которых документ не имел отношения. Google и List официально подтвердили, что они больше не используют ключевые слова. Таким образом, эти теги теперь игнорируются, и нам не нужно их заполнять.

<h1> - <h6>

Мы должны структурировать содержимое страницы в заголовки, просто потому, что ключевые слова поисковой системы гораздо важнее, чем те, которые находятся в тексте. Опять же, для пользователя есть преимущество - текст логически структурирован, гораздо более читабелен и хорошо ориентирован. На странице обычно есть один заголовок H1 (если только страница не разделена тегами HTML 5 на несколько статей, заголовок и т. Д.), А затем несколько заголовков более низкого уровня.

<h1> Lenovo ABC-123 Notebook </ h1> <p> Сверхтонкий ноутбук </ strong> - это больше, чем просто гаджет. Быстрый современный процессор <strong> Haswell </ strong> дополняет специализированную видеокарту <strong> NVIDIA </ strong>, обеспечивая бескомпромиссную производительность в компактном корпусе. Гладкое шасси имеет толщину всего 2,5 см, а легкий вес чуть более 2 кг не обременит вас. Множество интеллектуальных функций и функций безопасности, а также качественный звук, интеллектуальная сенсорная панель и <strong> клавиатура с подсветкой </ strong> - это еще одно доказательство универсальности. </ p> <h2> Параметры </ h2> <table> ... </ table> <h2> Отзывы пользователей </ h2> ...

Обратите внимание, что текст также структурирован в абзацы с использованием элементов <p>, и есть важные отрывки, выделенные тегом <strong>. Это приводит к тому, что текст выделяется жирным шрифтом, но самое главное, поисковая система понимает его как более важный и принимает ключевые слова. Никогда не выделяйте тегом <b> и даже не изменяйте стиль шрифта на жирный.

<a>

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

Мы уже писали о наших скидках <a href=> здесь </a>.

Поисковая система «здесь» мало что знает. Давайте посмотрим, как это сделать правильно:

Мы уже писали о <a href=> наших скидках </a>.

<Img>

Каждое изображение должно иметь атрибут alt (и только потому, что это требуется). Это альтернативный текст, который появляется, когда изображение не загружается. Он также используется голосовыми читателями, но это важно для нас, главным образом, из-за других ключевых слов, которые мы можем вставить в него. Они будут использоваться, по крайней мере, когда кто-то выполняет поиск с помощью Google Image Search, например. Мы можем вставить больше ключевых слов в изображение и его путь. Просто сравните следующие 2 примера:

<img src = />

и правильный вариант:

<img src = alt = />

HTML 5 теги

Мы можем упростить поисковым системам отделение макетов страниц от контента с помощью тегов HTML 5. В основном это <article>, <header>, <nav>, <section>, <footer> и <aside>. Таким образом, поисковые системы могут сосредоточиться на индексации контента и не имеют навигационного меню или боковой панели. Использование тегов показано на рисунке ниже или описано в Чешский HTML 5 руководство ,

навигация

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

Мы вставляем навигацию в список (HTML-тег ul) и затем обрезаем ее с помощью CSS. В идеале мы будем использовать тег HTML 5 <nav>.

<nav> <ul> <li> <a href=> Ноутбуки и ультрабуки </a> <li> <a href=> Планшеты </a> <li> <a href=> Отчеты ПК </a> <li > <a href=> Мобильные телефоны </a> <li> <a href=> Контакты и часы работы </a> </ ul> </ nav>

Если вы хотите, чтобы навигация была как-то анимирована, распакована и т. Д., Это в принципе не проблема. Условием является то, что HTML-код должен быть аналогичен коду на странице, и он будет преобразован, например, в интерактивную форму с использованием JavaScript. Google JavaScript не используется для индексации и будет отображать оригинальную версию.

Похожие

Комментарии