Как поменять заголовки в Blogger ~ SEO простым языком

Как поменять заголовки в Blogger

Доброго времени суток, уважаемые читатели. Сегодня мы с вами будем работать с шаблоном Blogger. Как я и обещала в предыдущей статье про seo-заголовки, мы будем делать шаблон более оптимизированным для поисковых систем. Кто не читал предыдущую статью, обязательно прочтите SEO-секреты SEO-заголовков в тегах h1, h2 … h6. В той статье идет теоретическое обоснование для чего это нужно. Сейчас же мы будем воплощать это на практике.

В самом начале я хочу сделать несколько предупреждений.

Первое. Крайне желательно, чтобы вы понимали, что такое HTML и CSS.

Подробнее можно узнать из этих статей:

Второе. Весь описанный в этой статье код основан на стандартных шаблонах из дизайнера шаблонов.

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

Именно поэтому я рекомендую знать и понимать, что такое язык гипертекстовой разметки (HTML), каскадные таблицы стилей (CSS), и чуть-чуть про XML.

Третье. На всякий случай. Все изменения мы делаем на вкладке Дизайн – Изменить HTML. Устанавливаем галочку – Расширить шаблоны виджетов. Чтобы этот вопрос не поднимался в комментариях:).

Итак приступим.

Устанавливаем правильные теги заголовка h1

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

Поэтому мы заменим код, отвечающий за вывод заголовков таким образом, чтобы на главной странице блога заголовок находился в теге <h1>Заголовок блога</h1>, а на всех остальных страницах в обычном теге для текста <p>Заголовок блога на внутренних страницах</p>.

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

У заголовка стиль присвоен тегу h1, но мы же собираемся на внутренних страницах блога этот тег заменить на другой <p>. Именно другому тегу необходимо установить такой же стиль, как и тегу h1. Для этого мы должны найти стили, которые прописаны для h1 и продублировать их для тега <p>.

Первое, на что обращаю ваше внимание. Тегу <p> мы присвоим индетификатор ID: <p id=»zagolovok»>, и именно для id=»zagolovok мы будем дублировать стили.

Еще по теме Заголовки в шаблонах blogger

Второе — мне пришлось ещё некоторые стили дописывать, возможно, вам это тоже понадобиться. В общем, начнем, в процессе все должно стать более понятно.

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

То, что нас интересует, я выделила розовым.

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

#zagolovok {
font: $(header.font);
color: $(header.text.color);
text-shadow: 0 0 $(title.shadow.spread) #000000;
margin:0;
}
#zagolovok a {
color: $(header.text.color);
text-decoration:none;
}

Что мы с вами сделали. Для нашего нового заголовка #zagolovok мы продублировали те стили, которые заданы для .Header h1, плюс обнулили поля: margin:0;. Может обнуление полей нужно не для всех шаблонов, но в моем случае, это было необходимо.

Так же мы продублировали для #zagolovok a стиль, который есть у .Header h1 a, и добавили к нему text-decoration:none;, чтобы, при наведении курсора мышки на заголовок, не показывалась линия.

Со стилями для заголовка разобрались.

Изменяем тег заголовка h1, если в шапке используется только текст!

Находим в шаблоне такой код:

<!—No header image —>
<div id=’header-inner’>
<div class=’titlewrapper’>
<h1 class=’title’>
<b:include name=’title’/>
</h1>
</div>

Этот код отвечает за вывод заголовка блога. Меняем этот код, на новый:

<!—No header image —>
<div id=’header-inner’>
<div class=’titlewrapper’>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<h1 class=’title’>
<b:include name=’title’/>
</h1>
<b:else/>
<p class=’title’ id=’zagolovok’>
<a href=’http://URL-главной страницы’>Заголовок блога, как он есть</a>
</p>
</b:if>
</div>

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

Изменяем тег заголовка h1, если в шапке используется картинка и текст!

Находим код:

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

Полностью меняем его на такой код:

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

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

Еще по теме Анализ контента сайта или почему статьи не попадают в ТОП

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

Но на этом наша оптимизация заголовков не закончилась.

Меняем заголовок в статьях с h2 на h1

[yandex]

По умолчанию все заголовки статей оформлены в тег h2 или в тег h3.

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

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

Итак, нам нужно, что бы заголовки статей на главной странице блога находились в теге h2, а на своей, внутренней странице, были в теге h1.

