Оптимизированные шаблоны WordPress для высокой скорости. Оптимизация темы (шаблона) WordPress для снижения его нагрузки на сервер хостинга, плагин WP Tuner и число запросов к БД

Теперь можно покопаться в шаблоне (находится в /wp-content/themes/имя_шаблона/).

Попробуем убрать лишние запросы к базе данных при загрузке страниц вашего блога. Дело в том, что разработчики темы оформления для WordPress делают ее универсальной и подходящей, естественно, к любому блогу, с условием, что этот блог работает на движке WordPress. Поэтому, например, чтобы выводить на страницах вашего блога в шапке (верхняя часть шаблона страницы) название блога, необходимо в файле header.php вашей темы оформления прописать код на языке PHP, который запросит это название из базы данных и затем уже вставит его в код страницы.

Название Блога

Если описание блога определено, и не собираетесь менять в ближайшее время, то:

Описание вашего блога

Вроде всё, с файлом header.php закончили. Ах, да, я делал немного проще: Зашёл к себе на сайт (когда ещё ничего не оптимизировал в шаблоне), посмотрел исходный код этой HTML страницы, скопировал шапку и вставил в файл header.php. Вышло гораздо быстрее

  • удалить строку с информацией о номере установленной версии WordPress
    . Она не несет никакой полезной нагрузки, и более того, является опасной, т.к. некоторые варианты взлома применимы только к определенным версиям WordPress, а из этой строки как раз очень удобно узнавать текущую версию вашего движка. Выглядит эта строка обычно так:
  • заменить URL до иконки favicon.ico на статический. Вы не знаете для чего нужна иконка под названием favicon.ico ? Она будет отображаться, например, в поисковой выдаче слева от названия вашего сайта или же в браузерах (в адресной строке или перед названием страницы на вкладках), при открытии страниц вашего блога. У моего блога это иконка желтой лампочки. Если у вас еще нет favicon.ico , то обязательно создайте ее и пропишите путь к ней файле header.php . Она придаст вашему блогу индивидуальность и узнаваемость. В оригинальном файле header.php строка с заданием пути до favicon.ico может выглядеть примерно так:
  • заменить URL до на статический. В коде файла header.php это строка:
    1 » />

А откуда взять все эти статические пути, которые мы должны прописать заместо кода PHP? Есть довольно простой способ. Вам нужно всего лишь открыть любую страницу вашего блога в браузере и посмотреть ее исходный код. Для этого, щелкаете правой кнопкой мыши по странице в любом браузере и выбираете из контекстного меню что-то вроде «Исходный код страницы
» или «Исходный код», в зависимости от того, в каком именно браузере открыта эта страницы. Теперь ищите там нужные строки и копируете пути к файлу CSS, к фиду и т.п.

Дело в том, что при создании страницы, PHP код интерпретируется в реальные статичные URL. Вот именно их мы скопируем по очереди и вставим в файл header.php вместо участков кода. Вот так выглядел блог кода до преобразования:

1 » />
2
3 /favicon.ico» />
4 » type= «text/css» media= «screen» />

Их нужно будет заменить, соответственно, на название и описание вашего блога. Если у вас вдруг после сохранения файла header.php вместо русских букв вылезут кракозябры, то откройте файл повторно на редактирование в Notepad++, выберите из верхнего меню пункт «Кодировка» — «Преобразовать в UTF-8 без BOM», а затем опять сохраните файл.

Если у вас еще в файле header.php имеет описание меню, то там можно вручную прописать ссылку на главную страницу. В оригинале эта строка может выглядеть так:

ее надо будет заменить на:

Теперь перейдем к файлу footer.php , который так же должен находиться в папке с вашей темой оформления по адресу /wp-content/themes/название_вашей_темы_оформления. В нем можно заменить строку выводящую информацию о том, что все права защищены, примерно такого вида:

Кроме того, что в этом случае убираются лишние запросы к базе данных
, здесь еще и создается ссылка с нужными ключевыми словами, которая будет вести на главную страницу со всех страниц блога (Внутренняя оптимизация сайта). Ну и для повышения значимости этих ключевых слов, они заключены в тег акцентирования H3 (Теги акцентирования (H1 -H6, STRONG, EM) – улучшаем внутреннюю оптимизацию сайта).

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

