SEO-верстка сайта: в чем ее суть и как ее грамотно сделать? Оптимизация верстки сайта это

на что обращаете внимание в первую очередь?

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

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

Что значит оптимизированная верстка

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

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

В этой публикации расскажу, за счет чего достигается оптимизация html-верстки.

Расположение html-элементов

Решающее значение имеет то, как далеко от начала html-страницы расположено основное содержимое, то есть тематический контент.

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

Хороший верстальщик знает, как этого добиться, используя свойство float для элементов и прописав соответствующие стили для каждого блока.

Визуально в браузере вы не увидите никаких отличий – блок с контентом будет находиться посередине между сайдбарами, но в html-коде блок будет идти гораздо раньше. Поисковый робот это оценит. Подумайте, что лучше: если поисковику сначала встретится масса ссылок бокового меню или значимый контент веб-сайта.

Вывод один – чем выше в html-коде полезный контент, тем лучше.

Концепция разделения

Наверняка вы слышали о концепции разделения структуры и представления документа. То есть html-файл отвечает только за структуру интернет-страницы, а оформление возложено на таблицы стилей.

Это корректная практика верстки, которой нужно следовать. Кроме того, это способ не загромождать страницу лишним кодом и не мешать поисковику увидеть самое важное, то есть контент.

С JavaScript следует поступать подобным образом, то есть выносить в отдельные файлы. Подключать js-файлы лучше в конце документа, прямо перед закрывающим тегом body. Это поможет ускорить загрузку страницы. Скорость загрузки страницы учитывается поисковиками при ранжировании.

Если у вас несколько css- или js-файлов, которые вы подключаете на одной веб-странице, попробуйте их объединить – это хороший способ увеличить скорость загрузки.

Важные теги SEO верстки сайта

На некоторые html-теги следует обратить особое внимание и использовать их с максимальной результативностью.

Самый значимый SEO-тег – это title. Содержит в себе название страницы и очень сильно влияет на ранжирование сайта. Должен содержать ключевые слова целевого запроса.

Keywords и Description – важные мета-теги. Не стоит ими пренебрегать. В Description лучше прописывать продуманное краткое описание для каждой страницы. Очень вероятно, что именно оно попадет в сниппет поисковой выдачи.

Keywords – ключевые слова. Сделайте его уникальным для каждой страницы.

Очень важные для верстки теги заголовков h2-H6. Использовать их нужно по назначению, для выделения заголовков и подзаголовков в теле статьи. h2 используйте только один раз на странице. Выделяйте с его помощью самое важное: название статьи, наименование товара, которому посвящена интернет-страница и т.д. Соблюдайте иерархию заголовков.

SEO-атрибуты

SEO верстка предполагает наличие атрибутов alt и title для картинок и ссылок.

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

Атрибут title позволяет добавить описание для ссылки или картинки, что учитывается поисковыми машинами и дает больше информации посетителю.

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

Корректность кода имеет значение

SEO верстка веб-сайта – это еще и валидная верстка, соответствующая W3C (World Wide Web Consortium) стандартам.

Объясним, почему это важно. Если в html-верстке есть ошибки или незакрытые теги, то поисковому роботу будет гораздо сложнее при ранжировании разбить контент на структурные части и добраться до сути. То, ради чего создавалась веб-страница может оказаться незамеченным из-за «поломанной» верстки. Результатом будут низкие позиции в выдаче.

К счастью проверить корректность верстки очень просто. В сети много W3C-валидаторов, которые покажут ошибки и предупреждения. Останется только исправить.

Кроссбраузерность и адаптивность

Поисковые машины все большее внимание обращают на поведенческий фактор. Если посетитель не сможет просматривать веб-сайт в своем любимом браузере (это может быть и старенький IE) или с мобильного устройства, то показатель отказов резко возрастает.

Вывод один – веб-сайт должен быть адаптивным и кроссбраузерным.

В сети можно найти сервисы, позволяющие тестировать отображение веб-страниц в разных браузерах. Некоторые из них специализируются только на версиях Internet Explorer. Практика показывает, что именно с ним возникает большинство проблем.

