Я Front-end Lead в JustCoded с 10+ опытом фронтенд-разработки. То, что я объясняю в этой статье, может показаться спорным для некоторых разработчиков и специалистов по SEO. Большинство своих выводов я основывал на статьях и видео Google с официальных каналов. Однако ни один из источников не гарантирует, что выполнение рекомендаций улучшит ваш рейтинг в результатах поиска.
Мета-теги
Существуют десятки статей, которые советуют использовать эти теги правильно, и все они согласны с тем, что Заголовок является наиболее важным метатегом для каждого веб-сайта. Я не буду подробно описывать общие предложения - подробности можно найти на официальной странице Google.
Вместо этого я хотел бы выделить несколько моментов ниже:
- Всегда используйте метатеги. Заголовок и описание имеют решающее значение для Google и других поисковых систем.
- Оставьте метатег keyword в прошлом, поскольку прошло 10 лет с тех пор, как он устарел для Google. Сохраняйте его только в том случае, если вы хотите продвигать свой сайт в других поисковых системах. На мой взгляд, даже если движок поддерживает тег keyword, наполнять его всеми ключевыми словами бесполезно. Помните: контент - это король.
- Обеспечьте уникальные заголовок и описание для каждой страницы, даже если ваш сайт является SPA. Мета-заголовок отображается как имя на вкладке вашего браузера и в некотором роде служит элементом навигации для пользователей.
- Закройте свой сайт в Google, пока не будете готовы его запустить. Я видел это много раз, когда веб-сайты были видны в Google, хотя они еще находились в стадии разработки. Действительно сложно заставить Google забыть тестовую информацию на ваших страницах, поэтому, если вы работаете на сервере, который виден Google, используйте мета-роботов, чтобы скрыть ее от Google Bot .
- Если ваш сайт на нескольких языках, используйте rel = alternate ». Кроме того, я бы рекомендовал всегда использовать атрибут lang ‹html lang =” en-US ”›.
- Фавикон важен. В 2019 году Google анонсировал новый внешний вид Google Search Console, поэтому обязательно проверьте свой сайт на наличие значка.
Есть много других мета-тегов. Например, Open Graph для социальных сетей или Dublin Core, однако я бы рекомендовал использовать только базовые метатеги: title, description + Открыть график.
Заголовки
С моей точки зрения, это самая святая военная тема всех времен. С момента появления HTML5 всегда было два лагеря. Люди из первого лагеря считают, что вы можете использовать столько тегов ‹h1›, сколько требует макет; представители второго лагеря считают, что на каждой странице должен быть строго один ‹h1›.
Посмотрим, что у нас есть.
Например, вот официальный ответ Джона Мюллера, аналитика тенденций для веб-мастеров в Google:
Также вы можете посмотреть видео с Канал Веб Мастера или Google Россия.
Многие веб-сайты используют несколько тегов ‹h1› в своем HTML. Например, каждый слайд на Мерседесе имеет уникальный тег ‹h1›.
Тем не менее, многие люди по-прежнему считают, что Google заботится о количестве используемых вами ‹h1›. Ну давай же :)
По моему опыту, вы можете использовать ‹h1› столько раз, сколько требует ваш семантический макет. Согласно HTML5 Doctype, тег статьи может содержать много тегов h1, как вы можете видеть в этих примерах.
Так что лучше определиться с количеством ‹h1›, исходя из вашего дизайна.
Исключение: если ваш веб-сайт поддерживает вспомогательные технологии, я бы рекомендовал разработать иерархию заголовков с начала начала страницы и использовать только один ‹h1›. Это безопаснее, потому что некоторые старые программы чтения с экрана не понимают множественную иерархию ‹h1› на странице и могут неправильно интерполировать результаты.
HTML5 теги
Не бойтесь использовать ‹header›, ‹footer›, ‹section›, ‹Article› на вашей странице, потому что они помогают пользователям и повышают ваш рейтинг в результатах поиска Google. Вот контрольный список перед запуском, который вы можете использовать перед запуском.
- Подтвердите все страницы. Конечно, могут быть некоторые ошибки с iframe или сторонними плагинами, но незакрытые теги и скрытые символы более важны. Не доверяйте никаким плагинам, всегда проверяйте свои страницы на официальной Службе проверки разметки. Плагины могли использовать старую базу правил и неправильно видеть HTML страницы.
- Проверьте структуру. Используйте HTML5 Outliner, чтобы проверить, как заголовки связаны с тегами HTML5, такими как раздел, статьи.
- Обеспечьте доступность в Интернете. Проверьте свой сайт с помощью Инструмента оценки веб-доступности на предмет проблем с веб-доступностью и заголовками на вашем сайте.
- Увеличьте время загрузки страницы. Проверьте свою страницу с помощью PageSpeed Insights. Мы более подробно рассмотрим это в следующей главе.
Интересный момент по поводу тегов ‹b›, ‹strong›, ‹i› и ‹em›.
Когда бы мы ни проверяли,« сильный и b были одинаковыми с точки зрения ранжирования и оценки, их индексации и прочего. И вы можете использовать любой из них, и это не повлияет на рейтинг Google ». Ссылка на видео
Но позвольте мне сказать это еще раз, содержание - король.
Скорость страницы
Прежде всего, скорость загрузки страницы важна для пользователей, поскольку 47% людей ожидают, что веб-страница загрузится за две секунды или меньше.
Проверьте свой сайт с помощью Page Speed Insights, и вы увидите длинный список проблем, которые у вас есть. Также имейте в виду, что Google начал индексировать веб-сайты по их мобильной версии в этом году, поэтому убедитесь, что мобильная версия вашего сайта работает нормально.
Вот несколько советов по оптимизации вашего веб-сайта:
- Оптимизировать графику. Изображения могут занимать 90% всего веса страницы, поэтому очень важно использовать правильные форматы и адаптивный подход к изображениям.
- JavaScript стоит. Адди Османи написал статью и объяснил, почему JavaScript такой дорогой. Я бы рекомендовал свести использование JavaScript к минимуму.
- Ни в коем случае не используйте видео HTML5. Действительно. Вместо этого используйте такие сервисы, как YouTube или Vimeo для видео - они сделают всю работу по оптимизации за вас.
- Используйте асинхронную загрузку для большинства ресурсов и сторонних компонентов на вашей странице. Ленивая загрузка позволяет уменьшить количество изображений при первой загрузке страницы и увеличить скорость загрузки страницы.
- Дважды подумайте, прежде чем использовать на своем веб-сайте сторонние организации. В основном это чаты, которые снижают скорость вашей страницы. Некоторые из них могут загружать целые библиотеки и пакеты шрифтов в качестве зависимостей. Если вам действительно нужен этот чат, загрузите его асинхронно при выполнении какого-либо действия: прокрутите вниз на 10 пикселей или нажмите кнопку.
Если вы работаете с командой дизайнеров, обсудите оптимизацию скорости страницы на начальном этапе проектирования и перед разработкой. В противном случае вы потратите десятки часов на ремонт и перестройку своей конструкции.
JS + SEO
К сожалению, веб-сайты все чаще создаются как SPA без какой-либо оптимизации для SEO.
Слишком сложно исправить уже созданное веб-приложение, которое Google уже проиндексировал или не проиндексировал. Поэтому, если вы собираетесь использовать JS-фреймворки, изучите инструменты для предварительного рендеринга контента. На канале Google Webmaster много видеороликов, в которых специалисты Google делятся своим видением.
Вот самые важные вещи, касающиеся JS + SEO:
- Если ваш веб-сайт использует JS для загрузки контента или написан на Angular, Vue .js, React (или любом другом framework), убедитесь, что все ваши страницы могут отображаться ботом Google. Самый простой способ сделать это прямо сейчас - вставить URL своего сайта в инструмент Mobile Friendly Test и получить результат. Если после завершения вы увидите страницу, значит, Google может отобразить ваш сайт. В любом случае, я бы рекомендовал использовать SSR, если вы хотите быть уверены на 99%, что ваш контент будет проиндексирован Google.
- Постарайтесь не перегружать свой сайт JS. Помните, JS стоит. Многие анимации и взаимодействия можно сделать с помощью CSS или даже удалить.
- Используйте службы для отслеживания проблем. Ваши пользователи покинут сайт, если увидят ошибку при загрузке страницы, и вы никогда не догадались бы, почему статистика падает. Итак, используйте трекеры для своего сайта. Например, Sentry.io предоставляет вам хороший набор инструментов для отслеживания.
Много информации по этой теме доступно в Официальном блоге Google и канале YouTube.
Нижняя линия
Итак, вы можете видеть, что интерфейс влияет на то, как Google будет оценивать ваш сайт. В то же время, даже если вы выполнили все рекомендации от Google, вы можете не достичь желаемых результатов.
Вот контрольный список, которым вы можете поделиться и использовать со своей командой, чтобы убедиться, что ничего не было упущено. Также подсчитывает абстрактные оценки для вашего сайта :)
