Как поменять заголовки в 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 мы будем дублировать стили.

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

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

CSS для h1

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

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

#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, если в шапке используется картинка и текст!

Находим код:
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>

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

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

<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
</div>

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

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

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

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

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

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

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

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

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

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

<div class='post hentry'>
Нам нужно будет заменить весь код, который находится между строками:
<div class='post hentry'>

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

<div class='post-header'>

Будьте внимательно, вставляем код между <div class='post hentry'>Вставляем сюда<div class='post-header'>. Все вместе должно получиться так:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 мая - Золотое правило ключевых слов. В ней я рекомендую настроить подзаголовки для статей.

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

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


Запись опубликована автором в рубрике Как создавать сайты с метками , , .

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

  1. vataga_a

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

  2. Иван

    Катя спасибо тебе огромное! Но я правда пролетел, вообще ничего похожего в моём шаблоне 🙁

  3. SEO-Дилетант'ка

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

  4. SEO-Дилетант'ка

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

  5. vataga_a

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

  6. Иван

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

    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 пункта получилось сделать.

  7. Иван

    Катя, блин я вообще первый пункт понят не могу 🙁
    Продублировал этот код
    #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;}

    А что дальше?!

  8. SEO-Дилетант'ка

    ДАЛЬШЕ В СТАТЬЕ НАПИСАНО:
    Со стилями для заголовка разобрались.
    Изменяем тег заголовка h1, если в шапке используется только текст!
    Находим в шаблоне такой код:

    ЕСЛИ ЭТО НЕ ТВОЙ ВАРИАНТ, ТО ДАЛЬШЕ В СТАТЬЕ НАПИСАНО:
    Изменяем тег заголовка h1, если в шапке используется картинка и текст!
    Находим код:

  9. Иван

    Да вторые два пункта сделал без проблем… Я имею ввиду что h1 на внутряках не могу в p сделать.. сделал два последних пункта и в итоге на внутренней странице два h1…

  10. SEO-Дилетант'ка

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

  11. Иван

    У меня видишь код другой и не могу понять какой именно фрагмент скопировать и что потом с ним дальше сделать….

  12. SEO-Дилетант'ка

    «У меня видишь код другой» — я у тебя вижу код такой же, как у меня. Ты видишь другой? Объясняйся понятней.
    «какой именно фрагмент скопировать» — у меня в статье один фрагмент, который нужно скопировать в свой шаблон, чтобы установить заголовки статей. Если ты говоришь о другом фрагменте — объясняйся яснее.

  13. Иван

    Это два одинаковых кода?!

    Твой
    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;}

  14. SEO-Дилетант'ка

    Вообще-то это разные коды.
    Лично в твоем шаблоне контейнер с идентификатором blogtitle находится в сайдбаре, самый первый виджет со счетчиком подписчиков.
    Иван, в начале статьи написано, что очень желательно знать, что такое CSS и HTML. Мы с тобой общаемся уже месяцев 10, за это время можно было бы уже научиться понимать хоть что-нибудь из этого, и научиться пользоваться Firebug, которым ты пользуешься уже около года. Извини.

  15. Иван

    О боже мой, научила ты меня html — мне достаточно… Катя ты про какой код говоришь?! Я имею ввиду тот что ты выделила розовым… Я его найти не могу, вообще похожее только есть что я писал выше…

  16. Galyul

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

  17. Ищущий

    Вместо

    лучше

  18. Ищущий

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

  19. vipkovaleva

    Круто! Спасибо большое, Катерина! Ваш блог для меня просто клад! Желаю вам новых идей и успеха! Один вопрос только. Я правильно поняла, что если у меня картинка в шапке, то этот шаг мне нужно пропустить: «Изменяем тег заголовка h1, если в шапке используется только текст!»?

  20. Светлана Ковалева

    Скажите, Екатерина, я сегодня заметила, что после того как я поудаляла ссылки, на главной названия статей кликабельны, а если пройти по ссылке «Предыдущие», то там уже нет. Как быть теперь?

  21. Светлана Ковалева

    Так как мне не ответили сразу, покопала сама. Вернула код, который был между post hentry и post-header до изменений, предложенных вами, только заменила h3 на h1. Заголовки сообщений стали кликабельны на всех страницах, кроме страницы самого поста.

  22. SEO-Дилетант'ка

    Это не так уж и просто, отвечать всегда сразу:).
    Я посмотрела код, описанный в статье, и переделала его, естественно проверила на тестовом блоге. Попробуйте новый код, должно получиться.
    По-поводу навигации — отвечу в ближайшие дни статьей. Уже готовлю.

  23. Vipkovaleva

    Спасибо, не страшно, я нашла какой-то код на другом блоге, вроде работает. Когда зудит что-то, ждать же не возможно! :))) А по навигации статью буду ждать!

  24. Foringer

    Всё сделал как описанно, но ничего не вышло. Проверил ваш блог, всё верно…. В чём может быть проблема?

  25. Svetlana

    Катя, некоторое время назад, может пол-года, я установила код, который Вы рекомендовали ( в поисковике видно название статьи, затем название блога). Для моей темы это оказалось не очень удобно, я сначала не обратила внимание на это, а теперь вижу, что полная ерунда получается. Хотела найти у Вас ту статью старую, не смогла (чтобы самостоятельно его убрать). Подскажите, пожалуйста, как вернуть обратно?

  26. Юрий

    Спасибо, все получилось. В моем случае были заголовки h3, пришлось немного подкорректировать последние 2 необходимых изменения

  27. Светлана Ковалева

    Скажите, Екатерина, у меня в блоге вообще-то в заголовке используется только картинка, а у вас вариант только «Изменяем тег заголовка h1, если в шапке используется картинка и текст», что делать если только картинка используется?

  28. SEO-Дилетант'ка

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

  29. Oleg

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

  30. SEO-Дилетант'ка

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

  31. Anzhelika

    Здравствуйте! Подскажите, пожалуйста, могу ли я менять в шаблоне заголовки, согласно пункту «Меняем заголовок в статьях с h2 на h1», не поменяв .Header 1 на #zagolovok и не проделав все те манипуляции, которые написаны в пункте «Устанавливаем правильные теги заголовка h1» ? Дело в том, когда я делала замены или дописывала в шаблоне всё то, что перечислено в 1ом пункте визуально блог изменился, исчезло всё оформление, хотя я всё досконально делала по инструкции.

  32. SEO-Дилетант'ка

    Учитывая, что у вас в заголовке картинка, можете пропустить этот пункт. Но хочу заметить, что если у вас исчезло оформление, значит вы не все правильно сделали.

  33. Дмитрий

    хотел изменить стил заголовка, но строки h2.post-title { или h3.post-title { в шаблоне не нашел, точнее их там нет, что делать с стилями?

  34. Сео-Гость

    А у меня так и осталось после всех изменений  два момента:
    — шапка с картинкой (поверх текста) с главной по-прежнему является активной ссылкой, т.е. главная ссылается сама на себя.
    — и тоже с главной осталось подчёркивание заголовков постов, хотя этот text-decoration:none; вставил куда надо (про скобочку не забыл).
    Что я сделал не так? ((

  35. Сео-Гость

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

  36. SEO-Дилетант'ка

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

  37. SEO-Дилетант'ка

     искать только по h2 или h3. У всех шаблоны разные, невозможно предусмотреть все возможные варианты, тем более, если речь идет о шаблоне, скачанном в интернете.

  38. Сео-Гость

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

  39. Сео-Гость

    Да вроде. Но только главная перестала сама на себя ссылаться именно после форумного кода. А вот подчёркивание заголовков сообщений при наведении курсора с главной осталось почему-то…

  40. donxd

     не понятно, если у меня стоит только картинка в заголовке блога без описания, как тогда быть с главной страницей ? у меня выводятся на главной 4 последних статьи через гаджет «газетный стиль» а в шапке сайта только логотип,- если сделать чтоб на главной у меня заголовки статьи были h2 тогда у меня не будет h1? а если сделать заголовки статей h1 то поисковики говорят будут читать только последний, а описание тулить ой как не хочется под логотип … Подскажите что сделать

    вот ссылка на блог : http://zdestochtonado.blogspot.com

  41. donxd

    сделал все как у вас, но не получается теперь сделать коментарии под h3 вместо h4?
    почему то название коментариев отображается под тегом h1 как и статьи, то есть коментарии подписаны так же как статьи, меняешь шрифт заголовка статьи — меняеться также и заголовок коментариев.
    Как не крутил ничего не получается, менял h по всякому , css вертел тоже и ничего,
    вот адрес блога : http://zdestochtonado.blogspot.com/2012/02/blog-post.html

  42. Ehnaton9

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

  43. Panna Pri

    post
    hentry и post-header 

    У
    меня была такая же ситуация. А еще, когда
    вставила код между этими строками —
    все сообщения стали в двойном экземпляре.
    Потом
    обратила внимание, что есть две строки
    post-header.
    Не обратила внимание сразу, что 1-я со
    слеш —

    Удалила
    оставшееся до второй строки и все стало на свои
    места. 

  44. Panna Pri

    У меня так же не было  в шаблоне h2.post-title {
    Ориентировалась на post-title {
    Добавляла h2, меняла. Вообщем пришлось повозиться.

  45. Pani

    У
    меня так же не было в шаблоне h2.post-title
    {

    Ориентировалась
    на .post-title {
    Добавила
    h2,
    изменила
    другие на h2.
    Вообщем,
    пришлось повозиться

  46. Владимир Нюренберг

    Добрый день, Катерина!

    Вопрос от «чайника»: порекомендуйте, какой из Ваших рецептов. подходит для того, чтобы адрес страницы выглядел «kak-pomenyat-zagolovki-blogger-blogspot.html «, а не как пронумерованная страница.

  47. Евгения Додина

    Выполнила пункт «Изменяем тег заголовка h1, если в шапке используется картинка и текст!», но всё равно на главной странице заголовок ссылается на неё же…(

  48. bla

    Внутри статьи заголовок очень маленький и поменять вид никак не могу, и нет такого кода: h2.post-title {
    font: $(post.title.font);
    margin: 0;
    }

    — есть такой:
    h3.post-title, .comments h4 {
    font: $(post.title.font);
    margin: .75em 0 0;
    }

  49. bla

    < a href ='http: //URL-главной страницы' rel="nofollow">Заголовок блога, как он есть

    сделал ошибка вот в чем была: вместо этого надо было писать так

    1. SEO-Дилетант'ка Автор записи

      ИЗ-за неправильно вставки кода в комментарии, я не понимаю, что у вас произошло, что правильно, что нет. Для вставки кода используйте теги pre

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

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