Адаптивность тоже несложно протестировать. Один из самых простых способов – это воспользоваться пунктом «Разработка» браузера Firefox. Выбрать подпункт «Адаптивный дизайн» и смотреть, как выглядит верстка на разных устройствах.

Важные рекомендации

Делайте верстку более структурированной и простой, не загромождайте лишними блоками.
Расположите основной контент как можно ближе к началу html-страницы.
Стили и скрипты размещайте в отдельных подключаемых файлах.
Используйте SEO-теги по назначению, повышая релевантность интернет-страницы.
Оптимизируйте картинки и ссылки, используя атрибуты alt и title.
Выделяйте гиперссылки нижним подчеркиванием и цветом, отличным от цвета основного содержимого.
Оптимизируйте css-код и изображения, стараясь уменьшить их вес – это нужно для быстрой загрузки веб-страниц.
Помните об удобстве пользователя. Сделайте так, чтобы просмотр вашего сайта с любого устройства и любым браузером был приятным.
Следите за корректностью верстки, не оставляйте незакрытых html-тегов, соблюдайте структуру и иерархию.

Итоговый совет будет таким: помните, проще учесть все детали сразу, чем переделывать в будущем.

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

На этой ноте буду заканчивать.

Делитесь постом с друзьями.

Подписывайтесь на обновления блога и будьте в курсе самых актуальных тем.

www.lf-digital.com

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-вестку.

Получайте бесплатные уроки и фишки по интернет-маркетингу

convertmonster.ru

Грамотная SEO-верстка сайта: описание, примеры, советы специалистов

Верстка html-кода интернет-страницы сайта с учетом преимущественного размещения блоков с текстовым наполнением как можно ближе к началу кода – это и есть SEO-верстка. При этом, такое построение кода по сути не отобразится на виде самой страницы: сайт может смотреться совершенно одинаково при разной верстке страниц. Именно за счет размещения специального контента ближе к началу html-кода поисковые машины воспринимают его как более релевантный.

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

За качественное наполнение сайта отвечает SEO-копирайтер. Но за правильное размещение на страницах сайта блоков с контентом ответственность несет SEO-верстальщик.

Верстка с SEO оптимизацией

Если сравнить два сайта, где на одном важная информация начинается на 25-й строке html-кода, а на другом - на 325-й, какой из них, по логике, будет лучше подавать информацию? Да, навороченный ресурс вполне может быть интересен пользователю, но первые пару секунд. Но затем человек начинает просматривать текст в поисках именно той информации, которая ему нужна. Лучше всего это видно на лендингах. Вот и поисковые машины не любят сотни страниц кода, которые нужно пройти, чтоб добраться до текстового наполнения. То есть чем дальше важный и полезный контент находится от начала страницы, тем менее он интересен поисковому роботу. То есть наиболее актуальная информация должна находиться как можно ближе к началу, иначе получается, что она попросту спрятана для поисковиков.

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

Примеры SEО-верстки

Рассмотрим все сказанное на практике. Так, для примера используем немного простого html-кода:

Итак, чтоб наша верстка смотрелась более дружелюбно с точки зрения SEO, переместим блок content по ближе к тегу body. Получился такой вот простой пример SEO-верстки:

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

SEО-верстальщик и работа с элементами сайта

От работы SEO-верстальщика зависит очень многое. Если он не разместил в коде страницы нужные SEO-элементы, то оптимизация всего ресурса может оказаться не эффективной. Главный и самый первый элемент любой страницы - title страницы сайта. Он имеет важное значение для SEO. О нем забыть, конечно же, практически невозможно. Кроме того, не стоит упускать мета-теги meta keywords, а также meta description. Значение таких тегов часто недооценивается, многие и вовсе о них забывают. Обязательная часть html-страницы – это еще и теги h2, h3, h4. Если оформить заголовок материала или название чего-либо тегом h2, то это укажет поисковому роботу на первоочередную важность именно этого элементами. При этом теги h2, h3, h4 нужно уметь правильно использовать, ведь, как показывает практика, зачастую их применяют некорректно.