Остальные файлы редактируем также как и header.php …

Ещё парочка советов:
У вас сателлит и вам не нужно комментирование на сайте? — Отключайте комменты в админке, и удалите всё из файла comments.php .
У вас сателлит? – значит по любому у вас есть облако меток – вместо плагина сохраните его как html код, и вставьте в страницу.
У вас сателлит и вы не будете больше добавлять новые категории? – также сохраните их как html и вставьте вместо виджета!
В файле single.php у многих шаблонов название новости – ссылка на эту же новость. Зачем же это? – Убираем! Ещё минус один запрос!

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

Настройка ЧПУ

Изначально url-адреса CMS WordPress имеют весьма непонятное для нас содержимое.

Как видим, из данного адреса невозможно понять, что находится на странице. Так вот, такие адреса следует заменить на ЧПУ (человекоподобные урлы), не только чтобы создать ясную картину посетителям о содержимом на странице, но и чтобы понравится дяде Яндексу. Именно по рекомендациям поисковика многие вебмастеры и прибегают к установке ЧПУ.

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


После этого, мы можем наблюдать на блоге человеческие url-адреса, которые и смотрятся красивее и которые помимо всего содержат ключевое слово (title записи), что немаловажно:

Дубли страниц

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

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

Нормальный файл роботс выглядит следующим образом (указываю основные моменты, которые мы закрыли от индекса, в т.ч. и дубли):

Как вы можете видеть, мы закрываем необходимые нам элементы посредством директивы Disallow
. Тоесть, к примеру, я захотел закрыть тэги от индексации. Для этого я написал — Disallow: /tag
. Точно также закрываются все остальные элементы: плагины, темы, категории (Disallow: /category). Примечание:
после двоеточия всех директив необходимо ставить пробел.

Важно отметить и директиву Allow
. Она используется для того, чтобы наоборот разрешить индексацию элемента поисковой машиной. Тоесть, к примеру, если я хочу чтобы картинки моего блога индексировались (находятся в папке wp-content), но при этом я не хочу, чтобы остальное содержимое папки wp-content (плагины, темы и т.п.) индексировалось, я прописываю в файле robots.txt следующее:

Первым делом создайте у себя на компьютере обычный документ формата .txt
при помощи программы Блокнот, задав ему имя robots
. Дальше скачайте мной предложенный файл robots.txt, и по необходимости отрегулируйте его по своим прихотям. Скачать вариант вышеуказанного варианта роботса можете с Яндекс.Диска . Загруженный файл разместите в папку public_html
своего блога..

Оптимизация страниц

Очень важно, чтобы каждая страница блога имела заголовок с ключевым запросом, прописанные ключи и качественное описание, иными словами title
, keywords
и description
. Вспомните, мы ранее устанавливали на блог плагин All In One SEO Pack.
Так вот, именно используя его мы сможем задать эти параметры каждой странице блога.

Я на примере создам title, keywords, и description для одной записи своего блога (нужно же создавать абсолютно для всех). Допустим, я написал пост, посвященный обзору плагинов для CMS WordPress. Под формой вставки записи на блог будет расположен блок All In One SEO Pack, в котором я и задам необходимые параметры:


Описания к записям блога должны вкратце описывать страницу и выглядеть разумно.

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

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

Оптимизация шаблона WordPress

Кроссбраузерность.


Не каждому понятно это слово, но оно обозначает как правильное отображение WordPress (темы) в разных браузерах (с недавнего времени Яндекс, а также Mozilla FireFox, Opera, Google Chrome). В зависимости от среды, некоторые элементы дизайна, в которой мы его открываем могут или изменить свой вид, место положение, либо вообще исчезнуть.

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

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

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

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

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

