12. Базовая SEO-оптимизация и добавление сайта в индекс поисковых систем

Прежде, чем мы начнём, хочу сразу сказать, что нет большого смысла заморачиваться с SEO-оптимизацией, если вы делаете одностраничник, который будете продвигать только с помощью рекламы. Если ниша конкурентная, то в ТОП вы одностраничник выведите вряд ли, хотя, теоретически, наверное, это возможно. Я не пытался :)

SEO-оптимизация важна тогда, когда вы планируете контентное продвижение. Т. е. будете публиковать какой-либо материал (статьи).

В данном уроке мы не будем глубоко погружаться в SEO, т. к. это огромная отдельная тема и я при всём желании вам всего не расскажу. Мы пройдёмся по основным настройкам Тильды, которые касаются оптимизации и я поясню, для чего мы это делаем.

Название и описание страницы

Название страницы — это тег <title>. Именно его воспринимают поисковые роботы. То, что написано в нём, выдаст поисковик в результатах поиска. Поэтому стоит отнестись к названию страницы серьёзно. Если вы напишете там «Сделал, чтобы поиграться», а потом сделаете эту страницу главной, то при поиске вашего сайта, например, по домену, пользователь может увидеть именно этот заголовок.

Сразу под заголовком идёт ссылка на страницу, далее — описание.

Описание или descriprion — второй не менее важный момент при настройке страницы. Оно должно быть длиной 130 – 160 символов, в которые вам нужно уместить всё самое важное об этой странице.

Люди, как правило, это описание в поисковой выдаче не читают, а вот поисковики его любят, поэтому не пренебрегайте. Это как написать текст для bio в Инстаграм.

И так для каждой страницы. Будь то статья в блоге или длиннющий лонгрид, или лендинг.

Настроить заголовок и описание можно в настройках страницы:

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

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

Добавить бейджик можно там же, в настройках страницы.

Теперь на Facebook (да и в других соц. сетях, которые воспринимают микроразметку Open Graph) при вставке ссылки на страницу, будет появляться вот такой предпросмотр:

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

Заголовки

В HTML существует шесть тегов заголовков: h1, h2, h3, h4, h5 и h6. Они разделяются по степени важности, которую придают им поисковые роботы и алгоритмы социальных сетей.

Хорошо, если текст в заголовках содержит ключевые фразы, по которым вы продвигаете сайт.

Помните, что заголовок h1 должен быть на странице только один.

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

Каким образом вы можете выстроить структуру. Например, у вас есть статья, разделённая на несколько разделов. В качестве примера возьмём структуру предыдущего урока по аналитике:

<h1>11. Аналитика, пиксели</h1> ... <h2>1. Яндекс.Метрика</h2> ... <h3>Настройка целей в Метрике</h3> ... <h2>2. Google Analytics</h2> ... <h3>Настройка целей в Google Analytics</h3> ... <h2>3. Facebook pixel</h2> ... <h2>4. Пиксель ВКонтакте</h2> ... <h2>Вместо заключения</h2> ...

Т. е. название страницы / статьи — это заголовок h1. Названия больших разделов материала — заголовки h2. Подразделы — h3 и так далее. Если подразделы вам необходимо разделить на более мелкие блоки с заголовками, используйте h4, h5 и h6.

Таким образом материал приобретает структурированность. Поисковики вам за это поставят плюсик в карму, а обычным пользователям будет удобно его читать и ориентироваться.

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

Здесь вполне можно использовать заголовок h2 для фразы «Цены на разработку сайтов» и заголовки h3 или h4 для заголовков в колонках.

Настройка заголовков в конструкторе Tilda

Во всех стандартных блоках, в которых есть заголовки, вы можете найти настроку «SEO-тег заголовка»:

Вы можете выбрать одно из четырёх значений: h1, h2, h3, div.

В зависимости от структуры вашей страницы, вы выбираете нужный вам тег заголовка. Если в данном блоке вам заголовок не нужен, либо он содержит фразу, далёкую от ключевой, то можно либо не задавать, либо выбрать div — получится одно и то же.

В Zero Block также есть настройка тега для заголовков, но здесь у вас больше свободы. Вы можете сделать заголовком вообще любой текст. Просто выделяете нужный и в настройках выбираете tag:

Итак, я сделал на первом экране заголовком h1 фразу «Студия web-дизайна Тимура Бикташева».

А подзаголовок «Разработка и полное сопровождение...» я сделал заголовком h3. Почему не h2? Во-первых, для h2 это будет длинновато и много лишних слов. Во-вторых, эта фраза не так значима и структурной нагрузки не несёт, но при этом она содержит ключевые фразы, поэтому я решил сделать её заголовком. В принципе, можно было оставить вовсе без тега.

Следующий крупный заголовок: «Хорошо продуманный и грамотно реализованный сайт это:»

Его я, пожалуй, оберну тегом h2. Это заголовок раздела, который отвечает на вопрос «Какой сайт является продуманным и грамотно реализованным?». Нечто подобное люди могут искать в интернете, поэтому поисковик может выдать ссылку на меня, как релевантную.

И, как я уже писал выше, я проставил заголовки h2 и h3 в блоке с ценами. Больше на моей странице нет значимых мест, которые можно было обернуть в теги заголовков.

Не перегружайте страницу заголовками. Помните, что обычного текста на ней всегда должно быть больше, чем заголовков. Заголовки — это в первую очередь структурирование текста, а уже потом средство усилить ключевые фразы. Если вы будете делать большие куски текста заголовками, поисковики вас могут не понять и при прочих равных вы окажетесь в выдаче ниже.