Оптимизация сайта включает и SEO оптимизацию изображений по конкретным запросам. Если верно применять атрибут ALT, это поможет изображениям попасть на первые позиции в Яндекс.Картинках либо Google Картинках. Не менее важен и атрибут title для ссылок. Также желательно, чтобы при верстке сайта ссылки имели нижнее подчеркивание.

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

SEO-верстка и валидность

Главное, что надо помнить - SEO-верстка сайта должна быть кроссбраузерной для одинакового отображения элементов у всех пользователей, даже у тех, кто до сих пор использует Internet Explorer 6.

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

Не все считают валидность важной для SEO-оптимизации интернет-ресурса, но верстка с ошибками воспринимается так же, как и текст с помарками. Лучше изначально делать грамотную SEO-верстку.

Советы по SEO-вестке

Верстку желательно оптимизировать, удаляя лишние блоки.
Важно оптимизировать html-код страниц.
Таблицы стилей css тоже важно оптимизировать и желательно выделить их в файл или даже в отдельную папку.
На сайте полезно разместить навигацию «хлебные крошки».
Не стоит слишком часто применять теги B и STRONG. Лучше применять только тег STRONG, и то в самом тексте, для других задач лучше использовать выделение при помощи стилей.
Тег h2 лучше использовать для заголовков и названий. Теги h3, h4 лучше не использовать при верстке, а применять в контенте.
Ссылки на сайте лучше делать с подчеркиванием (underline) и выделять их цветом.
Желательно делать весь контент сразу открытым, чтобы пользователю не довелось вручную активировать элементы для отображения частей контента.
Нежелательно делать страницы сайта очень длинными. Они не только плохо отображаются и долго грузятся, но и неохотно индексируются поисковыми машинами. А что говорить о пользователях, которые пролистав 5 раз, так и не увидят конец страницы. Они, скорее всего, покинут сайт и больше никогда не зайдут.
И не забывайте делать элементы сайта как можно проще. Ведь чем сложнее они, тем больше ошибок можно допустить. И помните, что контент на сайте – это самое важное. Ведь именно для контента и создана вся страница с точки зрения SEO-оптимизации.

pgdv.ru

Виды верстки. Внутренняя оптимизация сайта

Данная тема важна как для веб-дизайнеров, так и оптимизаторов. Даже можно сравнить или провести параллель, между типом верстки и внутренней оптимизации. Чем лучше и качественней будет осуществлена верстка сайта (шаблон), соответственно сайт будет считаться более оптимизированным. Значит, он может рассчитывать на более высокие места в поисковой выдаче. Но и не стоит забывать об контенте. Для успешного продвижения, он должен быть уникальный.

Шаблоном сайта является набор элементов повторяющихся из страницы в страницу. Практически любой сайт, если это не одностаничник содержит шаблон и контент.

Виды верстки

Исторически так сложилось, что виды верстки делят на три типа:

Фреймовая
Табличная
Контейнерная

Фреймовая верстка

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

Пример:

Табличная

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

Табличная верстка использовалась примерно лет 10 назад и с приходом контейнерной (div) верстки ушла в прошлое.

Сейчас содержимое вложенных таблиц очень плохо индексируются поисковыми машинами и такие сайты очень тяжело продвигать. Использовать такой метод верстки не следует. Применять только по необходимости (по назначению).

Пример:

<table>

<tr>

</tr>

</table>

Контейнерная

Современный тип верстки, который пришел после табличной. Контейнерный тип начинал с версии HTML 4 и на данный момент имеет HTML 5 версию.

Сейчас, в основном, все современные сайты имеют версию HTML 5. Сайт созданный с использованный контейнерной верстки, может быть как жесткий (в пикселях) так и резиновый (в процентах). В отличие от табличной верстки, там только жесткая верстка.

Пример:

В версии HTML 5 добавлено множество новых тегов. Пример некоторых из них:

<header>Шапка</header>

<nav>Основное меню</nav >

<footer>Подвал</footer >

Так же стоит не забыть добавить в плюсы контейнерной верстки:

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