Буфер вывода.
Во время открытия страницы для пользователей, сначала по очереди элементы дизайна загружаются, после различные заголовки и последним делом контент. Скорость сайта зависеть будет не только от скорости соединения с интернетом, хостинга и движка, но и от степени оптимизации WordPress шаблона. Для изменения такой очередности, мы назначим тот самый порядок, который начинается с контента и CSS файла. Применять будем мы специальную функцию, которую размещаем после закрывающего тега в файле header.php. Вот она:

Перед тем как внести изменения не нужно сделать резервную копию.

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

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

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

Существует несколько правил, которых надо придерживаться.

  • Первое, не используйте фото ширина которых больше самого размера контента.
  • Второе, вес их должен быть минимален и измеряться НЕ в мегабайтах, а в килобайтах или байтах.
  • Третье, расширение файлов желательно быть должно «gif» или «png».
  • Четвёртое, прогоните картинку перед его размещением через специально предназначенное программное обеспечение «Smush.it».

Достаточно сделать щелчок по вкладке «Select Files and Smush» и «Uploader», выбрать нужную картинку и кликнуть «Открыть». Далее скачиваем ее и размещаем.

Вы так же можете применять плагин «Wp-Smush.it», который делать будет сжатие в автоматическом режиме.

В принципе всё, надеюсь, я ясно и понятно рассказал каким образом оптимизировать шаблон WordPress
и не возникнет у вас вопросов по этому поводу. Спасибо за внимание!

Заметка:
активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

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

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

Правильно сделанный (свёрстанный) шаблон сайта:

  • Может значительно ускорить загрузку страниц (особенно, если до этого всё было запущенно);
  • Упростит попадание ваших страниц в ТОП поисковой выдачи (не только из-за быстрой загрузки);
  • Увеличит ваши шансы на полную кроссбраузерность, то есть одинаково правильное отображение сайта во всех браузерах;
  • Даст небольшую гарантию, что по истечении множества лет вам не придётся переделывать ваши сайты под новые браузеры (или под новые версии старых браузеров).

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

Часть 1. Соблюдайте HTML и CSS стандарты

На всякий случай скажу, что кроме HTML и CSS мы ещё можем оптимизировать JS и PHP части наших сайтов, которые являются более ресурсоёмкими и значительнее замедляют скорость загрузки страниц. Однако кроме скорости загрузки страниц, JS и PHP составляющие никак не влияют на продвижение сайта (лишь бы не ломали его), в отличие от HTML разметки, то есть шаблона сайта.

1.1 Всегда закрывайте теги.

В том числе те, которые закрывать не обязательно, даже если вы ненавистник XHTML стандарта, лучше придерживаться этого правила. Пример:

  • Пункт списка
  • Пункт списка
  • Пункт списка

Каждый тег li закрыт, хотя это и не обязательно.

1.2 Соблюдайте правильную вложенность тегов.

По принципу: первым открылся — последним закрылся. Пример как не правильно:

текст

Как правильно:

текст

1.3 Никогда не описывайте CSS и JS внутри HTML макета и атрибутов тегов.

Никогда! Другими словами, забудьте о существовании атрибута style
и тега style
:

текст

Описывайте все стили в отдельном файле.css

Можете использовать атрибут style, только динамически отрисовывая его с помощью яваскрипта по какому-нибудь действию. Например, если по клику на картинку, нужно изменить цвет всего текста на странице, то только в таком случае можете динамически создать атрибут style с нужными значениями для нужного тега (в данном примере – для body). Почему? Потому что поисковые роботы его всё равно не увидят и никто (в том числе пользователи) не загрузят лишний код, так как действие происходит уже после полной загрузки страницы.

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

Всё то же самое относиться и к JS, весь JS-код должен быть в отдельном файле
, а не внутри вашего макета или ещё хуже — среди атрибутов тегов.

1.4 Забудьте о Caps Lock и заглавных буквах.

Пишите все теги, атрибуты и их значение строчными (маленькими) буквами, это же касается и таблиц стилей CSS.

Почти всё описанное выше есть в официальной спецификации HTML и CSS и относится к валидности документа
.

Таким образом, я должен отметить, что придерживаясь W3C стандартов, то есть, соблюдая валидность документа — вы получаете следующие SEO преимущества:

  • Чистый код, а, следовательно, и дополнительное доверие поисковых систем к вашему сайту;
  • Ускоренная загрузка страниц, так как браузеру не приходится тратить время на отладку невалидного документа.

