Здравствуйте!
Меня зовут Никита, я озвучиваю дополнение к курсу Landing page на Tilda. Его записала куратор направления «Дизайн» проекта Everland Юлия Мамцева.

На предыдущих уроках мы учились делать лендинг. На этом уроке мы разберем, какие технические настройки нужно сделать для сайта, чтобы он стал видимым для поисковых систем Google и «Яндекс».

Но давайте начнем с теории.

SEO-оптимизация — это набор действий, направленных на то, чтобы повысить позиции сайта в поисковой выдаче по поисковым запросам пользователей.

Поисковый запрос — это фраза, которую мы вводим в поисковую строку Google или «Яндекса», когда хотим что-то найти.

Поисковая выдача — это список сайтов, которые показываются в ответ на поисковый запрос.

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

Перейдем к настройкам на уровне страницы. Начнем с того, что мы зададим заголовок и описание страницы. Что это такое и зачем они нужны? Эти поля видны на странице поисковой выдачи, когда пользователь ищет сайт. На самой странице сайта они нигде не показываются, так как предназначены для формирования превью страницы в поисковой системе. Вот, например, заголовок, и вот — описание.

Заголовок должен быть уникальным для каждой страницы и содержать самый важный ключевой запрос, по которому потенциальные пользователи будут ее искать. Чем точнее заголовок, тем больше шансов, что ваш сайт выберут. Давайте введем заголовок «Сеть итальянских кофеен в Москве».

Идем дальше. Следующее поле — «Описание страницы». Его основная цель — объяснить более подробно пользователю, что ждет его на этой странице, а также дополнительно мотивировать перейти по ссылке. Рекомендуем делать его уникальным для каждой страницы, и, самое главное, оно не должно совпадать с заголовком. Давайте добавим описание: «Уютные кафе для друзей: отличная итальянская кухня в авторском исполнении».

Идем дальше. Следующая настройка — «Адрес страницы». Он должен состоять из понятных человеку слов, а не выглядеть, как набор букв и цифр: page 123456 и т. д. Например, если это страница с товарами, можно задать ей свой адрес, написав catalog, или странице о компании можно задать имя about. Но так как эта страница является у нас главной, мы здесь ничего прописывать не будем.

Следующие настройки — это бейджик и отображение для социальных сетей. По умолчанию для бейджика используется первая картинка со страницы, в нашем случае это логотип. Эти данные не видны на странице, здесь формируется отображение превью страницы, если вы делитесь ссылкой в соцсетях или мессенджере. У каждой соцсети свой формат превью, поэтому при подготовке изображения нужно оставлять большие отступы по краям, чтобы важный контент не обрезался. Рекомендуемый размер изображения — 1200*630. Давайте загрузим изображение бейджика. Видите, контент в бейджике расположен по центру, а по краям — большие отступы.

Теперь перейдем в отображение сайта в соцсетях и мессенджерах. По умолчанию здесь используется заголовок и описание из вкладки «Главное», а картинка — из вкладки «Бейджик». Но у нас почему-то не подгрузилось, поэтому сделаем вручную. Загрузим картинку. Копируем сюда заголовок из вкладки «Главное». То же самое проделываем с описанием. Нажимаем кнопку «Сохранить изменения».

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

Если в H1 добавить ключевую фразу, то это поможет находить сайт в поиске по этой фразе. Важный момент: на странице должен быть только один тег H1. Теги H2 и H3, соответственно, заголовки второго и третьего уровней. В отличие от тега H1 их может быть несколько на странице, но и на SEO они влияют слабее, так как они второстепенные.

Давайте покажем, как задавать теги заголовков для сайта. Для стандартных блоков, где есть заголовок, вы можете назначить тег заголовка в настройках блока. Для этого вам нужно кликнуть «Настройки» и в разделе «SEO-тег для заголовка» выбрать нужный параметр: H1, H2 или H3. Мы выбираем H1 и сохраняем настройки. Соответственно, в других блоках вы можете назначить заголовок H2 или H3 аналогичным способом. В редакторе ZeroBlock тоже можно назначить заголовок H1, H2 или H3. Для этого нужно кликнуть по тексту и в настройках внизу выбрать соответствующий тег.

Следующая настройка, которую мы сделаем, — это альтернативный текст для изображений, или Alt Tag.

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

Давайте мы покажем, как задавать альтернативный текст изображений. Начнем со стандартных блоков. Когда мы открываем вкладку «Контент» блока с изображением, у нас рядом есть иконка с тремя точками, на которую мы можем кликнуть. У нас появится поле «SEO: альт-текст для изображения». Напишем здесь «Сеть кофеен в Москве». Нажимаем «Сохранить и закрыть».

Теперь мы покажем, как задавать изображению альтернативный текст в редакторе ZeroBlock. Выделяем изображение, и в настройках, чуть ниже, можно добавить нужный альтернативный текст. Напишем «Бариста кофейни». Сохраняем настройки.

И последнее, что мы хотим показать, — это как проверить, все ли правильно вы настроили. В Tilda для этого есть встроенный инструмент

«SEO-рекомендации». Он находится в настройках сайта во вкладке SEO. Если вы его откроете, то Tilda покажет вам страницы, где есть ошибки, с описанием рекомендаций, как их устранить. У нас все в порядке. Значит, мы сделали все верно.

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

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

Также вы можете выполнить зачетную работу по всему курсу — сделать лендинг-пейдж для приюта собак.