SEO-оптимизация стандартного шаблона Blogger — «простая» тема

1
692

15 лет назад в 2003 году поисковый гигант Google купил один из лидирующих на то время блог-сервисов Blogger.com, созданный в 1999 году компанией Pyra Labs. С тех пор многое изменилось и для поддержания конкуренции Google пришлось вносить множество изменений в платформу Blogger, в том числе и широкий набор готовых шаблонов (тем) и инструменты управления «темами».

Но разве нужна SEO-оптимизация стандартного шаблона Blogger, спросите вы? Да, несмотря на то, что Google сам является поисковиком и имеет подробнейшее руководство по поисковой оптимизации для вебмастеров и как никто другой знает, что нужно, чтобы сайты (блоги) эффективно индексировались и хорошо ранжировались в поисковиках системах.

Что рекомендует Google по заголовкам в тексте?

Вот цитата со страниц руководства, посвященная заголовкам внутри текста (речь именно о h1, h2, h3 …):

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

  • Выделения тегами заголовков такого текста, который не помогает определить структуру страницы.
  • Использования заголовков там, где лучше подходят другие теги, например <em> или <strong>.
  • Бессистемного использования заголовков разных размеров.

Не злоупотребляйте заголовками! Используйте теги заголовков там, где это имеет смысл. Чрезмерное количество заголовков на странице затрудняет просмотр контента и мешает определить, где заканчивается одна тема и начинается другая. Чего следует избегать:

  • Злоупотребления заголовками на странице.
  • Слишком длинных заголовков.
  • Использования заголовков только для оформления текста, а не для структурирования.

Но если мы посмотрим на стандартные шаблоны Blogger, то там нарушены практически все эти рекомендации! Тегами h2 выделяется дата постов или названия виджетов, название публикации не выделено тегом h1 и т.д.

Возможно, что разные департаменты и подразделения Google не договорились между собой и не согласовали html/xml код шаблонов Blogger, но что делать вебмастерам и блогерам? Оптимизировать шаблоны самостоятельно!

На примере стандартного шаблона Blogger я покажу, как можно провести SEO-оптимизацию, чтобы у страниц вашего блога были корректно прописаны заголовки h1-h4, что позволит претендовать на высокие позиции в поиске не только Google, но и других поисковых систем.

Что необходимо от шаблона/темы блога с точки зрения SEO?

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

Стандартный шаблон Blogger - простая тема

Берём стандартный шаблон Blogger — тема «простая», в нём главные seo-проблемы заключаются в том, что все страницы блога будут иметь одинаковый заголовок H1 (собственно название блога в шапке), а непосредственно заголовки публикаций зарыты аж в тег h3, а вот h2 дизайнеры-верстальщики Blogger решили использовать для всяких служебных элементов страниц, например даты постов, названия виджетов, и тд.

SEO-оптимизация стандартного шаблона Blogger

Начинаем исправлять кривость дефолтного шаблона и оптимизировать тему с точки зрения SEO по рекомендациям самого Google.

SEO-оптимизация стандартного шаблона Blogger

В первую очередь разберемся как сделать так, чтобы на главной странице название блога было в теге h1, а на внутренних страницах название блога в шапке было, например, в h3 (хотя кто-то захочет его в span или в div завернуть).

Редактирование html-кода шаблона Blogger

Для начала переопределяем css-стили, для чего находим

<Group description="Blog Title" selector=".header h1">
<Variable name="header.font" description="Font" type="font"
default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="header.text.color" description="Title Color" type="color" default="#3399bb" value="#3399bb"/>
</Group>

И меняем в нем «.header h1» на «.header h3»