Однако не стоит зацикливаться на валидности, вы должны стараться максимально её придерживаться, однако не в ущерб всему остальному (времени, функциональности и тд.).

Часть 2. Ускоряем загрузку страниц – один из факторов ранжирования

2.1 Указывайте настоящие размеры картинок.

Здесь суть в двух вещах:

  • Обязательно указывайте атрибуты width
    и height
    для тега img
    :
    Это ускорит загрузку изображений, так как браузер заранее будет знать, какой размер нужно отобразить.
  • Обязательно вставляйте картинку того же самого размера, который указали в атрибутах.

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

2.2 Используйте CSS3 вместо JS.

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

Сегодня множество красивых и интересных эффектов можно достичь только благодаря использованию свойств CSS3 (например, transition, box-shadow, border-radius, opacity, transform, background-size) и умелой .

Всё сказанное выше можно подытожить одной фразой: везде, где вы можете (подозреваете как) заменить JS на CSS3, используйте CSS3 не раздумывая!
Для поиска подобных фрагментов советую вам изучить новые возможности CSS3.

2.3 Меньше Photoshop – больше CSS 3.

Этот девиз уже давно используют многие вебмастера. Вы можете создавать красивые кнопки и элементы дизайна с плавным градиентом, сглаженными углами, тенями (внутренними и внешними) и красивым текстом сверху благодаря одному лишь CSS. Везде, где можно заменить графические элементы дизайна на CSS код – делайте это! Пример:

Или моя кнопка «Подписаться!» в конце каждой статьи. Кстати, не забываем подписаться на оповещения о новых полезных статьях, никакого спама или рекламы.

Помимо перечисленных выше свойств CSS3 вам также доступен формат описания цвета RGBA.

Для создания кроссбраузерного градиента на CSS вы можете использовать бесплатные сервисы, например этот colorzilla.com .

2.4 Объединяйте изображения в CSS спрайты.

Те изображения, которые мы не смогли нарисовать с помощью CSS 3, нужно обязательно объединить в одно единственное (в идеале). Это нужно для того, чтобы сократить количество запросов к серверу при загрузке страницы. Этот пункт может значительно снизить нагрузку на ваш веб-сервер, а заодно и ускорить загрузку страниц, сразу 2 зайца!

Чтобы лучше понять, о чём речь, просто взгляните на мой CSS спрайт:

Неплохо, не правда ли? Фоновая картинка одна на все элементы, мы только двигаем её и подставляем в фон определённого элемента нужную часть картинки благодаря свойству background-position, например, так:

#subs,#left,.mail,.rss,.vk{background:url(/images/1.png) no-repeat}
#subs{background-position: -28px -120px;}
#left{background-position: -35px -20px;}
.mail{background-position: -43px -50px;}
.rss{background-position: -12px -8px;}
.vk{background-position: -34px -56px;}

Лучше всего будет составить спрайт вручную, с помощью Фотошопа, но это может показаться вам достаточно сложным занятием, поэтому вы можете использовать бесплатные сервисы, которые всё сделают за вас, в том числе даже напишут за вас CSS-код. Мне большего всех нравится сервис SpriteMe . Но я не устану повторять: всегда всё лучше делать вручную, в частности, так спрайт может получиться значительно компактней (по размерам и, следовательно, по весу), а значит более эффективным.

2.5 Размещайте JS файлы правильно.

Все подключаемые вашим сайтом JS файлы должны находится как можно ниже по коду, не нужно подключать их внутри «головы» сайта (между тегами head) – это значительно замедляет загрузку страниц. Самым лучшим вариантом будет подключить файлы JS перед закрывающимся тегом body, то есть в самом низу страницы, ниже уже некуда.

И ещё один очень полезный совет: в идеале все ваши файлы JS нужно объединить в один единственный, то есть вырезаем (Ctrl + X) код из всех файлов и копируем его в один, чтобы в итоге у вас внизу, перед закрывающимся тегом body подключался один единственный файл:

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

