SEO-friendly HTML для верстальщика / Хабр
В этой статье не будет подробного разбора всех аспектов SEO-friendly сайта. Я собрал здесь лишь тот объем информации, с которым мне необходимо было познакомиться для решения SEO-задач в компании.
В компанию ВсеИнструменты я попал больше года назад. До того момента мне еще не приходилось так тесно заниматься задачами поисковой оптимизации, а возраст и размер проекта лишь прибавляли волнения при решении seo задач. Так или иначе тот период прошел, и я не испортил своими правками уровень сайта в выдаче, благо мне помогали коллеги из SEO-подразделения.
Наш сайт, без преувеличения, состоит из огромной кодовой базы, и каждый день мы планомерно улучшаем его, добавляя новые фичи и исправляя существующие баги. Еще в начале своего пути я получил несколько крупных задач по улучшению текущей верстки проекта с использованием validator.w3.org. После окончания работ над этими задачами у меня возникла мысль собрать некоторую информацию по написанию валидной и SEO-пригодной верстки в одну небольшую статью с указанием ссылок на дополнительную и более подробную информацию.
Вы познакомитесь с несколькими важными областями валидной SEO-верстки и найдете примеры работы с validators.w3.org. Дополнительные материалы, указанные ниже, будут весьма полезны в повседневной работе верстальщика.
Семантические теги
Семантическая верстка — это html элементы со смыслом понятные разработчику, браузеру и поисковым роботам. К таким относят: header, footer, main, article, section, nav, aside и тд. Использование перечисленных тегов описывается по спецификациям W3C или WHATWG. Короткую вводную можно получить в цикле видео\статей “HTML шорты” от Вадима Макеева. Приведу описание к нескольким тегам.
Section — определяет раздел в документе. В соответствии со спецификацией W3C по HTML5: «Раздел — это тематически сгруппированный контент, как правило с заголовком.»
Article — определяет независимый, самодостаточный контент. Контент, помещенный в этот элемент, должен иметь смысл сам по себе, т. е. он должен быть понятен в отрыве от остальных частей веб-сайта.
Подробнее о article, а так же section написано здесь.
Header — предназначен для определения заголовочного блока или «шапки» документа или раздела. Подробнее здесь.
Footer — предназначен для определения «подвала» документа или раздела.
Nav — Предназначен только для основного блока навигационных ссылок.
Aside — определяет некий контент, находящийся в стороне от контента, внутри которого он расположен (как боковой блок страницы, «сайдбар»).
В целом, тема доступности сайтов довольно обширна. Со всеми нюансами предлагаю ознакомиться в этой статье и еще советую пройтись по всей серии “HTML шорты”. Еще могу посоветовать ресурс Веб стандарты, некоторые статьи писали авторы спецификации HTML5 (переводы на русский). И для понимания, можно ознакомиться с контентной моделью HTML.
Микроразметка Schema.org
Чаще всего инструкции по включению микроразметки в HTML-код вы будете получать от SEO-специалистов.
Но для понимания немного осветим эту тему.
Schema.org — стандарт семантической разметки данных, который помогает поисковикам лучше понимать данные, представленные на сайте. Например, с помощью разметки можно явно указать поисковым роботам, что на странице site.ru/product_page1 находится товар, и передать основные параметры: название, цену, артикул, производителя и т.д. На основе этих данных поисковики формируют расширенные сниппеты в поисковой выдаче.
Сайты с разметкой отличаются от остальных тем, что в поисковой выдаче их сниппеты более информативны и привлекательны. Они включают в себя больше полезного контента для пользователя. Если конкурент окажется в выдаче выше, но, допустим, у него не будет микроразметки либо там будут реализованы не все фичи, наш сниппет может оказаться больше и привлекательнее. Впоследствии это может выразиться в большем количестве переходов и, соответственно, повышении поведенческих факторов, что в итоге поднимет позиции в выдаче.
Подробно о микроразметке написано в вики Яндекса. Документация Schema.org. Так же стоит обратить внимание и на гайд от Google.
Как проверить свой HTML
Так как один из критериев к SEO — это валидная верстка, необходимо прогонять написанный код через ранее упомянутый валидатор. К слову, помимо него есть валидатор от Google — в нем необходимо следить за выбранным роботом (Компьютер/Смартфон) и инструмент от Яндекса. Эти инструменты помогут Вам в задачах связанных с микроразметкой. Следует сравнивать новый и старый код, удостовериться, что ошибок нет и все существующие ранее сущности правильно считываются.
В целом, работа с ними сводится к тому, чтобы скопировать HTML код из браузера и вставить его в соответствующее текстовое поле валидатора. Можно копировать куски кода сразу из вашего IDE, но это должен быть чистый HTML с готовыми данными. После прохождения проверки вы будете получать уведомления о различных ошибках в коде. Warning можно опустить.
Но от всех
Перейдем к нескольким конкретным примерам (не)валидной верстки и их проверке с validator.w3.org.
Списки
К спискам относятся теги ul и ol (маркированные и нумерованные соответственно).
Выглядит это так:
<ul> <li>item 1</li> </ul> <!-- или --> <ol> <li>item 1</li> </ol>
Внутри открывающего и закрывающего тегов ul могут стоять только элементы li, а уже внутри самих этих элементов (пунктов) можно вставлять любой контент (текст, картинки, заголовки, абзацы, ссылки и даже другие списки). То есть, <ul><div></div></ul> является не валидной версией, и https://validator.
w3.org/nu/ явно об этом напишет в выводе ошибок (Рис 1).
Ссылки
В использовании тега <a> тоже есть нюанс, в href недопустимы пробелы. То есть, <a href="tel:+7 (967) 321-22-33">phone</a> не является валидным вариантом (Рис. 2), однако <a href="tel:+7(967)321-22-33">phone</a> соответствует всем критериям.
Атрибуты
У каждого html тега есть свой набор валидных атрибутов. Часть из них можно увидеть здесь, остальное можно найти тут.
При использовании атрибутов необходимо помнить, что существуют устаревшие.
Таблицы
Часто приходится немного корректировать базовые стили таблицы. Раньше такое реализовывалось через соответствующие атрибуты.
<table border="1" cellpadding="0" cellspacing="0"></table>
На данный код мы получим сразу 4 ошибки об устаревших атрибутах (Рис. 3).
Рис 3. Устаревшие атрибуты таблицыЭто можно спокойно переписать с использованием стилей и классов.
border — http://htmlbook.ru/html/table/border
cellpadding — http://htmlbook.ru/html/table/cellpadding
cellspacing — http://htmlbook.ru/html/table/cellspacing
width — http://htmlbook.ru/html/table/width
Резюмируя вышеописанное получим примерно такой код:
<style>
.table {
border-collapse: collapse;
width: 400px;
border-spacing: 0;
}
.column {
padding: 0;
border: 1px solid #333;
}
</style>
<table class=”table”>
<tr>
<td class=”column”></td>
</tr>
</table>
Подобное решение относится ко всем атрибутам, влияющим на стили элементов. Но есть такие, которые относятся к логике DOM-элементов. Чаще их реализация полностью падает на браузеры. Остальное можно реализовать с помощью JavaScript.
Атрибут id
Этот атрибут является неотъемлемой частью HTML.
На нем часто завязаны стили и клиентский JavaScript. Данный подход уже давно не используется ввиду усложнения поддержки написанного кода. Используя id в браузере, часто можно наткнуться на проблему отсутствия уникальности значений этого свойства. Поэтому чаще всего чистый id заменяют на data-id или более специфичные названия. У нас часто используются data-атрибуты – data-behavior и data-selector. Первый подходит для взаимодействия с пользователем, второй чаще используется для манипуляций с DOM. Однако, насколько я знаю, это необязательное правило. Помимо этого, в css можно писать код с обращением в любые из свойств элементов, будь то data-* или любой другой атрибут.
Пример микроразметки
Помимо примеров валидной верстки хотелось бы привести небольшой кейс использования микроразметки Schema.org. Используя микроразметку, желательно размечать верстку, которая видна на странице и никоем образом не скрывается от пользователя при помощи opacity, visibility, display или top/left/right/bottom: -100500px.
Поисковики не жалуют скрытый контент. Иногда бывают исключения, но их стоит уточнять у SEO специалистов.
Перед тем, как мы продолжим хотелось бы описать значение используемых атрибутов:
Itemscope — задает область действия словаря в структуре данных. Как правило, работает совместно с атрибутом itemtype и задаёт пределы, где itemtype будет активен. У этого атрибута нет значений.
Itemtype — указывает адрес словаря, который будет применяться для определения свойств элемента в структуре данных. Яндекс и Google поддерживают стандарт разметки Schema.org. Соответственно, в качестве значения itemtype указывается адрес словаря на этом сайте. К примеру, для разметки организаций используется значение https://schema.org/Organization.
Itemprop — используется для добавления свойств словаря микроданных к элементу. Имя свойства определяется значением itemprop, а значение свойства определяется содержимым HTML-элемента, к примеру, текстом который располагается внутри элемента.
Приведем пример микроразметки Article.
<div itemscope="" itemtype="https://schema.org/Article">
<...>
<div>
<div
itemprop="author"
itemscope=""
itemtype="https://schema.org/Person"
>
<span
itemprop="name"
>
ВсеИнструменты.ру
</span>
</div>
<time
itemprop="datePublished"
datetime="{{ article.getUpdatedTimeObj().format('Y-m-d') }}"
>
{{ article.getUpdatedTimeObj().format('d.m.Y') }}
</time>
</div>
<meta
itemprop="description"
content="{{ article.getShemaOrgDescription() }}"
/>
<div
itemscope
itemprop="image"
itemtype="http://schema.org/ImageObject"
>
<img
itemprop="url"
src="{{ article.getShemaOrgImageUrl() }}"
alt=""
>
</div>
<...>
</div>
В данном примере представлена микроразметка статьи.
Действие микроразметки ограничено дивом с атрибутами itemscope, itemtype = Article. Внутри включает микроразметку автора статьи и дату публикации. Включает в себя также краткое описание статьи и изображение. В данном кейсе при помощи бэкенда на этапе публикации парсится весь список изображений и выдается фронтенду при помощи метода getShemaOrgImageUrl().
Я не хотел бы сильно погружаться в детальные гайды по микроразметке, поэтому просто укажу несколько полезных статей на эту тему.
Микроразметка для сайта интернет-магазина: как настроить разметку Schema.org для товаров и категорий
Микроразметка товаров
Итог
Хотелось бы, чтобы этот материал был вам полезен. Я старался предоставить информацию для работы с SEO-версткой максимально сжато. Надеюсь, я смог достичь этой цели. Данной информации не хватит для формирования по-настоящему SEO-friendly сайта, поэтому я рекомендую использовать дополнительные материалы при разработке своих страниц.
Эта тема сложна и обширна. Для плодотворного продвижения и удержания позиций сайта в поисковой выдаче необходимо работать в паре с SEO-специалистом и постоянно вести работы над улучшениями своих продуктов. Спасибо за уделенное время!
SEO-верстка сайта верстальщику на заметку
SEO-верстка сайта — это верстка html-кода страниц сайта, где приоритетное значение отдается размещению текстовых блоков ближе к началу html-кода страницы. Сайт может выглядеть абсолютно одинаково при совершенно разной верстке страницы. СЕО-верстка основывается на том, что: чем ближе к началу HTML-кода расположен контент, тем он релевантнее с точки зрения поисковой системы.
Почему так? Если мы говорим про поисковую оптимизацию сайта, а точнее про оптимизацию контента на страницах сайта, то наша задача сводится к организации контента на странице и в html-коде страницы таким образом, чтобы контент быстрее находился поисковым роботом, был структурированным и понятным. За то, каким будет контент на странице, и как он будет оформлен отвечает SEO копирайтер.
А вот как будут размещены на странице блоки с контентом отвечает SEO верстальщик.
SEO оптимизированная верстка
Как вы думаете, при прочих равных, какой сайт лучше подает информацию: тот, где полезный контент начинается на 20 строке html-кода или 320? Навороченный сайт может быть интересен человеку. Первые 3 секунды. Но дальше посетитель начнет искать то, за чем он пришел на страницу. Это наглядно работает на примере лендингов. С поисковым роботом примерно то же самое, только прелюдия в виде 300 станиц кода его не впечатлит, а скорее разочарует.
Представьте, что чем дальше от начала страницы находится полезная информация, тем меньше интереса к ней проявляет поисковый робот. Ведь зачем мы сделали страницу? Чтобы разместить на ней самую важную в мире информацию. Так зачем ее прятать? Быстрая индексация — один из важных факторов ранжирования страниц по запросам.
Здесь дело не только в поисковых роботах. Чем проще посетителю найти информацию, тем лояльнее он относится к сайту, что положительно сказывается на поведенческих факторах.
Чтобы не прятать полезную информацию — размещаем ее ближе к началу html кода страницы, желательно так, чтобы контент был в зоне видимости первого экрана прокрутки. И не надо устраивать посетителям сайта визуальный шок от сотни кричащих баннеров (пощадите людей с плохим зрением и эпилептиков).
СЕО-верстка — примеры
Как это выглядит на практике. Возьмем примитивную верстку.
Пример простой верстки:
<body> <div> <div></div> <div></div> <div>Тут расположен важный контент</div> <div></div> </div> </body>
Чтобы сделать верстку более SEO френдли, разместим блок content ближе к тегу body.
Пример SEO-верстки:
<body> <div> <div></div> <div>Тут расположен важный контент</div> <div></div> <div></div> </div> </body>
Не углубляясь в тонкости css верстки, меняем местами блоки sidebar и content при помощи свойства float.
И вот у нас вместо длинного меню, кнопок репостов и прочей ерунды сразу после хедера, начинается контент.
При большом желании можно сделать так, чтобы блок content находился в html-коде даже выше блока header. Пишите в комментариях, как по-вашему это можно сделать.
Верстальщик и СЕО-верстка элементов сайта
Если верстальщик не заложит в код необходимые для SEO элементы, оптимизация всего сайта может оказаться малоэффективной. Первый и основной элемент страница важный для сео — это title страницы сайта, о котором трудно забыть. Хуже дело обстоит с мета-тегами meta keywords и meta description. Важность этих элементов сложно переоценить, однако их часто недооценивают или вовсе про них забывают. Еще одной важнейшей частью html-страницы являются теги h2, h3, h4. Почему бы не оформить заголовок поста или название товара в интернет-магазине в тег h2, и тем самым указать поисковому роботу на важность элемента. Но нет, тегами h2,2,3 часто пренебрегают или используют их некорректно.
Сайты, на которых у изображений прописан атрибут ALT встречаются нечасто, хотя alt используется для SEO оптимизации изображений по запросу, и может помочь картинкам сайта попасть на видимые позиции в сервисы вроде Яндекс.Картинки и Google Картинки. Но какое до этого дела верстальщику, если SEO для него — пустой звук. Это же касается атрибута title для ссылок. И еще по поводу ссылок. Трудно винить верстальщика за точную верстку по дизайну, но немаловажно учитывать то, что ссылки на сайте всегда должны иметь нижнее подчеркивание. Да, это не всегда вписывается в дизайн от веб-дизайнера, который не слышал про SEO-верстку. Вопрос неоднозначный.
Пишите в комментариях, как вам кажется, надо ли подчеркивать ссылки на сайте, все или только в тексте?
Аргументируйте.
Валидная SEO-верстка
Во-первых — SEO-верстка должна быть кроссбраузерной (возлюби Internet Explorer 6, как самого себя), чтобы у всех посетителей сайт отображался одинаково.
Во-вторых — SEO-верстка должна быть валидной. То есть пройти валидацию (проверку на соответствие стандартам W3C). Проверить валидность верстки сайта можно через официальный валидатор W3C.
Ходит много споров по вопросу важна ли валидность верстки для СЕО оптимизации сайта. Верстка с ошибками — как текст с ошибками. Неграмотный текст — неграмотная верстка. Делайте грамотную SEO-вестку.
Полезные советы по СЕО верстке
- Старайтесь оптимизировать верстку, убирая лишние блоки.
- Оптимизируйте html код страницы.
- Оптимизируйте таблицы стилей css и выделяйте их в отдельный файл и даже папку.
- Размещайте на сайте навигацию «Хлебные крошки».
- Не увлекайтесь тегами B и STRONG. Лучше всего использовать тег strong и только в тексте. Остальное можно выделить стилями.
- Используйте h2 для заголовка контента. Не используйте в верстке дизайна сайта теги от h3, h4 и т.д. Оставьте их для текстовой части контента.
- Делайте ссылки на сайте, и особенно в тексте, подчеркнутыми (underline) и отличающимися по цвету от основного текста.
- Делайте все части контента открытыми по умолчанию, чтобы не приходилось активировать какой-либо элемент, чтобы увидеть контент полностью.
- Долой портянки! Слишком длинные страницы — зло. Они долго грузятся, плохо индексируются, да и после 5-7 прокрутки вниз у посетителя может отпасть всякое желание листать дальше.
Старайтесь упрощать и оптимизировать все элементы сайта. Чем сложнее — тем больше ошибок. Старайтесь ставить на первое место контент. Ведь именно ради контента сделана страница. По крайней мере, с точки зрения поисковой оптимизации сайта.
Пишите в комментариях, если что-то упущено. Подписывайтесь на SEO блог.
Делайте репосты друзьям и добавляйте страницу в избранное.
И повторюсь — делайте грамотную SEO-вестку.
Получайте бесплатные уроки и фишки по интернет-маркетингу
🥇 6 эффективных SEO-советов по оптимизации макета целевой страницы
Целевые страницы великолепны.
Они представляют собой идеальный симбиоз отличного пользовательского опыта и эффективного SEO.
Страница с высоким рейтингом в Google И приносит клиентов? Да, пожалуйста! Запишите меня!
Действительно легко, когда дело доходит до маркетинга роста.
Мы планируем идеальную структуру. Мы выражаем наше творчество через мастерски созданный макет. Мы старательно создаем контент, который будет привлекать клиентов. По крайней мере, мы так думаем.
Как оказалось, иногда наши целевые страницы не занимают такой высокий рейтинг , как нам хотелось бы. Это не так просто, как писать сообщения в блоге. Ведь причин может быть миллион! И это плохо, потому что это напрямую влияет на нашу прибыль . Но не беспокойтесь.
В этой статье я собрал 6 конкретных и подробных советов о том, как оптимизировать макет целевой страницы для SEO . Кроме того, они снабжены реальными примерами целевых страниц, которыми я восхищаюсь, — чтобы дать вам волю творчеству.
Без лишних слов, давайте углубимся в каждый совет по SEO.
И вот они:
- Макет целевой страницы должен быть ОЧЕНЬ простым
- «Скрыть» содержимое, изначально не нужное
- Тратьте больше времени на оптимизацию заголовков
- Обеспечение молниеносной скорости страницы
- Стимулируйте дальнейшие клики
- Обеспечение совместимости с мобильными устройствами для SEO
Позвольте мне разбить все эти пункты на конкретные советы.
Совет № 1. Сделайте макет целевой страницы ОЧЕНЬ простымСамый главный приоритет для вашей целевой страницы — обеспечить отличный пользовательский опыт и, следовательно, превратить посетителей в потенциальных клиентов и пользователей. Из модели поведения Б. Дж. Фогга мы знаем, что целевые страницы должны иметь высокий уровень «мотивации» и низкий уровень «трения».
На практике это означает:
- способность плавно направлять взгляд пользователя
- устранение ненужного трения
Давайте разберем, как вы можете достичь их обоих:
Простой способ эффективно направлять пользователей и устранять трения состоит в том, чтобы эффективно использовать цвета (например, в кнопках), сохранять хорошие поля между элементами (пробелы) и творчески использовать изображения .
- Эффективное использование цветов
Поскольку люди являются зрячими животными, мы можем естественно и легко замечать высококонтрастные различия — наше внимание приковано к ним. Ваша цель — сделать важные элементы, такие как заголовки и кнопки, контрастного цвета, который будет выделяться на фоне фона страницы.
Это важно, потому что это делает информацию легко усваиваемой для ваших посетителей. Когда вы обеспечите это, вы уменьшите трение — и ваши обычные посетители могут превратиться в клиентов. И эти сигналы взаимодействия (т. е. более длительное время на странице, количество кликов на странице, более низкий показатель отказов и т. д.), в свою очередь, являются факторами ранжирования, которые Google использует в своем алгоритме.
Кроме того, подумайте о «Сгибе». Использование цветов между разделами — особенно в The Fold — может подтолкнуть пользователей к прокрутке вниз и изучению того, что будет дальше.
Вот классный пример от Filter Off:
Мы определенно можем сказать, что их целевая страница создана с учетом интересов конечного пользователя.
Их кнопки призыва к действию просты и гармоничны, а самое главное выделяются на фоне.
Кроме того, вы уже можете увидеть раздел другого цвета в The Fold, что побуждает вас увидеть, что там на самом деле.
- Сохранение хорошей маржи
Это довольно просто. Слишком перегруженные веб-сайты увеличивают трение у пользователя, потому что вызывают у него замешательство. Эмпирическое правило, которое я лично использую здесь, заключается в том, что каждый элемент должен занять свое место на целевой странице.
Это потому, что каждый элемент борется за то, чтобы привлечь внимание пользователей, и я не хочу отвлекать их от конечной цели — оставаться на моем сайте и конвертировать.
Если вам представлены 5 элементов, каждый из которых потенциально имеет свои собственные кнопки CTA, ваш мозг должен использовать больше вычислительной мощности, чтобы решить, какой элемент что делает, и приведет вас туда, куда вы хотите. А нам, людям, это просто не нравится 🙃.
Мой лучший совет здесь — позволить себе иметь «плохие» поля в The Fold, чтобы пользователи могли видеть следующий раздел страницы. После этого придерживайтесь определенного руководства по стилю и сохраняйте хорошую маржу.
Вот отличный пример от Tidze:
- Творческое использование изображений
Аналогично двум пунктам выше, вы можете использовать изображения, чтобы направлять пользователя к следующему разделу. Если одна из ваших высококачественных иллюстраций обрезана прямо под разделом «Герои», пользователи с большей вероятностью прокрутят вниз, чтобы увидеть ее, потому что она привлечет их внимание. Таким образом, они продолжат изучение страницы. И это хорошо для обеих сторон.
Вот отличный пример от Doo:
Как видите, их изображения «обрезаны» в разделе Hero. А отказ от информации, саспенс побуждает пользователей прокручивать дальше вниз.
Совет № 2: «Скройте» контент, который изначально не нужен Поскольку целевые страницы должны обеспечивать хороший опыт, это означает, что вы также должны делать свои тексты простыми.
Это также хорошо сочетается с идеей о том, что пользователи, вероятно, НЕ ожидают увидеть большие блоки контента на целевой странице продукта.
Но поскольку вам нужно, чтобы ваша целевая страница занимала высокое место в рейтинге, как вы можете преодолеть разрыв между наличием достаточного количества SEO-контента и сохранением пользовательского опыта?
Ваш лучший друг здесь — «расширяемый JavaScript». То есть с помощью некоторой стилизации можно скрыть контент, который изначально не нужен.
Теперь я знаю, я знаю. Google на самом деле отдает меньше приоритета контенту, который изначально не виден. Для тех из вас, кто не знал, то есть контент, который изначально не виден и требует взаимодействия с пользователем, получает меньший вес и ранжирование алгоритмом Google.
Из-за этого вам необходимо убедиться, что контент, который фактически изначально виден, содержит ваши самые основные и самые важные ключевые слова. После этого вы можете «скрыть» дополнительные длинные ключевые слова и контент в расширяемых разделах, чтобы достичь хорошего количества слов.
Чтобы назвать несколько мест, где вы можете это использовать, например, это может быть в:
- Разделы, в которых представлены различные функции и подфункции вашего инструмента
- Ползунки и виджеты отзывов клиентов
- Блоки часто задаваемых вопросов (FAQ)
Вот несколько хороших примеров:
Особенности твинга. люблю использовать этот трюк, чтобы добавить больше контента на мои страницы. Но прежде чем нырнуть с ним в , есть кое-что важное , чтобы отметить это, что вы можете найти в Совете № 6 ниже.
Совет № 3: потратьте больше времени на оптимизацию заголовковЗаголовки являются одними из самых важных элементов, когда речь идет как о поисковой оптимизации, так и о конверсиях. Из-за этого вам нужно эффективно заставить их служить обеим целям.
Для SEO-макета целевой страницы это означает, что вам необходимо включить целевое ключевое слово в заголовок. Вы можете сделать это таким образом, чтобы играть с вашими уникальными УТП.
Одна из стратегий, которую я считаю эффективной, — это использование вопроса. Вопросы провоцируют нас, и, как рождает естественное любопытство, у нас, людей, возникает потребность «отвечать на него».
Например, представьте, что вы предлагаете новую геймифицированную CRM-систему со встроенной системой стимулирования. Отличный способ использовать ваши ключевые слова в h2 (заголовке) и первой копии — задать вопрос и ответить на него. Вот дикий пример, который я только что придумал:
«Кто сказал, что ваша система управления контентом не может быть интересной?
Встречайте ConnectLoop. Игровая CRM-система, разработанная, чтобы помочь вам продавать больше. Благодаря встроенной системе вознаграждений ваш процесс продаж станет проще простого. Что может быть лучше, чтобы ваш менеджер по продажам полюбил вас? »
В этом вопросе будет указано ваше ключевое слово, и он будет достаточно интригующим для изучения пользователями. И обратите внимание, как он снова заканчивается открытым вопросом?
Прокрутка (и изучение страницы) раньше была проблемой на заре Интернета, потому что пользователи не знали, что они могут это делать.
В настоящее время проблема с прокруткой немного отличается — пользователи не прокручивают, потому что они не вовлечены. Если вы не сразу привлечете их внимание и не вызовете интерес, то все. Они возвращаются в Google, и ваша страница медленно теряет позиции из-за негативных пользовательских сигналов.
Таким образом, цель таких вопросов — заставить пользователя прокрутить вниз и исследовать. Чем дольше они остаются на странице, тем больше они потребляют ваш бренд — и это увеличивает ваши шансы убедить их перейти к следующему шагу.
Мы, люди, любим сводить концы с концами. Просто мы такие.
И последнее, но не менее важное: общий совет: будьте очень внимательны, черпая вдохновение на других веб-сайтах, особенно крупных компаниях. Такие компании, как Asana и Microsoft, «могут позволить себе» не включать свои ключевые слова и иметь расплывчато звучащее и вдохновляющее сообщение просто потому, что они являются очень известными брендами, которые люди узнают. Ваш бренд, скорее всего, еще не такой, а расплывчатость только вызовет трения и путаницу.
Магазин — отличный пример копирайтинга для целевых страниц, который также подходит для SEO:
Совет № 4. Стимулируйте дальнейшие переходы по ссылкам работают. Концепция здесь такова: используйте умные методы копирайтинга и вторичные призывы к действию, чтобы стимулировать пользователей переходить на другие страницы вашего веб-сайта, ДАЖЕ ЕСЛИ они не готовы к конверсии сейчас.По сути, это не проблема, потому что:
- Пользователи Google Сигналы пользователей в их алгоритме
- Никто не покупает после одного взаимодействия — люди должны познакомиться с вами
Давайте обратимся к ним обоим.
Во-первых, то, как пользователи взаимодействуют (или не взаимодействуют!) с вашими сайтами, является прямым сигналом ранжирования для Google. Если пользователи, приходящие через поисковые системы, заходят на ваш сайт и им нравится то, что они видят, они будут вести себя определенным образом. Они проведут много времени на странице, возможно, кликнут и перейдут на другую страницу вашего сайта.
То же верно и в обратном случае. Если пользователям не нравится то, что они видят, они вернутся в Google вскоре после перехода на вашу страницу и, возможно, нажмут на еще один результат поиска.
Во-вторых, покупательское поведение ваших потенциальных клиентов изменилось. В начале 20-го века люди покупали вещи по телевизионной рекламе просто потому, что на рынке еще не было ничего подобного. Новизна была большой частью таких заоблачных продаж продукта.
В настоящее время потребители могут найти все о продукте с помощью нескольких поисковиков. Ваша работа здесь состоит в том, чтобы избавить их от этих поисков. Чтобы превратить SEO-посетителей в клиентов, вам нужно заинтересовать их своим брендом — максимально естественным и конгруэнтным способом.
Использование хороших методов копирайтинга, таких как открытые вопросы, УТП и эмоциональные мотиваторы, может обеспечить ранжирование вашей страницы благодаря взаимодействию пользователей с вашим сайтом. Например, пользователи, которые ищут «быстрая система чата на веб-сайте», скорее всего, захотят прочитать вашу статью «Скорость загрузки 0,2 секунды: как мы создали самую быструю систему чата» , ссылка на которую находится внизу вашей целевой страницы.
Целевая страница Togeto — отличный тому пример:
Стратегия этих ребят просто блестящая. Вы можете увидеть, как они используют ссылки на каждую отдельную функцию, имеющую отношение к целевой странице, в качестве вторичных CTA, чтобы удерживать пользователей на вашем сайте.
Совет № 5: Обеспечьте молниеносную скорость страницыОдна из больших ошибок, которые я вижу при SEO-продвижении целевых страниц, заключается в том, что вы не обращаете внимания на скорость вашего сайта. Да, я знаю, что вы знаете, и поэтому я не собираюсь давать вам нестандартные советы. Я пытаюсь сказать, что мы часто адаптируем наши целевые страницы с дополнительными вспомогательными элементами, и эти элементы могут добавлять новые изображения, сценарии и стили, которые могут резко замедлить вашу страницу.
На самом деле недавно пришлось столкнуться с такой проблемой. На некоторых из наших важных целевых страниц мы представили виджет / модальное окно, где пользователи могли напрямую бронировать встречи с нами.
Все было отлично, пока я не проверил его с помощью PageSpeed Insights. Хотите верьте, хотите нет, но «простая» вставка календаря Hubspot увеличила время загрузки нашей страницы почти на 2 СЕКУНДЫ. Как SEO-специалист, вы знаете, как это было. Иногда, чтобы занять более высокое место, нужно чем-то жертвовать.
Поэтому мой лучший совет — отсканировать важные страницы и отметить самые тяжелые элементы, которые замедляют скорость загрузки. Отложенная загрузка изображений и видео, удаление ненужных скриптов (например, инструментов случайной аналитики) и отслеживание количества запросов, которые делает страница.
В конечном счете, в вашем коде вы будете загружать только стили, необходимые для этой конкретной страницы, но я знаю, что это нереально для всех, поэтому сосредоточьтесь на активах, которыми легче управлять, не будучи разработчиком.
И напоследок отличный совет. Существует множество инструментов для ускорения загрузки страниц, но «единственный истинный Бог», когда дело доходит до этого, — это PageSpeed Insights.
Вы получаете трафик от Google, и, следовательно, это должен быть единственный критерий, который вы используете для оценки скорости вашего сайта.
Недостатком PageSpeed Insights, однако, является то, что он не дает таких подробных объяснений, как некоторые другие инструменты.
Из-за этого я бы посоветовал вам использовать либо «PingDom Tools», либо «GTmetrix» — инструменты для повышения скорости страницы, которые я протестировал и рекомендую.
Совет № 6. Обеспечьте удобство для мобильных устройств для SEOТеперь широкие экраны облегчают дизайнерам самовыражение. Из-за этого они часто сначала разрабатывают веб-сайты на десктопе, а затем адаптируют его к мобильной версии. Дизайнер вашего сайта, вероятно, сделал то же самое.
Но это может быть потенциально плохо для SEO вашей целевой страницы. Если в макете вашего рабочего стола есть элементы, которые должны помочь SEO, а на мобильной странице нет (например, потому что разработчики не смогли их вместить), это может дать вам ложное представление о том, что SEO полностью завершено..jpg)
Помните, что когда робот Googlebot сканирует ваш веб-сайт, он фактически сканирует его мобильную версию. Как я уже говорил вам выше, это может быть проблематично, особенно с некоторыми плохо спланированными расширяемыми элементами JavaScript.
Если ваши разработчики ищут ярлык и просто удаляют некоторые разделы на мобильных устройствах, это означает, что вы не получаете от них никакой пользы для SEO. Из-за этого Google может рассматривать контент на вашей целевой странице как «тонкий» и, следовательно, решать, что вы не заслуживаете того, чтобы занимать первое место в результатах поиска.
Кроме того, если вы проверите свой Google Analytics, вы, вероятно, заметите, что непропорционально больше пользователей приходят с мобильных устройств по сравнению с настольными компьютерами. Из-за этого полное скрытие контента на мобильных устройствах может быть плохой идеей. Как это решить?
Лично я бы посоветовал использовать вертикальные «ползунки» и «переходы». Например, в большинстве случаев примеры разделов, которые мы упоминали в Совете № 2, могут быть оформлены в виде элементов с горизонтальной прокруткой (будь то с помощью стрелок влево и вправо или перетаскивания пальцем).
Таким образом, вы сохраните контент, доступный для изучения пользователями, и получите возможность ранжироваться выше.
Чтобы сделать аргумент еще более убедительным, помните, что все приведенные выше советы применимы к мобильным устройствам в десять раз чаще.
Посетители с мобильных телефонов обычно просматривают информацию, используя службу мобильной передачи данных, где Интернет может быть медленнее, чем Wi-Fi. В сочетании с более низкой вычислительной мощностью телефонов по сравнению с настольными компьютерами это может привести к плохому UX с длительным временем загрузки страницы.
И последнее, но не менее важное: меньший размер экрана на мобильных устройствах означает, что вам абсолютно необходимо выделить наиболее важные призывы к действию и выделить их с помощью контрастных цветов.
А вот отличный пример макета целевой страницы от Miro, который работает только на мобильных устройствах:
Он красиво течет, эффективно доставляет сообщение — и я почти уверен, что он конвертирует как сумасшедший.
На этом все! Это были мои 6 советов о том, как оптимизировать макет целевой страницы для SEO. Я искренне надеюсь, что они помогут вам занять более высокое место в рейтинге, более эффективно привлекать клиентов и, в конечном счете, развивать ваш бизнес.
Поскольку мы говорим об оптимизации страниц, я заметил, что многие компании не оптимизируют 2 из 3 из их самых важных страниц . Если вы не хотите быть одним из них, вот два наших руководства: «Как оптимизировать вашу страницу контактов» и «Как оптимизировать вашу страницу «О нас». Приятного чтения!
SEO дизайн и верстка сайта
следующая → ← предыдущая Дизайн и макет веб-сайта могут быть привлекательными, но если он не оптимизирован для поисковой оптимизации, он не может занять более высокие позиции на страницах результатов поисковых систем. Поисковые системы не могут интерпретировать контент так же, как мы и посетители; веб-страница может выглядеть для поисковой системы не так, как для вас. 1) Размещение ключевых словВы должны использовать целевые ключевые слова и фразы в нужных местах по всему сайту, т. е. в основном тексте, заголовках, заголовках, мета-описании, ссылках и т. д. Правильное размещение ключевых слов важно для каждой страницы, но это еще не все. важно на главной странице, так как это ворота и знакомство с остальными страницами вашего сайта. Кроме того, используйте правильные слова для ссылок; вместо слов «увидеть больше», «узнать больше» или «щелкнуть здесь» используйте слова, описывающие саму ссылку. 2) НавигацияНавигация должна быть удобной для пользователя, чтобы пользователи могли легко найти нужную информацию за меньшее время, т. е. переход от одного шага к другому должен быть простым и быстрым. Некоторые из полезных методов оптимизации вашего сайта:
3) URL-адреса и имена файловURL-адрес должен быть SEO-оптимизирован, чтобы поисковая система могла легко его идентифицировать. Существует несколько способов оптимизации URL-адреса, например;
И для оптимизации имен файлов вы можете добавить соответствующее ключевое слово в имена файлов загруженных элементов, например. 4) ИзображенияИзображения веб-сайтов являются важным аспектом SEO и должны быть оптимизированы для более быстрой загрузки и видимости в поисковых системах. Вот некоторые из методов оптимизации изображений;
5) Простота Посетители приходят на ваш сайт, чтобы выполнить какую-либо задачу или найти конкретную информацию, поэтому избегайте ненужных элементов дизайна, которые могут затруднить посетителям выполнение задачи или поиск информации. Оставить комментарий
|