Внутренняя оптимизация сайта. Часть 2

Изображения

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

В языке HTML есть тег <img>, еще раз рекомендую всем пройти хотя бы базовый курс по HTML, так вот, изображение выводится именно  тегом <img src=”img/1.jpg”>. Тут src указывает путь, адрес к изображению, в нашей структуре папок и название файла, в нашем случае 1.jpg. Но давайте зададимся вопросом, что  поисковым роботам может о себе сказать данное изображение? Ответ будет предельно прост — ничего! Для того, чтобы сказать ПС о том, что содержится на изображении, необходимо использовать атрибут alt, в значении которого будет описание изображения. И использовать название, из которого можно дать дополнительное разъяснение содержания изображения. Тогда в коде наше изображение уже будет иметь вид <img src=’img/van_Gog_ZvYozdnaya_noch.jpg’ alt=”картина ван Гога Звёздная ночь ”>.  Наша задача, как seo-специалиста, добиться того, чтобы все изображения на нашем сайте были оптимизированы. Особенно это касается тех ниш, где могут искать по картинкам.

Например: одежда. Очень часто можно встретить ситуацию, когда пользователь не знает точно какой свитер он хочет купить, и поэтому сначала смотрит выдачу по картинкам, а если его что-то заинтересовало, то переходит на сайт по ссылке с этой картинки. Такой трафик будет высоко конверсионный, а следовательно, его непременно стоит привлекать.  

В атрибуте alt мы можем использовать ключи из семантического ядра, по которым мы хотим привести трафик на сайт. Давайте сейчас обратимся к нашей таблице с семантикой. Во вкладке Мета — Теги, мы отметили желтым и зелеными цветом те ключи, которые были использованы для title и description. Но ведь у нас осталась еще масса ключей, которые можно использовать и привлекать по ним трафик на сайт. Т.е. в нашем случае, у категории препаратов для сердца будет свое изображение (рис. 1).

Рисунок №1 — Оптимизация изображений

Давайте выберем ключи, которые позволят нам дать ПС информацию о картинке, и к тому же расширим список фраз в индексе поисковых систем, по которым будет ранжироваться наша страница.  Я выбрал ключ, который будет применен для атрибута alt, — это «препараты для улучшения работы сердца». Постепенно, при помощи всех возможных способов, мы наполним страницу максимальным количеством ключей, при этом не прибегая к спаму в описательном тексте данной категории.

Атрибут alt предназначен не только для того, чтобы ПС могла понять содержание, но и для тех случаев, когда  картинка не загрузилась, например, из-за слабого интернета. Тогда пользователь увидит вместо картинки содержимое атрибута alt. Еще одной его функцией является то, что во время аудио-озвучивания содержимого веб-страницы для слабовидящих людей вместо изображения озвучивается содержимое alt. Пожалуй, на этом с оптимизацией изображений все. Переходим к оптимизации заголовков текста.

Заголовки текста

В языке HTML есть 6 уровней заголовков — это h1, h2, h3, h4, h5, h6. Значимость заголовков идет по убыванию, где h1 — самый главный заголовок. Для понимания сути заголовков мы снова вернемся к аналогии с книгами.

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

Например (рис.2)

Рисунок №2 — Пример заголовков страницы

Важно!

Заголовок H1 может использоваться только один раз на странице.

Использовать заголовки необходимо в древовидной структуре. Иными словами, соблюдая иерархию заголовков. В большинстве случаев, на страницах e-commerce проектов, будет не более 3 заголовков.  Мы можем увидеть заголовок h1 на примере википедии (рис. 3).

Рисунок №3 — Заголовок h1 на примере википедии

Давайте рассмотрим заголовок H1 на примере коммерческого сайта (рис. 4).

Рисунок №4 — Заголовок на коммерческом сайте

У вас может возникнуть справедливый вопрос: как проверить на странице заголовок? Как понять заголовок ли это? Сделать это очень просто. Нужно навести мышью на элемент, в данном случае, заголовок, и кликнуть правой клавишей мыши. В контекстном меню нужно выбрать — посмотреть код (рис. 5).

Рисунок №5 — Просмотр элемента страницы

Далее, в инспекторе элементов, мы сможем увидеть исходный код страницы (рис. 6).

Рисунок №6 — Просмотр элементов в исходном коде