2.6 Размещайте CSS файлы правильно.

Файл CSS, который, кстати говоря, тоже должен быть одним единственным (по тем же причинам), нужно размещать в коде наоборот, как можно выше!

Но не нужно размещать его выше тега title, он самый главный для SEO и лучше его оставить в самом верху. Лично я подключаю CSS файл сразу после тега title и всех мета-тегов, а уже после него можно подключить, например, фавикон (иконка сайта во вкладке браузера) и тд.

Часть 3. Правильная SEO вёрстка макета

3.1 Код навигации сайта.

Вся навигация сайта (меню, хлебные крошки, списки производителей в интернет-магазинах и тд.) должны быть реализованы с помощью ненумерованных списков (теги ul, li), а не с помощью тегов div и a.

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

3.1.1 Тонкости горизонтального меню.

Если вам необходимо реализовать горизонтальное меню, то я хочу вам дать 2 бесплатных совета:

  • Никогда не используйте для этого CSS-свойство float (плавающий, вызывает обтекание его другими элементами), вместо него используйте следующий код: ul.menu li{display:inline-block;}
  • В коде не нужно начинать каждый новый пункт меню с новой строки, как в примере выше. Лучше написать всё в одну строчку и регулировать расстояние между пунктами с помощью margin
    . Пример:

Перенос строки в HTML равняется пробелу, то есть если вы в коде между пунктами меню ставите Энтер, то у пользователей на странице сайта между ними появятся пробелы. Что тут плохого? У каждого браузера может быть разная ширина пробела, а некоторые могут его вовсе проигнорировать. В итоге, ваш сайт будет смотреться везде по-разному, а иногда (по собственному опыту) это может даже сильно исказить дизайн.

Поэтому у меня есть моё собственное правило при вёрстке: между любыми (не только в меню) inline-block
элементами не должно быть пробелов и переносов строк! Заодно это незначительно, но уменьшает общий вес ваших страниц, ведь как я уже писал: 1 символ (в том числе пробелы и переносы строк) = +1 байт к весу ваших страниц.

3.2 Атрибут alt у картинок

Обязательно указывайте атрибут alt в теге img:

Во-первых, это требуется, если вы хотите пройти проверку на валидность (в XHTML точно, на счёт HTML уже не помню, так или иначе всегда стоит равняться на строгие стандарты XHTML), во-вторых, если картинка не загрузится, то пользователю вместо картинки хотя бы отобразится текст, записанный в alt (о чём она). В-третьих, это увеличит шанс на попадание ваших картинок в поиск по картинкам от Гугл и Яндекса, что может привлечь дополнительных посетителей к вам на сайт.

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

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

3.3 Используйте HTML заголовки h1-h6 по максимуму.

h1– это самый крупный и главный заголовок, в него следует заключать название вашей текущей страницы. В то время как h6 самый мелкий и наименее значимый заголовок. Многие SEO-эксперты настоятельно рекомендуют использовать заголовок h1 только 1 раз на странице и это логично. Остальные заголовки можете использовать любое количество раз, главное с умом.

Само наличие HTML заголовков в макете вашего сайта уже является плюсом для поискового продвижения, а умелая расстановка может вдвойне усилить результат. Вот что по этому поводу пишет сам Яндекс.

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

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

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

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

Как видите, я использую заголовки HTML по максимуму, причём логика на автомате подсказывает расставлять всё сверху вниз по коду. Хотя для полной идиллии нужно было поменять местами заголовки h6
и h5, но это было бы слишком педантично:) и не так важно.

3.4 Быстрые ссылки на сайт.

Продолжая тему заголовков, хочу сказать о важности h1 и о том, как правильно его составлять. Во-первых, я настоятельно рекомендую использовать его только 1 раз на странице! Проследите за этим в вашей CMS. Во-вторых, h1 имеет большой эффект на SEO (на втором месте после title), так или иначе, но я советую вам дублировать текст из title в h1.

Яндекс пишет:

Чтобы помочь Яндексу правильно выделять быстрые ссылки, текст в теге

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх