Продолжаем заботиться о семантике и (не) стреляем себе в ноги, соблюдая её
Мы много говорим о семантике (постоянно!), но давайте разберём ещё один кейс, где она важна: поисковые системы и социальные сети.
Запомните: в большинстве случаев оптимизация от сеошников это карго-культ — где-то услышали, что новый приёмчик кого-то вывел в топ Яндекса и Гугла и вот бегом нужно делать. Важна только семантика, чтобы поисковики и социалки спарсили (парсинг — разбор) ваш сайт.
Проверять семантику можно через валидатор W3C — он подскажет где вы облажались и что нужно исправить. Ну а мы поехали!
PS: Кстати, для Хрома посоветую расширение SEO META DATA in 1 CLICK. Название хуже всех, признаю, зато оно самое удобное.
Во-первых, у страницы должен быть чёткий <title, который обозначает контент страницы.
Во-вторых, meta description и meta keywords: первое даёт описание страницы (выводится в поисковиках и социалках), а второе описывает ключевые слова, по которым можно найти.
<meta name="description" content="Описание страницы сайта до 140 символов">
<meta name="keywords" content="ключевые, слова, страницы, через, запятую">На самом деле ключевые слова не так важны — в последнее время поисковики увлеклись искусственным интеллектом и machine learning, поэтому контент страницы анализируют самостоятельно.
В-третьих, <link rel="canonical">: если поисковик каким-то образом зайдёт на страницу по левому адресу (а они любят подбирать всё подряд), то каноникал поможет не задублировать страницы.
<link rel="canonical" href="https://erodionov.ru/verstka">В-четвертых, если у вас есть понимание, на какую страницу дальше пойдёт человек, используйте <link rel="prev"> и <link rel="next"> — например, если вы работаете с пагинацией.
<link rel="canonical" href="https://jqestate.ru/zagorodnaya/prodaja"/>
<link rel="next" href="https://jqestate.ru/zagorodnaya/prodaja?page=4"/>
<link rel="prev" href="https://jqestate.ru/zagorodnaya/prodaja?page=2"/>Для социальных сетей используется протокол Open Graph — он через мета-теги описывает страницу (нужно для карточек ссылок):
<meta property="og:type" content="website"/>
<meta property="og:locale" content="ru_RU"/>
<meta property="og:title" content="Курс по фронтэнду. Начинаем в январе."/>
<meta property="og:description" content="Бутиковый практический четырёхнедельный курс по фронтэнду. Сделай Airbnb и научись делать крутые интерфейсы."/>
<meta property="og:url" content="https://erodionov.ru/frontend"/>
<meta property="og:image" content="https://erodionov.ru/static/images/frontend-cover-new-year-fb.png"/>
<meta property="vk:image" content="https://erodionov.ru/static/images/frontend-cover-new-year-vk.png"/>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@evgenyrodionov">
<meta name="twitter:creator" content="@evgenyrodionov">С опенграфом много мороки, например:
- соцсети могут добавлять свой префикс (
vk:image,twitter:site) и параметр. К счастью, они спокойно считывают иog:, если не указана специфика через свой; - Твиттер не может читать
meta property, ему нуженmeta name(но если есть<meta property="og:..., то он прочитает).
Дебажить (то есть проверять) можно через инструменты соцсетей:
У ВК и Телеграма нет дебаггера, но можно сбросить кэш через
Окей, с <head> разобрались, дальше что? Дальше — сайтмап. Сайтмап (карта сайта) это тоже протокол, который скармливают поисковику, чтобы он знал какие страницы на сайте есть.
Сайтмап обычно бывает в файле sitemap.xml и выглядит как у JQ Estate: https://jqestate.ru/sitemap.xml.
Как поисковик поймёт, что сайтмап лежит по этому адресу? Можно ли указать другой? Можно ли запретить индексировать какие-то страницы? Да, для этого используется протоко… шучу, обычный файл robots.txt. Его формат описан на сайте robotstxt.org.
Тем временем мы продолжим говорить про семантику. С <head> разобрались, а как строить саму страницу, чтобы поисковик понял что на ней?
С h1 мутная история: спецификация говорит, что h1 можно использовать сколько угодно раз пока он облачён в section или article, но сеошники могут ныть, что должен быть только один h1 на страницу. Спрашивайте у них из какого они года, знают ли они про HTML5 (стандарт HTML) и читали ли они эту статью.
section, article, main нужны, чтобы отделить один блок от другого. Желательно, конечно, чтобы у каждого блока было описание — через заголовок h1.
Да, поисковикам недостаточно семантичной вёрстки, они настолько тупые, что они поддерживают целых три дополнительных способа структурировать данные на странице. И вам, как верстальщику, нужно это поддерживать — как минимум Schema.org.
Потому что тяжела и неказиста жизнь верстальщика. К сожалению, хоть и ML/AI звучат из каждого угла, но нам до сих пор далеко до нормального понимания страницы системой. Соболезную я нам всем.
Семантика важна — её отсутствие это стрельба в ноги не только себе (в портянке из дивов сложно разбираться), это боль не только для людей с инвалидностью, скринридеров и режима чтения в браузерах.
Отсутствие семантики может принести вред даже белым богатым зрячим мужчинам с макбуками — потому что их сайты не будут выводиться в топ и их бизнес не будет зарабатывать денег.
Кстати, почему на этом сайте почти нет семантики? Потому что нас пока не интересует трафик из поиска. Действуйте рационально и не превращайте всё в карго-культ.