Веб-элементы, используемые правильно для SEO

Последнее обновление: 16 января 2019 г.

Большинство веб-страниц состоят из трех основных элементов: HTML, CSS и JavaScript. Эти строительные блоки составляют все веб-страницы, независимо от того, что они используют для их отображения. Каждый веб-элемент имеет свое место. Хотя могут быть некоторые совпадения, их целенаправленное использование помогает сделать страницу оптимизированной для SEO. Так как же следует использовать эти элементы и как ими можно злоупотребить?

Основные функции веб-элемента

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

Для стилизации следует использовать CSS. Если мы будем придерживаться иллюстрации дома, это будет цвет ваших стен, ваших шкафов, тип вашего пола и т. д. Цвета вашей страницы, размеры шрифта, фактический макет страницы также могут быть определены в CSS. Но подождите, разве макет не должен быть в HTML? Хороший вопрос. В то время как HTML должен размещать элементы, которые будут на вашей странице, CSS должен управлять тем, как эти элементы будут отображаться на этой странице. CSS отвечает за большую часть отзывчивости сети.

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

Зачем их разделять?

Итак, если вы можете использовать HTML и CSS как для макета, так и JavaScript и CSS для стилей, зачем их разделять? Когда Google индексирует вашу страницу, он ищет ключевые индикаторы того, о чем ваша страница и как она функционирует. Если вы используете один из элементов ненадлежащим образом, вы можете послать неверный сигнал и повредить своему рейтингу. Это может часто происходить при работе с редакторами CMS, которые стилизуют с использованием пресетов для элементов или запускают ненужный JavaScript, который замедляет работу страниц, чтобы выполнять действия, которые можно было бы выполнить с помощью CSS.

Итак, давайте рассмотрим некоторые распространенные злоупотребления.

Неправильное использование тегов заголовков

Одним из наиболее распространенных злоупотреблений является использование тегов заголовков для оформления веб-элементов. Теги заголовков определяют основные темы на странице, от самого важного тега H1 (должен быть на каждой странице) до H6. При использовании для стилизации элементов вы сообщаете Google, что эти слова — это то, о чем ваша страница. Или вы можете использовать неправильный тег заголовка (например, использовать h3 вместо h2, потому что вам больше нравится размер шрифта). В любом случае вы отправляете неправильное сообщение. Вместо этого вы должны использовать CSS для стилизации элементов до нужного размера или шрифта.

Двойные теги H1

Еще одна распространенная проблема — наличие 2 или более тегов H1 на странице. Ваш тег H1 должен быть основной идеей страницы; он должен сообщать всем (и каждому сканирующему роботу), который посещает страницу, о чем она, и поэтому у вас должен быть только один. Наличие двух тегов H1 похоже на отправку двух разных сигналов на страницу. Некоторые люди и даже профессиональные темы склонны размещать свой логотип в теге H1. Так что будьте начеку, чтобы убедиться, что на странице есть только один.

Все изображения являются фоновыми изображениями.

Нет ничего плохого в наличии фонового изображения. Изображения привлекают внимание и могут повысить ценность вашего сайта и заставить пользователей покупать товары или услуги. Но все ваши изображения не должны быть фоновыми изображениями. Недавно работая над сайтом, я обнаружил, что CMS превращает все изображения в фоновые изображения. Намерение здесь состоит в том, чтобы стилизовать и изменять их размер более легко. Хотя это может улучшить внешний вид, вы теряете жизненно важную часть преимущества изображений на вашей странице: альтернативный текст. Замещающий текст описывает, что находится на изображении, и используется программами чтения с экрана для определения того, что находится на изображении. Делая все ваши изображения фоновыми изображениями, вы уменьшаете доступность страницы, усложняя ее для людей с ограниченными возможностями, и можете получить удар от Google в своем рейтинге.

Рендеринг CSS с помощью JavaScript

Бесполезное обслуживание CSS через JavaScript увеличивает время загрузки страниц. Гораздо лучше связать файл CSS в заголовке, чем выполнять этот дополнительный шаг. Кроме того, использование JavaScript для простых анимаций или эффектов наведения увеличивает время загрузки, когда это можно сделать намного быстрее с помощью CSS. Даже добавление фреймворков JavaScript, когда они не нужны, может увеличить время загрузки. Например, загрузить jQuery для анимации кнопки. Вместо того, чтобы писать ванильный JavaScript или, что еще лучше, использовать элементы анимации в CSS или даже таблицу стилей анимации CSS, загружается намного быстрее.

Стилизация веб-элементов в HTML

Стилизация элементов непосредственно в HTML-файле — спорная тема. Многие темы и плагины в WordPress и других CMS постоянно полагаются на перезапись таблиц стилей и других плагинов. Обычно это считается плохой практикой. Некоторые создатели контента записывают стили непосредственно в свой контент, потому что хотят изменить стили своей темы. В чем проблема с этим? Часто возникают проблемы с CSS, когда стили, записанные непосредственно в HTML-элементы, перезаписывают стили в файле CSS. Чтобы избежать этого, вместо того, чтобы записывать его непосредственно в HTML, назначьте веб-элементам класс и добавьте новую таблицу стилей, в которую вы добавляете стили. Это поможет избежать проблем с конфликтующими листами, которые могут сломать или неправильно оформить ваш сайт.

Использование HTML для оформления макетов

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

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

Правильно отформатированная страница — это хорошо оптимизированная страница.

Содержание вашей страницы является огромным фактором в ранжировании. Так правильно использовать элементы веб-страницы. В частности, HTML, CSS и JavaScript играют не менее важную роль в SEO-оптимизации вашей страницы. Зная роль каждого веб-элемента и используя его соответствующим образом, вы можете повысить свой рейтинг. Просто создайте функциональную и привлекательную страницу. Если вы думаете о переключении тем для CMS или добавлении пользовательских CSS или JavaScript на свои страницы, взгляните еще раз и убедитесь, что вы правильно используете свои веб-элементы.