Так как я выяснила, что даже в дизайнере шаблонов у разных шаблонов разные заголовки, то действуем так. Находим строчку:

Нам нужно будет заменить весь код, который находится между строками:

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

Будьте внимательно, вставляем код между <div class=’post hentry’>Вставляем сюда<div class=’post-header’>. Все вместе должно получиться так:

<b:if cond=’data:blog.pageType == "item"’>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<h1 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<data:post.title/>
<b:else/>
<b:if cond=’data:post.url’>
<data:post.title/>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<h2 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</b:if>

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

Еще по теме Кнопки и счетчики - польза и вред. Блоггер, будь осторожен

За внешний вид заголовка отвечает такой код:

h2.post-title {
font: $(post.title.font);
margin: 0;
}

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

h1.post-title {
font: $(post.title.font);
margin: 0;
}

Так как у меня раньше цвет заголовка был цветом ссылки, то пришлось к этому коду добавить ещё цвет, получилось так:

h1.post-title {
font: $(post.title.font);
margin: 0;
color: $(link.color);
}

Вот таким образом мы проделали внутреннюю оптимизацию шаблона, а именно, заголовков.

Так получилось, что у меня на блоге статьи про заголовки немного получились разбросаны по времени. Одна из них от 8 мая — Золотое правило ключевых слов. В ней я рекомендую настроить подзаголовки для статей.

[ads1]Так же, обращаю внимание на одну из ещё более ранних статей, ещё от 24 апреля, Заголовки в шаблонах Blogger, в которой я писала о том, как поменять заголовки в виджетах блога. С виджетами все попроще, только та статья написана из расчета, что у заголовка блога и заголовка статей первоначальные теги, а не те, которые мы установили с вами сегодня. Но в любом случае, алгоритм изменения заголовков тот же, главное, соблюдать иерархию и целесообразность. Как всегда, задаем вопросы в комментариях.

Все, что мы с вами изучаем, это самые основы SEO. Интересно, а на блоге osnova-seo.info есть эти самые основы? Конечно, я туда ходила не за основами seo, там есть акция по обмену постовыми, но для новичка может быть полезно.

[yandex2]

Екатерина Михайлова

Next Как сделать меню с вкладками - Tab (таб) меню »

Previous « SEO-секреты SEO-заголовков в тегах h1, h2…-h6

View Comments

Shve-irina says:

at

Здорово - доступно и понятно даже чайнику, пошла пробовать...
vataga_a says:

at

Получается, что на главной заголовок статьи в h2, а когда мы открываем статью он становится в h1, а значит подзаголовки можно оставить в h2, или все так подзаголовки лучше перевести в h3? )
Иван says:

at

Катя спасибо тебе огромное! Но я правда пролетел, вообще ничего похожего в моём шаблоне :(
SEO-Дилетант'ка says:

at

Подзаголовки лучше делать и h2 и h3. Например, в этой статье у меня так и есть, два подзаголовок в теге h2, и два подзаголовка в теге h3. Об этом написано в предыдущей статье:).
SEO-Дилетант'ка says:

at

Ну прям ничего похожего - вряд ли. Что-то, да должно быть. Попробуй разобраться. Когда есть желание - обязательно все получается!
N Mitra says:

at

Кать, с заголовками я расправилась ещё в сентябре этого года - http://shpargalkablog.ru/2010/09/optimizatsiya-zagolovka-h1-h2-h3.html. А недавно решила и вопрос с шириной блога.
Иван says:

at

Желания хоть отбавляй... в стандартном всё это есть...
vataga_a says:

at

Ок. За статью отдельное спасибо. У меня шаблон нестандартный, поэтому код немного отличался, но с вашим подробным пояснением справился с первого раза )
Иван says:

at

Катя на помощь могу рассчитывать?!
Вообщем у меня нет в кода

font: $(header.font);
color: $(header.text.color);
text-shadow: 0 0 $(title.shadow.spread) #000000;
margin:0;
}

Но есть
#blogtitle h1{color: $titleTextColor;
font-size: 18px;
text-align: center;
font: $titleFont;
margin-top: 2px;
margin-bottom: 2px;}
#blogtitle h1 a{
color: $titleTextColor;}
#blogtitle{padding: 0px;
width: 300px;
margin: 0px;}

Не могу понять что нужно продублировать?!

А последущие 2 пункта получилось сделать.
Иван says:

at

Странно а где мой комент?!