В основном все современные сайты имеют резиновую (процентную) верстку и адаптивную на всех устройствах.

Использование стилей и скриптов

Стили

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

Пример:

<table border="1" > - оформление атрибутами тегов.

<div> - оформление стилями

<div> - оформление классами.

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

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

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

Технический аспект внутренней оптимизации, поможет подняться по поисковой системе.

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

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

Возможно вам так же будет интересно:

Если я Вам помог - оставьте свой отзыв и поделитесь сайтом с друзьями в социальных сетях!

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

Как я еще могу помочь блогу?

alexfine.ru

Несколько правил грамотной верстки, которую «любят» поисковые системы

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

Что такое SEO-вёрстка?
В чём особенность SEO-вёрстки?
Вёрстка должна быть кроссбраузерной?
Какие теги полезны для SEO?

Итак, начнем. Первое — что такое seo-верстка (далее — просто верстка)?

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

Второе — в чём особенность вёрстки?

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

Третье, — верстка должна быть кроссбраузерной?

Ответ однозначен — да. Самый лучшее — кроссбраузерность IE 6+, хотя и сейчас это не так важно, т.к. все переходят на новые браузеры. Т.к. Internet Explorer самый проблемный, то остальные браузеры можно и не рассматривать. Будьте уверены, если кроссбраузерность выше ie 7, то она в других браузерах будет выглядеть хорошо (за исключением использования префиксов webkit-, moz- в css).

Далее — какие теги полезны для SEO?

Заголовок должен быть или h2 или h3, подзаголовки должны быть не B или STRONG, а h4.
У картинок обязателен тег ALT.
Желательно использовать мета теги: meta name=«keywords», meta name=«description».
Все стили лучше помещайте в отдельный файл (еще лучше, чтобы файл был в папке).
Скрипты js лучше подгружать ближе к центру или концу страницы. (Ещё можно задать в jQuery, чтоб активировались только при полной загрузке).
Не стоит увлекаться на страницах тегами B или STRONG. (для поисковиков strong важнее b)

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

habr.com

Внутренняя оптимизация сайта. Азы - Web-parsing

Опубликовал Рысев Игорь в разделе Оптимизация. (06 мая 2015)

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

Основными факторами в ранжировании стали:

интернет-маркетинг;
внутренняя оптимизация сайта;
наполнение сайта качественной, достоверной и полезной информацией.

Главной задачей поискового робота является поиск основного контента на сайте в том коде, что пишут верстальщики. Чем быстрее он найден нужный текст, чем качественнее текст и код сайта будет сверстан – тем выше будет качество сайта и тем меньше будет шанс того, что поисковой робот не найдет вашего текста.

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

Скрипты и стили

Выносим все скрипты и стили из кода сайта в соответствующие файлы *.css и *.js. Также очень стараемся, если это возможно, перенести их в конец тела сайта – к закрывающему тегу «/body».

Также, если у вас много файлов *.js, то постарайтесь убавить их количество объединением нескольких файлов в один, сделать сжатие файлов и запустить их асинхронную загрузку с сервера. Чем меньше запросов к серверу, тем быстрее загрузится сайт и меньше времени будет ждать поисковый робот, чтобы начать его читать.

Тип верстки

Сегодня я выделяю 2 основных вида верстки: табличная, блочная и 1 подтип - семантическая разметка.

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

Если у вас блочная верстка и нет семантической разметки – добавьте ее.

Если у вас блочная верстка с html5–разметкой, проверьте грамотность разметки. Мне весьма часто попадаются проекты, которые в коде начинаются со строчки: «<!DOCTYPE html>», но никаких семантических тегов в документе нет – это ошибка. Как получается со стороны поискового робота:

Заходит на сайт.
Видит объявление html5 стандарта семантической верстки.
Бежит искать размеченные спец. тегами блоки, чтобы для себя понять структуру сайта.
Возвращается в начало документа, злой и обиженный, не найдя объявленной информации.
Начинает чесать весь код подряд. И нет гарантии того, что он возьмёт за основную информацию то, что содержится в той же боковой панели, к примеру. Мы же ему не сказали, где она находится.