Затем находим в списке стилей блок /* Header добавляем туда код:

.Header h3 {
font: $(header.font);
font-size: 42px;
font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;
font-weight: normal;
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h3 a {
color: $(header.text.color);
font-size: 42px;
font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;
font-weight: normal;
text-decoration: none;
}

тем самым переопределяя шрифт, размер, цвет и подчеркивание для заголовка h3 в шапке

Теперь идем в сам код шапки блога и находим строки:

<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>

именно они отвечают за вывод названия блога в виде текстового заголовка h1

Нам необходимо не просто заменить в шапке h1 на h3, а добавить два условия (что показывать, если это главная страница, и что показывать, если страница неглавная):

<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>

<!-- Homepage check, if yes write H1 -->

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1 class='title'>
<b:include name='title'/>
</h1>

<!-- Homepage check, if no write H3 -->

<b:else/>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<h3 class='title'>
<b:include name='title'/>
</h3>
</b:if>
</b:if>

</div>
<b:include name='description'/>
</div>
</b:if>

Таким образом на главной странице блога в шапке будет название в h1, а на всех остальных в h3. Код, который позволяет задать проверку условия выглядит так:

Показывать только на главной странице:


(Код Гаджета)

Теперь начинаем разбираться с заголовками публикаций, их необходимо привести к виду, соответствующему условиям: если это страница публикации, то её название должно быть заголовком h1, если это главная страница или архив / поиск / тег, то названия публикаций должны быть внутри тега h2

В стилях находим строки:

<Group description="Post Title" selector="h3.post-title, .comments h4">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
</Group>

и

h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}

Меняем в этих стилях кусок кода «h3.post-title» на «h1.post-title» чтобы получилось:

<Group description="Post Title" selector="h1.post-title, .comments h4">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
</Group>

и

h1.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}

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

h2.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}

а затем ищем код:

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

меняем в нем h3 на h1.

Затем ищем блок кода:

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

и меняем его таким образом, чтобы для страницы публикации заголовок выводился через h1, а для всех остальных страниц, в том числе и главной выводился h2, для чего вводим условие <b:if cond='data:blog.pageType == "item"'> (плюс я добавил комментарии в код, чтобы в случае чего не забыть где именно была правка стандартной темы):

<!-- check post-page or not -->

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<b:if cond='data:blog.pageType == "item"'>

<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
<b:else/>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h2>
</b:if>

</b:if>

<!-- end check post-page or not -->

Таким образом мы решаем проблему с заголовками публикаций для десктопной версии блога, но я пошел еще дальше, и решил настроить стандартную тему «простая» так, чтобы и на мобильной версии название поста на странице публикации было в h1, а на главной странице блога и архивах название постов были бы внутри тегов h2, для чего в коде:

<div class='mobile-date-outer date-outer'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'>
<span><data:post.dateHeader/></span>
</div>
</b:if>

<div class='mobile-post-outer'>
<a expr:href='data:post.url'>

<h3 class='mobile-index-title entry-title' itemprop='name'>
<data:post.title/>
</h3>

меняем тег h3 на тег h2.

Мы разобрались с тем, чтобы у каждой страницы был актуальный заголовок внутри тега h1. Теперь у нас остаются еще «проблемные» заголовки для даты постов и заголовки виджетов — для себя я решил «обернуть» их в теги h4, думаю, будет нормальным решением. Ищем вхождения в стилях:

Разбираемся с тегом даты в посте (разработчики зачем то «обернули» её в тег h2), в блоге css-стилей шаблона ищем строки:

h2.date-header {
font: $(date.header.font);
}

и меняем на h4, то есть вместо h2.date-header прописываем h4.date-header для модификации стиля тега вывода даты публикации постов.

Далее в коде шаблона ищем строки:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

и меням для даты тег заголовка с h2 на h4 (два вхождения в код).

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

<Group description="Gadgets" selector="h2">

и еще вот эти строки:

div.widget > h2,
div.widget h2.title

Меняем в каждой из этих трёх строк h2 на h4 — тем самым решая проблему, когда заголовком второго уровня становятся ненужные для SEO названия виджетов.

Теперь меняем в заголовках виджетов h2 на h4 вот в таких строках <h2 class=’title’><data:title/></h2> и <h2><data:title/></h2> (для чего надо раскрыть весь код скрытый черными треугольниками и поиском пройтись по «<data:title/></h2>»). В зависимости от числа виджетов (Gadgets в терминологии Blogger) таких замен может быть до 20 (всё зависит от того, сколько виджетов вы добавили себе на страницы блога).

Этих правок достаточно для того, чтобы оптимизировать стандартную тему Blogger обеспечив один уникальный заголовок h1 для каждой страницы, а также выноса служебных названий виджетов (gadgets) шаблона из тегов h2/h3, чтобы эти подзаголовки второго и третьего уровня использовались для структуризации текста публикаций.

(2 оценок, среднее: 5,00 из 5)
Загрузка...

1 КОММЕНТАРИЙ

  1. Да, и не забывайте делать бэкапы html-кода шаблона перед началом внесения правок!

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here