Изображения

Про изображения я уже упоминал, когда мы с вами занимались вёрсткой, но повторюсь.

Всегда давайте файлам изображений имена, отражающие их содержание. Это важно. Если у вас на картинке котик, называйте файл cat.jpg. Если на фото ваш товар, назовите файл так, чтобы было понятно, что там. Например: korobka-s-surprizom.jpg.

Используйте только латиницу. Не знаете, как написать это на английском, пишите транслитом. Вас поймут и Гугл, и Яндекс.

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

Атрибут alt

Не менее важная настройка. Помимо того, что наличием этого атрибута мы снова кланяемся поисковым роботам, он преследует ещё одну цель.

В браузере пользователь может отключить изображения.

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

Это было особенно актуально в эпоху низкоскоростного интернета. Сейчас скорости выше и люди намного реже отключают автоматическую загрузку изображений и даже современные браузеры далеко не все выводят альтернативный текст, а в некоторых (Firefox) этой возможности нет вовсе. Тем не менее атрибут alt остался и по-прежнему служит нам в нелёгком деле продвижения :)

Поисковики этот текст воспринимают и любят, т. к. значение, заданное вами в атрибуте, рассказывает им, о чём это изображение.

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

В этом блоке я повесил на иконки следующие alt'ы

• «Социальные сети не заменят сайт». Здесь всё по правде. Иконка изображает некую структуру, социальную сеть (часто соцсети обозначаются подобными иконками). И дописал про сайт. В контексте всего блока это вполне уместно.
• «Сайт это отличный канал продаж». На иконке смартфон, товар, корзина — онлайн-продажи. Продажи происходят где? На сайте. Так что тут тоже все честно.
• «Статистика о посетителях сайта». Здесь пользователи, прицел, мы говорим о статистике и данных о пользователях. Допустимо.

Можно было сделать короче: «Соц.сети», «Интернет-магазин», «Таргетинг». Тоже было бы правильно, но менее полезно. И по такому же принципу прописываем альты для всех картинок и иконок.

SEO-рекомендации от Tilda

В настройках вашего сайта, в разделе SEO есть отличный и простой инструмент SEO-рекомендации

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

Он не даст вам глубокого анализа, но элементарные «болячки» с его помощью вы устраните.

Добавляем сайт в индекс поисковых систем

У нас всё готово. Пора рассказать миру, что появился новый сайт.

Мы можем сделать это двумя способами:

1. Автоматически с помощью Тильды.
2. Вручную, добавив сайт в инструменты для вебмастеров.

Начнём с ручного метода.

Добавляем сайт в индекс Яндекса

Начнём с Яндекса. Перейдите на https://webmaster.yandex.ru/, авторизуйтесь. Если нет аккаунта, заведите почту на Яндексе.

Нажмите кнопку с плюсом, чтобы добавить новый сайт.

Введите адрес вашего сайта. Желательно, чтобы у вас к этому моменту уже был привязан домен. Если у вас уже настроено защищённое соединение по https, то вводите адрес сразу с протоколом, иначе получите ошибку, что это не главное зеркало.

Дальше нам нужно подтвердить права на владение доменом. Как правило, сделать это мы можем тремя способами:

• добавить в head сайта мета-тег
• добавить файл в корневую папку сайта (неприменимо при использовании Тильды)
• добавить DNS-запись

Я предпочитаю третий вариант, т. к. он не забивает лишним файлы сайта (если это не Тильда) и не добавляет лишней строки в исходный код в случае с мета-тегом.

Переключаемся на DNS-запись, копируем текст и идём в панель управления регистратора.

И добавляем текстовую запись, которую скопировали в Вебмастере.

После добавления возвращаемся в Яндекс.Вебмастер и нажимаем кнопку «Проверить». Проверка может пройти сразу, может занять некоторое время (до двух дней), но как правило всё проходит сразу.

После этого сайт добавлен. Никакой информации вы по нему пока не увидите, но когда робот его проиндексирует, вы сможете отслеживать довольно много интересных данных.

Вот лишь некоторые разделы:

Сразу перейдите в раздел Индексирование — Файлы Sitemap и добавьте ссылку на свою карту сайта:

Она будет находиться по адресу https://вашдомен.ru/sitemap.xml.

Карта сайта будет добавлена в очередь на обработку.

Готово. Теперь ждём, когда робот Яндекса проиндексирует сайт.

В автоматическом режиме подключение к Яндекс.Вебмастер можно сделать из настроек Тильды: Настройки — SEO — Яндекс.Вебмастер.

Тильда попросит права на доступы. Разрешаем, готово.

Подключаемся к Google Search Console

В автоматическом режиме можно так же через настройки Тильды. Настройки — SEO — Google Search Console — Подключить. Разрешайте доступ приложению.

В ручном режиме принцип идентичен подключению к Яндекс.Вебмастер. Отличается лишь внешний вид. Переходите на https://search.google.com/search-console

Войдите в свой аккаунт Google.

Под логотипом сервиса список подключенных сайтов или кнопка «Добавить ресурс».

Далее выбирайте «доменный ресурс», вводите адрес вашего сайта, продолжить.

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

Копируем запись для верификации и идём в панель управления регистратора.

И точно так же, как при подключении Яндекс.Вебмастер, добавляем TXT запись.

Нажимаем кнопку «Подтвердить» в Search Console и переходим к ресурсу.

Сразу добавьте ссылку на sitemap.

Готово. Ждём индексации.

По такому же принципу можно добавить сайт в индекс mail.ru, bing.com и других экзотических поисковиков, если нужна необходимость.

Жду ваших вопросов.