Размещение основной информации в верстке сайта

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

Зато в верстке этот блок можно расположить там, где вам нужно(благодаря css-стилям), а именно – как можно выше к началу документа. За этим и нужно будет проследить.

Обязательные поля

Нужно проследить, чтобы были заполнены правильно все поля: тайтл (title), описание(description), ключи(keywords), основной заголовок страницы (h2). Заполненные правильно указанные поля повышают показатель качества вашего сайта. Проследите, чтобы на всём вашем сайте не встречалось ни 1 дубля h2, title, description. Это важно.

Перелинковка и сайтмап

Продумайте обязательно структуру вашего сайта. Не должно быть «мертвых» страниц (к которым нет доступа с других страниц сайта), страниц, которые находятся в более чем 3-х кликах от главной страницы.

Обязательно сделайте карту сайта – страницу, содержащую в виде структуры древа все ваши основные странички. Сделайте файл sitemap.xml, укажите его в robots.txt и передайте ссылку яндексу и гуглу через сервисы вебмастеров.

Постарайтесь сделать так, чтобы к любой из ваших страничек можно было попасть хотя бы из 2-х мест. Например, сделайте блок с перечнем схожих статей товаров или разделов.

Каждой внешней ссылке проставьте тег «rel=nofollow» , который запретит поисковому роботу ее засчитывать и отдавать часть веса вашей страницы.

Верстка контента

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

На каждом втором сайте наталкиваюсь на верстку списков параграфами, а пунктов списка цифрами, звердочками или тире.

Такая верстка совсем никуда не годится.

ЗЫ: не забывайте добавлять свои уникальные тексты в яндекс вебмастер, он это любит.

Закрытие ссылок в nofollow

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

Если у вас основное меню дублируется в футере сайта - закройте в nofollow ссылки на страницы «о компании», «контакты», «карту сайта», и все подобные, чтобы не распределять вес сайта на все эти страницы. Тем самым вес остальных страниц увеличится.

Проверьте зеркала сайта

Читать статью про настройку зеркал сайта.

Настройте микроразметку на сайте

Заказать микроразметку

Адаптируйте свой сайт под мобильные устройства

Заказать адаптацию сайта

Бесплатный аудит сайта

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

Оптимизация графического контента страниц сайта для адаптивной верстки

Последнее обновление: 2018-02-22.

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

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

Мобильный контент

Чтобы до конца осознать полноту масштаба "трагедии" необходимо обратиться к такому непопулярному в среде маркетологов отчёту в Яндекс.Метрике как "Ориентация экрана". Строится этот отчёт только как вспомогательный к основным отчётам через "Группировки".

Так вот, если построить отчёт "Ориентация экрана" за последние 2-3 месяца на любом коммерческом сайте, то можно увидеть такую картину, где доля трафика portrait (портретная, вертикальная ориентация экрана) почти догнала долю landscape (ландшафтная, пейзажная, альбомная или горизонтальная ориентация экрана). Ниже, на графике №1 видно, что 36620 пользователей просмотрели сайт в горизонтальной ориентации экрана (landscape), а 33394 пользователя за этот же промежуток времени просмотрели сайт в вертикальной ориентации экрана (portrait).

Таблица №1: соотношение устройств с горизонтальной ориентацией экрана и вертикальной.

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

Таблица №2: ориентация экрана и устройства.

Но на самом деле это не так! Более 60% пользователей планшетов используют вертикальную ориентацию экрана, которая при адаптивной вёрстке выглядит почти так же как на мобильном телефоне, но чуть крупнее, а это значит, что мобильные устройства и планшеты по типу потребления контента многими пользователями воспринимаются одинаково и представляют собой отдельную, самостоятельную эко-систему, отличную от стационарных типов устройств, ноутбуков и десктопов.

Совместная доля планшетов и мобильных телефонов в общей доле трафика по некоторым, наблюдаемым мною проектам коммерческой тематики весной 2016 года перевалила за 50% и продолжила рост, а по данным докладчиков конференции YaC/m 2016, проходившей в Москве 29 июня, рост пользователей, посещающих интернет через ПК замедлился, а то и вовсе остановился!