С заголовками мы также поработаем на основе семантики. Снова возвращаемся к нашей  таблице. Голубым цветом я отметил ключи, которые будут применены для главного заголовка h1, а также h2, h3. Естественно, что эти заголовки будут вплетены в описательный текст для этой страницы.  Пример (рис. 7).

Рисунок №7 — Заголовки в seo тексте

Надеюсь, суть заголовков вы уяснили и, не откладывая, приступите к оптимизации заголовков на страницах вашего сайта. Теперь приступим к скорости загрузки сайта.

Стабильность. Скорость. Безопасность.

Что можно сказать касательно стабильности работы сайта, правило тут одно — сайт должен работать 24/7. Следовательно, сотрудничать стоит только с профессиональными хостингами, предоставляющими качественный сервис. В случае, когда сайт периодически выключается, первым делом нужно решать вопрос со службой поддержки, а если это не помогает, определенно стоит задуматься о смене хоста. Иначе о хороших позициях нет смысла и думать.

К вопросу о безопасности можно сказать, что сайт ни в коем случае не должен быть заражен вирусами. При попытке зайти на сайт с вирусом, пользователь увидит подобное сообщение (рис. 8).

Рисунок №8 — ПС блокирует посещение сайтов с вирусами

В зависимости от тематики, сайт может продолжать находиться в поиске от нескольких часов до суток, не смотря на то, что обнаружены вирусы. Если же вирусы не будут удалены длительное время, то сайт будет просто исключен из поиска.  Тут стоит еще учитывать, что чем дольше не будут приниматься меры по очистке, тем сложнее будет потом вернуть позиции. Для того, чтобы избежать таких ситуаций, во-первых, постоянно нужно обновлять свои cms, устанавливать модули безопасности на хостинге. Второй пункт, имеющий прямое отношение к безопасности сайта — это использование защищенного протокола https. Данный протокол позволяет пользователю передавать данные более безопасным (зашифрованным) способом. Это особенно актуально, когда на сайте пользователь указывает свои данные — личные, финансовые. К примеру, используя wi-fi, где-то в публичном месте, вы посещаете сайт незащищенный протоколом https. Так вот, злоумышленник, находящийся в этом же месте, обладая некоторым набором программного обеспечения, спокойно может получить все данные, которые вы передаете на сайт и получаете с сайта.  Поисковая система Google неоднократно заявляла, что это будет очень важным фактором ранжирования. При этом, на данный момент, seo-специалистами не было замечено сильного влияния наличия или отсутствия этого протокола в ранжировании сайтов. Также в скором времени анонсируется, что все сайты, не имеющие протокола https, будут иметь такую пометку (рис. 9).

Рисунок №9 — Предупреждение о небезопасности сайта

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

А сейчас немного подробнее о скорости загрузки сайта.

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

Для того, чтобы проверить скорость загрузки есть специальные сервисы. Наиболее популярным является PageSpeed Insights — Google Developers, как альтернативу или как дополнительные инструменты для анализа скорости загрузки, можно использовать Pingdom Website Speed Test и gtmetrix.

Этот инструмент позволяет проверять скорость загрузки отдельно для мобильных устройств и для десктопных (рис. 10, 11) .

Рисунок №10 — PageSpeed для мобильных

Рисунок №11 — PageSpeed для ПК

Важно!

Данный инструмент проверяет скорость загрузки конкретной страницы, а не сайта целиком.

Дополнительно к числовым значениям гугл отмечает цветовые градации. Зеленая зона — это отличная скорость загрузки, желтая — это нормальная(средняя), красная — это ниже нормы(медленно, плохо).

Чуть ниже оценки скорости Гугл дает рекомендации о том, как можно увеличить скорость загрузки страницы. Для того, чтобы применить эти рекомендации, необходимы базовые знания по js, css, html. Как правило, в рекомендациях присутствует совет активировать кэш браузера и произвести сжатие изображений на сайте.

Возможно, вам покажется, что эти факторы менее важные, чем предыдущие факторы внутренней оптимизации. Но думать так не стоит. Следить нужно за всеми сигналами, все они важны и только вместе способны произвести максимальный эффект. Далее нас ждут еще блоки информации, посвященной внутренней оптимизации. Так что пробуйте, экспериментируйте и продолжайте учиться!

To be continued….

Автор Виталий Сухомлинов
практикующий веб разработчик
и seo-специалист