Что это значит?

Это значит, что сегодня просто иметь адаптивную вёрстку или мобильную версию сайта уже не достаточно, эту статью, конкретно в моём случае пользователи будут читать вместе с вами в двух типах ориентации экрана: вертикально и горизонтально, а пропорция этих пользователей будет примерно 50/50, так показывает Яндекс.Метрика по предыдущим публикациям. Ещё это значит, что восприятие информации с таблицы №1 и таблицы №2 будет разным. Не верите? Если вы сейчас читаете этот материал со стационарного компьютера, то посмотрите на эти таблицы с мобильника или планшета, а если вы сейчас читаете статью с мобильного устройства, то посмотрите как эти две таблицы будут вами восприняты со стационарного компьютера.

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

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

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

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

Если уж совсем шрифт на картинке получается гигантским, то можно уменьшить размер картинки, сохранив пропорции сторон, на мобильном устройстве пользователь не заметит ни какой разницы, а пользователь десктопа уже не будет испытывать дискомфорт от слишком больших букв и цифр таблицы, сравните сами как отображается Таблица №2.2 и Таблица №2.3.

Разницу заметят только владельцы десктопов и ноутбуков, Таблица №2.3 у них будет меньше, чем Таблица №2.2, а у владельцев мобильных устройств не будет ни какой разницы, т.е. мы избавляемся от гигантизма шрифтов в десктопной версии, получаем читаемый вариант в мобильной версии и бонусом выигрывает 6,2 Кб веса. Таблица №2.3 легче чем Таблица №2.2 на 6,2 Кб. И не нужно здесь смеяться, эпоха мобильного контента и оптимизация страниц сайта возвращает нас обратно в 90-е, когда пользователи сидели на dial-up линиях и скорость интернет соединений была очень маленькая. В сети полно статей про прямую зависимость веса загружаемых страниц, скорости загрузки страниц, конверсий, поведенческих факторов и SEO.

В итоге выиграет тот, у кого контент интересный и оптимизированный, во всех смыслах.

Выводы

Какие выводы из всего этого можно сделать?

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

SEO-верстка сайта: в чем ее суть и как ее грамотно сделать? Оптимизация верстки сайта это

на что обращаете внимание в первую очередь?

Что значит оптимизированная верстка

Расположение html-элементов

Концепция разделения

Важные теги SEO верстки сайта

SEO-атрибуты

Корректность кода имеет значение

Кроссбраузерность и адаптивность

Важные рекомендации

SEO-верстка сайта верстальщику на заметку

SEO оптимизированная верстка

СЕО-верстка — примеры

Верстальщик и СЕО-верстка элементов сайта

Валидная SEO-верстка

Полезные советы по СЕО верстке

Получайте бесплатные уроки и фишки по интернет-маркетингу

Грамотная SEO-верстка сайта: описание, примеры, советы специалистов

Верстка с SEO оптимизацией

Примеры SEО-верстки

SEО-верстальщик и работа с элементами сайта

SEO-верстка и валидность

Советы по SEO-вестке

Виды верстки. Внутренняя оптимизация сайта

Виды верстки

Фреймовая верстка

Табличная

Контейнерная

Использование стилей и скриптов

Стили

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

Несколько правил грамотной верстки, которую «любят» поисковые системы

Внутренняя оптимизация сайта. Азы - Web-parsing

Скрипты и стили

Тип верстки

Размещение основной информации в верстке сайта

Обязательные поля

Перелинковка и сайтмап

Верстка контента

Закрытие ссылок в nofollow

Проверьте зеркала сайта

Настройте микроразметку на сайте

Адаптируйте свой сайт под мобильные устройства

Бесплатный аудит сайта

Комментарии

Добавить комментарий

Оптимизация графического контента страниц сайта для адаптивной верстки

Мобильный контент

Что это значит?

Выводы

Рекомендация №1

Рекомендация №2

Рекомендация №3