Главная » Разное » Оформление заголовков h в блоггере: Настройка заголовков H1 H2 H3 темы Blogger

Оформление заголовков h в блоггере: Настройка заголовков H1 H2 H3 темы Blogger

| – Комментировать

Содержание

Изменяем вид заголовков в Blogger(Blogspot)

Применение стилевых свойств к названиям статей, различных гаджетов и виджетов, позволяет без труда оформить их в соответствии с общим дизайном блога. Таким образом к ним можно добавить красивый фон в виде изображения или CSS градиента, для оформления текста подключить и использовать интернет шрифт, а также выровнять текст по-центру или правому краю.
  Вот этой статье как раз и пойдет речь о том, как с помощью CSS изменить внешний вид заголовков в Blogger-блоге.
  Для начала определимся с селекторами.
  Всего в шаблоне Blogger четыре типа заголовков и добавить собственный CSS можно к любому и каждому из них. Их селекторы уже записаны в коде шаблона следующим образом:
— .Header h2 — название блога. В данном случаи .Header — это селектор «шапки» блога, где и расположен заголовок первого уровня — h2.
— h3 — заголовки гаджетов(виджетов).
Чтобы избежать возможных противоречий между добавленным и существующим стилями, зайдите в
Дизайнер шаблонов, затем Дополнительно и в настройках для Фон гаджета укажите Цвет рамки и Цвет скоса — прозрачный.
  CSS добавленный к h3, также будет применен и к дате сообщений, но только в том случаи, если этому элементу не задан собственный стиль. Подробнее о изменение даты в сообщениях Blogger
  Кроме этого, запись свойств к данному тегу изменит стиль заголовков у всех гаджетов в блоге, но при желании возможно задать названиям разных гаджетов различный CSS. Подробнее… — h4.post-title — селектор названия постов(сообщений).
— .comments h5 — заголовки в комментариях, это количество оставленных комментариев и надпись «Оставить комментарий» в случаи отсутствия оных.
Чтобы выровнять текст заголовка по-центру, в Blogger, как и везде используется свойство text-align со значением center.
Например для сообщений(постов) код будет таким:

h4.post-title {
 text-align: center; /*выравнивание по центру*/
}


  Подучить и узнать некоторые CSS свойства вы можете на этой странице
Далее по теме

Заголовки (теги h2, h3, h4) в HTML5 и SEO заблуждения — Примеры

Первый заголовок, на который часто посетитель сайта не обращает внимание — тот, который показан на вкладке браузера (подробнее про тег title). Для поисковой системы он самый главный, так как именно его Яндекс, Google и др. чаще всего (см. исключения) используют в качестве заголовка сниппета.

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

Важные замечания:

  • заголовок доступно поясняет содержание страницы, раздела, подраздела. Это не инструмент оформления текста. Не нужно им выделять пункт меню, который ничего не содержит, кроме заголовка.
  • заголовок — это слово, фраза, предложение. Он не должен быть длинным.
  • заголовок — это всё предложение, а не его часть. Для оформления одного-нескольких слов существуют такие теги как strong, mark, em и др. (посмотреть весь список).
  • если статья строится в формате «вопрос-ответ» и ответ в большинстве случаев короткий (например, инструкция лекарственного препарата), то вместо тегов h правильней использовать тройку dl, dt, dd.

Проверить

h2 страницы

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

<F12>:

Разница в использовании

h2, h3, h4, h5, h5, h6 в HTML5 и HTML4

Перед дальнейшим чтением желательно ознакомиться с примерами, описанными в стандартах [w3.org] самостоятельно.

Один

h2 на странице (версия HTML4)
  • Пошаговое решение судоку
    • Программа решения судоку с объяснениями (онлайн)
    • Правила игры
    • Алгоритм заполнения ячеек кроссворда
      • Способ 1. «Скрытые одиночки»
      • Способ 2. «Одиночки»
    • Методы решения судоку
      • Стратегия 1. Кандидат в двух-трёх клетках одного квадрата
      • Стратегия 2. Группы кандидатов

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

<!DOCTYPE html>
  <div>
    <div>Название сайта</div>
    <ul>
      <li><a href="/1">Пункт1</a>
      <li><a href="/2">Пункт2</a>
    </ul>
  </div>
  <div>
    <h2>Пошаговое решение судоку</h2>
    <h3>Программа решения судоку с объяснениями (онлайн)</h3>
    <h3>Правила игры</h3>
    <h3>Алгоритм заполнения ячеек кроссворда</h3>
    <h4>Способ 1. «Скрытые одиночки»</h4>
    <h4>Способ 2. «Одиночки»</h4>
    <h3>Методы решения судоку</h3>
    <h4>Стратегия 1. Кандидат в двух-трёх клетках одного квадрата</h4>
    <h4>Стратегия 2. Группы кандидатов</h4>
    <b>Комментарии</b>
  </div>
  <div>
    <b>Последние сообщения</b>
    <ul>
      <li><a href="/1">Пункт1</a>
      <li><a href="/2">Пункт2</a>
    </ul>
  </div>
  <div>Футер</div>

Заголовки

h2—h6 в HTML5

Каждый пункт дерева заголовков создаёт один из вариантов:

  • body, когда нет h2—h6 перед первыми дочерними тегами article, aside, nav, section.
  • структурные теги article, aside, nav, section. Дочерние h2—h6 будут вложены в предшествующий структурному тегу заголовок.
    Внимание: header, main и footer не являются структурными тегами.
  • h2—h6, которые не имеют родителя blockquote, details, fieldset, figure и td. Уровень вложенности пункта определяется рангом тега h.

Важные замечания:

  • Документ может содержать несколько заголовков верхнего уровня (в примере ниже пункты 1-3).
  • Документ или даже структурный тег могут содержать два и более тега h2 (в примере ниже пункты 2.1-2.3).
  • Последовательность h не важна, можно пропускать теги: h2 » h3 » h5. Если отсутствует h2, его место займёт h3 или даже h6.
  • Можно изменять порядок тегов: h4 » h5 » h2 (h2 будет иметь тот же уровень вложенности, что первый тег h, в нашем случае h4).
  • Так как код перестаёт быть интуитивно понятным, спецификация рекомендует (необязательно):
    • каждый структурный тег начинать с h2. Но на устройствах, не поддерживающих HTML5 или в крайнем случае CSS, будет ужасная картина.
    • теги h
      оборачивать в структурный тег. Но, объём HTML-кода влияет на скорость загрузки веб-страницы. Поэтому не особо хочется его увеличивать, если не требуется внешне (скажем, цветом фона) или семантически отделить границы разделов.

<!DOCTYPE html>
<h4>1</h4>
<section>
      <h3>1.1</h3>
      <h3>1.2</h3>
      <h4>1.2.1</h4>
      <h2>1.3</h2>
</section>
<section>
      <h5>1.4</h5>
</section>
<h5>1.5</h5>
<section>
      <h5>1.5.1</h5>
</section>
<h4>2</h4>
<section>
      <h2>2.1</h2>
      <h2>2.2</h2>
      <h2>2.3</h2>
</section>
<h2>3</h2>

Важные замечания:

  • Если над или в article, aside, nav
    , section отсутствует тег h, пункт будет иметь заголовок untitled.
  • Теги article, aside, nav не обязательно должны иметь вложенный тег h.
  • untitled page
    • untitled article
    • Заголовок внутри article
  • Заголовок верхнего уровня

<!DOCTYPE html>
<section>
    <article>
        <nav>
            <ul>
                <li><a href="#1">Перейти к первой части статьи</a>
                <li><a href="#2">Перейти ко второй части статьи</a>
            </ul>      
        </nav>
        <h2>Заголовок внутри article</h2>
    </article>  
</section>
<h2>Заголовок верхнего уровня</h2>
Пример вёрстки HTML5
  • Название сайта
    • Navigation
    • Пошаговое решение судоку
      • Программа решения судоку с объяснениями (онлайн)
      • Правила игры
      • Алгоритм заполнения ячеек кроссворда
        • Способ 1. «Скрытые одиночки»
        • Способ 2. «Одиночки»
      • Методы решения судоку
        • Стратегия 1. Кандидат в двух-трёх клетках одного квадрата
        • Стратегия 2. Группы кандидатов
      • Комментарии
    • Последние сообщения
<!DOCTYPE html>
  <header>
    <h2>Название сайта</h2>
    <nav>
      <ul>
        <li><a href="/1">Пункт1</a>
        <li><a href="/2">Пункт2</a>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>Пошаговое решение судоку</h2>
      <section>
        <h3>Программа решения судоку с объяснениями (онлайн)</h3>
        <h3>Правила игры</h3>
        <h3>Алгоритм заполнения ячеек кроссворда</h3>
        <h4>Способ 1. «Скрытые одиночки»</h4>
        <h4>Способ 2. «Одиночки»</h4>
        <h3>Методы решения судоку</h3>
        <h4>Стратегия 1. Кандидат в двух-трёх клетках одного квадрата</h4>
        <h4>Стратегия 2. Группы кандидатов</h4>
      </section>
      <section>
        <h5>Комментарии</h5>
      </section>
    </article>
    <aside>
      <h5>Последние сообщения</h5>
      <ul>
        <li><a href="/1">Пункт1</a>
        <li><a href="/2">Пункт2</a>
      </ul>
    </aside>
  </main>
<footer></footer>

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

Что думают поисковые системы? Они, с одной стороны, не должны наказывать за то, что вебмастер следует стандартам вёрстки, а, с другой стороны, должны ориентироваться на большинство. Реальность такова: с появлением HTML-редакторов, это самое большинство не будет разбираться с тонкостями разметки. Им затруднительно переключиться на вкладку «HTML» чтобы картинке прописать атрибут alt, а секции наверно вообще за гранью понимания (см. меню сайта «грамота.ру»).

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

Официальные сообщения Google:

  1. допускается наличие нескольких h2.
  2. довольно старое видео (от 2009 года) о последовательности тегов h.

Официальные сообщения Яндекса:

  1. Правильное оформление заголовков в тексте помогает … роботу Яндекса проще разобраться со структурой документа. Поэтому следует выделять этими тегами заголовки в соответствии с иерархией документа. [help.yandex.ru]

SEO заголовок по итогам эксперимента

Эксперимент 1: «Оптимальное количество
h2»

Рассматриваются три страницы:

  1. h2 » h2 (5 лет)
  2. h2 » h3 (6 лет)
  3. h2, h2 » h3 (7 лет)

Изначально в статьях учитываются последовательность (чем ближе к началу, тем слово более значимо) и плотность [wikipedia.org] ключевого слова, в частности:

  1. ключевое слово употребляется только дважды, а именно в тегах h на одинаковом удалении от начала фразы,
  2. почти одинаковое количество текста,
  3. одинаковые по длине заголовки,
  4. первый h2 — это заголовок верхнего уровня (он не имеет родителя article, aside, nav, section). Это важно (см. HTML5)!

7-6-5 лет [google.ru]. Для Google более привлекателен вариант использования двух h2, где первый — имя сайта (Гугл старательно вычленяет название веб-проекта, даже если это ссылка на внутреннюю страницу стороннего блога [google.ru]), второй — название статьи.

6-5-7 лет [yandex.ru]. В Яндексе h2 должен быть единственным. То есть на Главной h2 — это название сайта, а на внутренних страницах — название внутренних страниц.

Примечание: в Гугле индексация молниеносна, поэтому тут было проверено и отсутствие влияния алгоритма «Google Fresh». Позиции сменились после того, как страницы были добавлены в Г+. То есть да, есть разница один h2 или несколько, но этому поисковики придают очень маленькое значение.

Эксперимент 2: «Есть ли толк от
h4»

Яндекс и Google не вносят h4 в заголовок сниппета. На экспериментальной странице не были использованы title, h2, h3.

Исключение для Яндекса: когда выделенный абзац содержит от 20 до 200 символов. Здесь не важно в каком теге он будет находиться: хоть в h4, хоть в span.

SEO советы

Утверждение 1: заголовок верхнего уровня должен содержать ключевые фразы, но при этом не быть спамным, то есть слова внутри него должны склонятся согласно правилам русского языка. Плохой пример: «Одежда оптом от производителя недорого».

Утверждение 2: чтобы не писать несколько одинаковых по смыслу статей, в заголовки меньшего уровня желательно включить похожие запросы и синонимы. В большинстве случаев для их нахождения достаточно фантазии, wordstat.yandex.ru и поисковых подсказок. То, что менее востребовано и не помещается в заголовки, можно упоминуть в тексте.
Важно: нет необходимости впихнуть весь перечень wordstat. Текст должен быть интересным, читаемым и «без воды».

В примере с судоку люди ищут одно и тоже, но называют это по разному: «методы», «алгоритм», «способы», «правила», «методика», «приёмы», «секреты», «принципы», «примеры»…

Можно ли внутри тега

h использовать другие теги, например, img, a?

Теги h могут содержать phrasing elements! Phrasing elements — это img, a, input и др.

Заблуждение 1: внутри тегов h2—h6 нельзя использовать другие теги.

<h3>Можно ли внутри тега <code>h</code> использовать другие теги, например, <code>img</code>, <code>a</code>?</h3>

Внимание: в ряде CMS (в т.ч. Blogger) есть поле с названием страницы сайта. Его содержимым автоматически заполняется h2 и большая часть title. Остальная часть title или отсутствует, или одинакова для нескольких страниц, например, ей может быть название сайта. Но в теге title может находиться только текст [w3.org]. Поэтому нельзя в поле названия страницы вносить какие-либо теги.

Заблуждение 2: в заголовке не должно быть картинки. Две записи равнозначны для w3.org, Google, но не для Яндекса (не индексирует атрибут alt):

<h2>
     <img src="logo.gif" alt="Название сайта">
</h2>

<h2>
     Название сайта
</h2>

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

<div>
  <h2>Заголовок</h2>
</div>

Утверждение 1: заголовок страницы или его часть не должны быть ссылкой (см. здравый смысл и справка Новости.Google). Отсюда следствие: название веб-проекта на Главной также не должно быть ссылкой. В целом не нужно чтобы страница ссылалась сама на себя (искл. ссылки к определённому участку страницы, так называемые хэш-ссылки). А вот так допустимо (на Авито на странице объявления каждой похожей записи дан h4):

<aside>
 <h2>Реклама</h2>
 <a href="http://ad.com/">
  <section>
   <h2>Дешёвые кредиты</h2>
   <p>Вас удивят скорость выдачи, качество обслуживания и самое главное — цена вопроса!</p>
   <p>Процентные ставки от 1% до 5%</p>
  </section>
 </a>
 <a href="http://ad1.com/">
  <section>
     ...
  </section>
 </a>
</aside>

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

<h3>
    <a href="#"> только текст </a>
</h3>

<a href="#"> 
    <h3> весь блок (прямоугольная область) </h3>
</a>

Должен ли

title отличаться от h2?

«Может ли title быть таким же как h2?» — да, может.

«Различный title и h2 полезны для SEO?» — да, полезны. В рассматриваемые теги можно добавить дополнительные ключевые слова, чтобы увеличить хвост запросов, по которым приходят на сайт. Или чтобы сделать более привлекательный сниппет, в title внести, скажем, название компании, коли фирма на слуху, или номер телефона (для такси, например).

Примечание: для того, чтобы страница могла присутствовать в Новостях Google [support.google.com] или быстрых ссылках Яндекса [help.yandex.ru], основная часть title и h2 должны совпадать. Это может быть вызвано тем, что посетители ожидают увидеть на странице сайта тот же заголовок, что в выдаче поисковиков. На данный момент стоит обратить внимание информационным сайтам.

Нужно ли заголовки боковых блоков брать в

h?

Если заголовки индексируются (см. что сделать, чтобы поисковик не проиндексировал текст), то пусть лучше будут в теге h. Всё равно они употребляются на каждой странице сайта и вес этих слов («Реклама», «Последние сообщения», «Подписка» и т.п.) завышен. Можно предположить, что родитель aside должен уменьшать их значение.

К тому же для слабовидящих будет понятно что к чему, а не сплошные untitled.

Как оптимизировать заголовки в Blogger 2021

Оптимизация заголовков в Blogger, как и в других платформах нужна для лучшего взаимодействия с поисковыми системами.
По факту каждый раздел странички должен быть отмечен тегами от h2 до H6 это нужно для того, чтобы поисковые системы понимали, какие из них более важные. Однако с появлением HTML 5 каждому разделу сайта должен быть присвоен заголовок с тегом h2, правда по моему опыту это все относительно. В публикациях с помощью тегов H выстраивается логичная структура, которая упрощает читателям процесс ознакомления с материалом, а поисковые системы будут ранжировать статью выше, если в подзаголовках будут прописаны ключевые слова.
Сегодня я покажу вам, как оптимизировать заголовки в блоге на Blogger, а именно в сообщениях, страницах, гаджетах и ярлыках.

1. Blogger Оптимизация заголовков в сообщениях и страницах

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

  1.1 Оптимизация в новых темах

  1. В панели управления перейдите в раздел Тема — Изменить HTML
  2. Нажмите клавиши CTRL+F
  3. В появившемся поисковом окне пропишите post-title entry-title и жмите Enter

Если используете темы Contempo, Soho, Notable тогда ищем код:
HTML <h4>
      <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
        <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </h4>

Он может встречаться несколько раз, каждый раз меняйте его следующим HTML кодом:
HTML<b:if cond='data:blog.pageType != &quot;index&quot;'>
    <h2>
      <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
        <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </h2>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<h3>
      <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
        <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </h3>
</b:if>

Сохраните тему.

Если у вас Тема Emporio тогда ищем код:

HTML <h4>
              <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
                <a expr:href='data:post.link ?: data:post.url'>
                  <div>
                    <div>
                      <data:post.title/>
                    </div>
                    <b:if cond='data:post.title != &quot;&quot;'>
                      <div/>
                    </b:if>
                  </div>
                </a>
              <b:else/>
                <data:post.title/>
              </b:if>
            </h4>

Может встречаться три раза, нам нужен третий по счету. Меняем его на вот этот код:
HTML<b:if cond='data:blog.pageType != &quot;index&quot;'>
            <h2>
              <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
                <a expr:href='data:post.link ?: data:post.url'>
                  <div>
                    <div>
                      <data:post.title/>
                    </div>
                    <b:if cond='data:post.title != &quot;&quot;'>
                      <div/>
                    </b:if>
                  </div>
                </a>
              <b:else/>
                <data:post.title/>
              </b:if>
            </h2>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<h3>
              <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
                <a expr:href='data:post.link ?: data:post.url'>
                  <div>
                    <div>
                      <data:post.title/>
                    </div>
                    <b:if cond='data:post.title != &quot;&quot;'>
                      <div/>
                    </b:if>
                  </div>
                </a>
              <b:else/>
                <data:post.title/>
              </b:if>
            </h3>
</b:if>

Сохраняем тему.

1.2 Оптимизация в старых темах

На очереди старые темы Blogger. Тут все просто, вам нужно проделать все в точности, как и в случае с новыми темами Contempo, Soho, Notable поскольку разметка с заголовками у этих тем и старых одинаковая. Когда будете искать строку post-title entry-title то код будет встречаться больше одного раза, вам нужен второй по счету, детальней смотрите на видео в конце публикации.

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

2. Оптимизация заголовка в гаджетах

Один из таких сигналов находится в виджетах блога, а именно в его заголовках. Эти заголовки так же несут определенную пользу при индексировании и ранжировании ресурса поисковыми системами. Эта польза достигается тогда, когда заголовкам присваиваются названия согласно тематики сайта. Но это уже, как получится потому, как обычно администратор добавляет немало виджетов, например:
  • Мы социальных сетях.
  • Об авторе.
  • Подписаться на блог.
  • Популярные посты.
  • Последние новости,  и т.д. 

Для поисковиков такие заголовки не несут особой важности. Вот только из-за того, что в блоггере этим заголовками присвоен тег h3 мы волей-неволей вгоняем поискового робота в ступор, поскольку тег h3 по приоритету довольно высок и его в основном используют для заголовка внутри статьи. В этих заголовках обычно находятся ключевые слова блога. По-этому с точки зрения SEO это не совсем хороший сигнал. При таком раскладе нужно тег h3 сменить на более низкий по приоритету, например h4 или h5, еще можно заменить тегом strong. Но если у вас получается создать заголовок виджета с ключевыми словами по тематике сайта, тогда тег h3 можно не менять.

Например есть сайт о шаблонах для blogger. Я создал виджет, который показывает разные тип шаблонов и соответственно подписал его заголовок, как «Типы шаблонов». Так же виджет «Популярные шаблоны». Плохо будет, если писать оглавления в такой манере: «Типы», «Популярное». Приведу небольшой пример пользы такого заголовка. Допустим человек ищет «Популярные шаблоны blogger». Но на вашем сайте нет такой статьи и соответственно поисковик выдаст результат поиска без вашего сайта или же с понизит его место в выдаче. И вот тут заголовок «Популярные шаблоны» с тегом h3 может быть полезным. Поисковик просто выберет наиболее релевантную страницу вашего сайта и в сниппете к ней приложит заголовок этого виджета. Тогда у сайта больше шансов оказаться в топе при таком запросе.    

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

2.1 Как в заголовке виджета изменить тег h3

В темах Contempo, Notable, Emporio и Soho заголовки гаджетов настроены по умолчанию, так что владельцы блогов с этими темами могут пропустить этот раздел.

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

  1. Перейдите в раздел «Тема«.
  2. Сохраните резервную копию темы.
  3. Откройте редактор «Изменить HTML«.
  4. Ищем код нужного виджета согласно его названию, например Виджет1 жмем CTRL+F и в поисковом окне пишем Виджет1, жмем энтер. 
  5. Теперь браузер нашел код виджета, но он в свернутом состоянии. Чтобы добраться до нужной строки разворачиваем его:
       6. Разворачиваем следующею строку:
        7. После этого появится весь код виджета. Здесь ищем строку: <h3><data:title/></h3></b:if> в ней меняем теги .. на любой из этих: h4, h5, h5 или h6.

        8. Сохраняете тему.

Вот и все операция завершена.

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

Как скрыть название виджета — гаджета в Blogger

Blogspot, как убрать название гаджета

1). Для начала рассмотрим способ попроще. В строке названия своего виджета — гаджета пишите следующее: и теперь можете спокойно его сохранять. Этот код позволяет сохранить виджет не задавая при этом название. Так же он может быть очень полезным, если вам нужно в HTML редакторе отметить какой-то элемент шаблона, чтобы потом можно было его быстренько найти. Выше или ниже  кода этого элемента пишите код. который я указал выше, вместо единички пишите его название и сохраняете шаблон.

2.) Второй способ тоже не сложный, но более тягомотный. Он позволяет оставить название виджета — гаджета в разделе Дизайн и при этом скрывает его в блоге. К примеру создаем виджет HTML\Javascript — даем ему название Блок1. После переходим в раздел Шаблон — Изменить HTML, находим этот виджет. Вот его код:

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

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

заголовки, списки, врезки, ссылки, иллюстрации

Взгляните на текст:

Ужас, правда?

Такую «простыню» читать невозможно. Да и не хочется, если честно. Любой текст на сайте — будь то карточка товара, ответы на вопросы, описание услуги или статья в блоге — нужно делать максимально удобным для чтения.

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

NB! Как писать сами тексты, в этой статье говорить не будем. У нас уже есть отличный материал на эту тему: «Что такое SEO-статья и как правильно писать SEO-тексты». Сегодня на повестке дня его величество Оформление. И только оно.

Выделите заголовки и подзаголовки

В одном тексте должен быть только один заголовок первого уровня (Н1) и произвольное количество подзаголовков второго (h3), третьего (h4) и последующего уровней. Количество их вы определяете сами: обычно подзаголовков столько, сколько нужно для раскрытия темы. В коротком материале достаточно нескольких заголовков h3. В лонгриде со множеством вложений могут потребовать заголовки четвертого уровня (h5). А вот заголовки нижних уровней — начиная с Н5 и далее — мы не рекомендуем использовать, потому что это сильно усложняет навигацию по тексту и его структуру.

Подзаголовки должны быть грамматически согласованными с заголовком статьи. В Google Docs это можно проверить, если выполнить команду «Вид» → «Показать структуру документа» (Ctrl + Alt + H).

В этой структуре хорошо видно подчинение заголовков h2–h5

Размечать заголовки всех уровней можно в «Google Документах» в панели инструментов через всплывающий список со стилями форматирования:

Пример того, как сделать заголовок первого уровня

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

Вот как заголовок первого уровня выглядит в блоге «Кокоса»

Также можно наложить заголовки в главном меню сервиса при выполнении команды «Формат» → «Стили абзацев»:

Пример того, как сделать заголовок второго уровня

Теперь посмотрим, как заголовки h3 и h4 будут выглядеть на сайте:

Заголовки 2 и 3 уровней в статье блога

Сделайте оглавление

Если у вас написано длинное руководство, с помощью оглавления будет проще в нем ориентироваться и переходить к нужным разделам. Оно создается в Google Docs через команду «Вставка» → «Оглавление» в двух вариантах: с номерами страниц или синими ссылками.

Мы выбрали вариант с синими ссылками

В обоих случаях ссылки на каждый раздел будут кликабельными:

Вариант оформления синими ссылками в Google Docs

При публикации оглавление из «Google Документов» не переносится, но вы всегда можете показать верстальщику, как оно примерно должно выглядеть в опубликованном виде.

Во многих CMS оглавление формируется автоматически при верстке:

Так выглядит содержание статьи в нашем блоге

Разделите текст на абзацы

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

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

Теперь представьте этот не самый простой для понимания текст одной «портянкой»

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

Добавьте списки

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

  1. Нумерованный.
  2. Маркированный.
  3. Список определений.

Нумерованный список делается тогда, когда важна строгая последовательность элементов:

Чтобы перейти на Google Analytics 4, сделайте следующее:

  1. Подключите основные настройки.
  2. Соберите данные.
  3. Настройте цели.

Маркированный список создается для перечисления элементов в произвольном порядке:

Агентство Кокос оказывает услуги по направлениям:

  • SEO.
  • Контекстная реклама.
  • Создание сайтов.
  • SERM.
  • и другие.

Список определений собирается, когда каждый элемент списка нуждается в подробном описании:

«Список определений» — название типа списка, это не обязательно определения

В Google Docs списки форматируются через панель инструментов:

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

На сайте списки смотрятся примерно так же. Их внешний вид зависит от настроек CMS:

Такой маркированный список облегчает восприятие текста

Пункты списка можно также оформлять ссылками, например, при перечислении опубликованных материалов:

В последнее время в блоге появились следующие статьи:

Выделите фрагменты текста

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

Комментарий эксперта, выделенный цветом

NB! Когда вы заказываете материал у копирайтера или агентства, исполнители часто выделяют полужирным ключевые слова, которые нужно вставить в текст. Это делается для удобства заказчика, чтобы вы сразу увидели, что автор выполнил ТЗ и вставил все ключи. При публикации не забудьте убрать полужирное начертание.

Добавьте цитаты и врезки

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

  1. Цитата — слова эксперта, руководителя или сотрудника компании, клиента — то есть любого человека, чья прямая речь уместна в тексте. Она используется, чтобы усилить экспертность текста, выделить основную мысль, передать эмоции и мнения. Пример цитаты вы уже увидели выше.
  2. «Читайте также…» — ссылка на другой материал на сайте, подходящий по смыслу к определенному фрагменту текста. Эта врезка используется, чтобы показать читателям статьи, которые тематически связаны с текущей, увеличить время их пребывания на сайте и в итоге улучшить поведенческие факторы сайта.

Читайте также:

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

  1. Форма СТА, лид-магнит — активная форма, которую заполняет читатель, также подходящая по смыслу. Используется, чтобы повысить количество обращений на сайт.

Пример формы заказа на сайте

Для создания врезок придется прибегнуть к помощи верстальщика, который вставит их на сайт, или сделать это самостоятельно. А в «Google Документах» просто выделить места для врезок цветом и дать указание верстальщику, чтобы не пропустил.

Проставьте ссылки

Ссылки в теле текста могут быть анкорными и безанкорными. Вы читаете статью блога «Кокос» — анкорная ссылка. Вы читаете статью блога «Кокос» (https://kokoc.com/blog/) — безанкорная ссылка. Анкорные ссылки смотрятся намного органичнее, согласитесь!

Чтобы вставить ссылку в «Google Документах», выделите левой кнопкой мыши нужные слова, затем нажмите правую кнопку и кликните по слову «Ссылка» (или нажмите сочетание клавиш Ctrl +K). В открывшемся окошке вставьте нужную ссылку и нажмите «Применить»:

Ссылка появится в документе

При публикации на сайте ссылка перенесется автоматически:

Тот же фрагмент текста, опубликованный в блоге

Как правильно ставить ссылки? Приведем ряд основных правил:

  1. Не используйте в тексте ссылок слова «здесь», «тут», «сюда», «эта» и т. д. Читатели должны однозначно понимать, куда они перейдут по ссылке. Старайтесь делать ссылки, которые максимально релевантны страницам, на которые они ведут.
  2. Не ставьте ссылки в подрисуночных надписях и подписям к видео, заголовках и подзаголовках.
  3. Ссылки на исследования, документы, информационные материалы сайтов ставьте так, чтобы они вели на страницу-источник, а не сайт в целом.
  4. Не ставьте слишком длинные анкоры: обычно вполне хватает 2-3 слов, чтобы обозначить, на что мы ссылаемся.
  5. Не ставьте ссылку, если слова в ней фактически дублируют сказанное в тексте перед ссылкой: «Чтобы узнать о новых способах продвижения, читайте нашу статью о новых способах продвижения».
  6. Если речь идет о внешних ссылках, не ставьте их на страницы 404, редиректы, сомнительные некачественные и заспамленные сайты. Иначе в гости может прилететь «Гугл Пингвин».

Читайте также:

Алгоритм Google Penguin: как выйти из-под фильтра и не попасть под санкции

Добавьте иллюстрации

Это картинки, фотографии, скриншоты, мемы, которые должны проиллюстрировать текст. Вставляются прямо в документ нажатием сочетания клавиш Ctrl+V или через команду меню «Вставка» → «Изображение» → «Загрузить с компьютера»:

Изображение можно не только загрузить с компьютера, но и найти в интернете, добавить с «Google Диска», Google Фото, вставить ссылку и сделать снимок

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

Расскажем, как подбирать иллюстрации к тексту:

  • Выбирайте качественные изображения достаточного размера: в среднем 1000х1000 пикселей.

Этот молодой человек немного заквадратился… Источник: commig.blogspot.com

  • Изображения — за исключением скриншотов и мемов — не должны иметь надписей, водяных знаков и т. д.
  • Также они должны быть релевантны тексту. Пишете о продаже хлебобулочных изделий — не ставьте фото велосипедов. Утрирую, конечно, но суть ясна.
  • Никогда, никогда, никогда не используйте шаблонные стоковые картинки! Они мертвы, они безжизненны, они устарели сто тысяч лет назад. Лучше сделать собственное фото — пусть не идеальное, но живое.

Ставить такие картинки на сайт просто дурной тон. Источник: chainimage.com

  • Впрочем, брать фото из стоков можно — но максимально нешаблонное. Загляните на Pixabay, FreeStockImages, Unsplash, Gratisography и другие сервисы.
  • Если берете картинки не из стоков, а с просторов интернета, позаботьтесь об авторском праве, чтобы не нарваться на штраф. Укажите автора или источник, откуда взяли картинку.
  • Под картинками должны быть подрисуночные надписи. Еще раз: ПОД картинками. Обычно они выделяются курсивом.
  • Ничего страшного, если вы будете использовать смешные и грустные мемы, демотиваторы карикатуры — читателям тоже хочется улыбнуться. Главное — быть уместными.

А точнее, об их оформлении!

  • Когда делаете скриншоты, оставляйте по бокам достаточно «воздуха», то есть свободного пространства. Так картинка воспринимается легче. Сравните два скриншота одного и того же текстового фрагмента:

Скриншот без «воздуха» плюс еще и обрезанным текстом, что вообще недопустимо

Теперь тот же фрагмент, только с «воздухом»:

Теперь текст скриншота легко читается по края и будет хорошо смотреться не только на белом фоне

Вставьте видео

Требования к видео по большому счету такие же: релевантные, интересные, качественные. Вставить видео в текст тоже несложно: все популярные CMS хорошо понимают и автоматически преобразуют ссылки в видео — достаточно лишь указать их в тексте статьи.

Вот как мы вставили в текст видео на примере статьи «7 книг по SEO в 2021 — учебники по продвижению и оптимизации сайта». Нашему главреду захотелось показать автора книги, что называется, «лицом». Для этого он ввел в поисковой строке YouTube имя и фамилию автора, а также название книги. На появившемся ролике нажал правую кнопку мыши и в контекстном меню выполнил команду «Копировать URL видео»:

Если вам нужно показать какой-то отрезок в видео, выполните команду «Копировать URL видео с привязкой ко времени»

Затем с помощью сочетания клавиш Ctrl+V вставил ссылку на видео в текст:

И выделил лиловым цветом, чтобы верстальщик заметил ссылку и знал, что это видеоролик

При публикации статьи на сайте видео можно смотреть, не покидая страницу:

Видео можно посмотреть как на сайте, так и перейти на YouTube — как удобно пользователю

Сделайте таблицы

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

Так не надо

Так надо

В таблице, в отличие от обычного текста, должно быть минимум текста: только основные тезисы

Минимум текста: самое основное

Меньше заливки. Таблица — не радуга

Меньше заливки. Таблица — не радуга

Текст выравнивается по левому краю

Текст выравнивается по левому краю

А цифры — по правому

А цифры — по правому

Все таблицы в тексте сделаны разными способами

Все таблицы в тексте единообразны

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

Таблицу на сайт можно сделать в Google Docs с помощью команды «Вставка» → «Таблица» и выбрать ее размер, т. е. число строк и столбцов:

Пример, как сделать таблицу в Google Docs

Вот как выглядит таблица на сайте «Кокоса»:

Таблица соответствует правилам, приведенным выше

Разработайте инфографику

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

Вот пример инфографики от «Почты России»:

Разберется и запомнит даже старенькая бабушка (мы надеемся)

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

Основной принцип создания инфографики похож на правило таблиц:

  1. Пишите самое главное, четко формулируйте тезисы, не лейте воду.
  2. Используйте цифры, выделяйте их цветом или крупным шрифтом.

Ну и, разумеется, инфографика должна быть хорошо читаемой, чтобы внимательный читатель не побежал за лупой (или, вероятнее всего, просто закрыл страницу). Сделать инфографику самостоятельно можно с помощью сервисов Google Docs, Infogr.am, Piktochart.com и других.

В Google Docs для ее создания выполните команду «Вставка» → «Диаграмма» и выберите вид — линейную, круговую, график и другие:

Диаграммы в Google Docs — это изображения, которые легко переносятся на сайт

И последнее: поддерживайте единообразие текста

Чтобы тексты лучше читались, следуйте принципу единообразия.

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

Поэтому советуем придерживаться единого стиля. Например:

  • Пользуйтесь одинаковыми сервисами, программами, плагинами. Например, если речь идет о таблицах, делайте их только в «Google Документах» или Microsoft Word, но не так, чтобы одни были в одной программе, другие в другой. Потом наверняка замучаетесь, чистя код от их «офисного» форматирования.
  • Используйте длинное тире (—), а не дефис (-), там, где нужно писать именно тире. «То», «либо», «нибудь» мы по-прежнему пишем через дефис и никак иначе.
  • Ставьте кавычки-елочки («»), кроме двух случаев. Первый из них (по крайней мере, у нас в блоге), когда говорим о запросах и ключевых фразах: По запросу “купить окна москва” мы с помощью чуда и работы на износ смогли выйти на первое место в топе «Яндекса». Второй — когда словосочетание в кавычках стоит внутри цитаты. «В блоге агентства “Кокос”тщательно следят за оформлением текста», — говорит главный редактор.
  • Определитесь с написанием некоторых слов. Например, мы придерживаемся официального стиля: пишем Stories или «Сторис», но не «сторисы». Google Analytics, или GA, или Analytics, но не «гуглоаналитика» или «аналитикс».
  • Определитесь с tone of voice, или голосом бренда. Мы обращаемся к читателю исключительно на «вы», а не на «ты», не используем сленговые выражения. Правда, есть исключение: статья, где мы намеренно нарушаем все свои правила.

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

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

как правильно написать для SEO-оптимизации. Реальные примеры

2. Теги <h2> и Title должны быть схожими
Они не должны дублироваться (кстати, проверить дубли Title и h2 вы можете с помощью Аудита сайта Serpstat). Однако нельзя допускать, чтобы текст заголовка сильно отличался от Title. Это приводит к ухудшению поведенческих факторов и сильному падению позиций в органике. Поисковикам сложно определить, к каким ключевым словам относится страница и на какие запросы должна отвечать.

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

Пример:

Title: Как нарисовать татуировку: советы, информация, правила, варианты.

h2: Как нарисовать татуировку.

Title: Балет «Баядерка»: содержание, интересные факты, видео, история.

h2: Балет «Баядерка». Краткий синопсис.

3. В заголовках не должно быть много ключевых слов
Заголовки html должны выглядеть органично. Лучше не использовать больше двух-трех ключевых слов, чтобы сохранить читабельность.

4. Не нужно использовать больше одного тега <h2> на странице
Если использовать тег больше одного раза, упадет его значимость. Как следствие — поисковые системы снизят рейтинг страницы или всего сайта.

5. Не стоит делать заголовок <h2> слишком длинным
Иногда в <h2> тег пытаются ввести весь текст, чтобы использовать больше ключевых слов. В результате заголовок получается тяжелым и подпадает под санкции.

Пример:

<h2>Как правильно купить Ford Focus не платя за растаможивание автомобиля? Как не попасться и чем грозит покупка авто на еврономерах? Уход от уплаты таможенных платежей осуществляется путем временного ввоза или использования режима транзита.</h2>

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

Рекомендации SEO-специалистов на эту тему достаточно разнообразны. Некоторые утверждают, что длина h2 не должна превышать восьми слов, другие советуют ограничиться 50 символами. Точных указаний как правильно прописать эти теги нет, а значит, заполнение мета тегов индивидуально для каждого запроса.

Советы по SEO на странице для блогов BlogSpot: полезные советы Blogger

Опубликовано: 2021-01-07

Следующие на странице советы по SEO для блогов BlogSpot (Blogger) помогут вашему блогу быть проиндексированным, перечисленным и высоко ранжируемым на страницах результатов поисковой системы (SERP) Google. BlogSpot предлагает отличную платформу для блогеров. Это бесплатно и позволяет любому желающему создать собственный блог, не платя за это.

Blogger — это простая платформа для ведения блогов. Это бесплатная служба Google для ведения блогов, и, как и любой другой блог, она должна быть размещена на хосте. BlogSpot — это служба хостинга, предоставляемая Google для Blogger, хотя эти два понятия часто используются как синонимы. Допустим, у вас есть блог WordPress, размещенный на Bluehost — Blogger приравнивается к WordPress, а Bluehost приравнивается к BlogSpot. Это просто, хотя, хотя вы можете использовать WordPress на любых хостингах, Blogger должен размещаться на BlogSpot. Они объединяются в единый пакет.

Содержание
  • 1. Блоги Blogger и поисковая оптимизация
  • 2. Советы Blogger: SEO на странице
  • 3. Советы по оптимизации страницы для блогов BlogSpot
    • 3.1: Использование ключевых слов
      • 3.1.1 Важны ли ключевые слова
      • 3.1.2: Где использовать ключевые слова
    • 3.2. Метаданные
      • 3.2.1: Тег заголовка
      • 3.2.2: Описание метатега
      • 3.2.3: Тег описания блога
      • 3.2.4: Индивидуальный тег описания сообщения
      • 3.2.5: Тег ключевых слов
      • 3.2.6: Постоянные ссылки
      • 3.2.6: Изменение названия вашего объявления в Google
    • 3.3. Ключевые слова изображения
      • 3.4.1: Изменение тегов h4 заголовка Blogger по умолчанию
      • 3.4.2: Изменение тегов заголовка
      • 3.4.3: SEO заголовка и ключевые слова
      • 3.4.4: Оптимизация изображений
        • 3.4.4.1: Название изображения
        • 3.4.4.2: Использование атрибута Alt изображения
        • 3.4.4.3: Размеры изображения
    • 3.4. Якорные тексты в ссылках
    • 3.5. Комментарии и гостевые блоги

Блоги Blogger и SEO

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

Многие также ошибочно считают, что, поскольку BlogSpot (Blogger) принадлежит Google, их блог будет отображаться в этой поисковой системе, а не на других платформах, таких как WordPress. Это не относится к делу! Алгоритмы индексации и ранжирования Google могут дать некоторый приоритет блогам BlogSpot, при прочих равных, но вам не гарантируется какое-либо преимущество при их использовании.

Вы должны применить разумную поисковую оптимизацию к своему блогу, будь то блог BlogSpot или WordPress, и эти советы по SEO на странице для блогов BlogSpot помогут вам достичь более высокого рейтинга в поисковой выдаче Google. Итак, для начала, что такое «SEO страницы»? Хотя существует много разных поисковых систем, с этого момента мы будем обсуждать Google. Google забирает большую часть трафика поисковых систем, и многие другие поисковые системы используют результаты Google.

Еще одно обобщение, которое мы часто будем использовать, — это «Страница», чтобы включить любую страницу блога или сообщение — и даже страницу веб-сайта, если вы также запускаете веб-сайт. Что касается Google, веб-страницы, страницы блогов и сообщения с отдельными URL-адресами — это одно и то же — страницы, а не домены (целые веб-сайты). Мы также будем использовать термин «ключевое слово» для включения отдельного слова или фразы. Таким образом, «SEO» является ключевым словом, как «Советы по SEO для блогов BlogSpot» и «Советы Blogger».

Советы Blogger: SEO на странице

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

Стратегия создания ссылок — это не поисковая оптимизация страницы, как и никакая форма внестраничного маркетинга, например AdSense, платная реклама, маркетинг статей, отправка в каталог или социальные сети, такие как ссылки на Facebook, Twitter или любой сайт социальных закладок. Их можно в общих чертах рассматривать как SEO или маркетинг «на месте», но не «на странице».

Есть много способов оптимизировать ваш блог для поисковых систем, которые не находятся строго на странице. К ним относятся настройки панели управления, такие как привязка сообщений вашего блога к учетной записи Google+, обеспечение того, чтобы настройки конфиденциальности позволяли поисковым системам находить ваш блог, боковые панели со ссылками на социальные сайты и т. Д. Здесь мы сосредоточены на советах по SEO для блогов BlogSpot, которые вы можете применять к отдельным сообщениям и страницам по мере их написания и создания. Итак, приступим:

Советы по SEO на странице для блогов BlogSpot

A. Использование ключевых слов

Термин «Ключевые слова» относится не к словарю на вашей странице, а к условиям поиска, используемым людьми, использующими поисковые системы для поиска информации. Ваш блог BlogSpot или Blogger рассматривается Google как источник информации — и он направит к вам клиента, если считает, что вы можете предоставить эту информацию авторитетным способом.

Один из способов убедить Google в том, что кто-то ищет информацию о том, как использовать SEO для своего блога, — это авторитетно написать веб-страницу или сообщение в блоге на эту тему. Google может подумать, что эта страница под названием «Советы по поисковой оптимизации для блогов BlogSpot» предлагает хорошую и надежную информацию, которая может помочь его пользователю, но вы должны предоставить убедительные доказательства того, что это так! Прежде чем представить эту страницу как возможность, Google учтет более 200 факторов.

Многие из этих факторов связаны с так называемым SEO на странице. Google смотрит на тег Title, чтобы найти общий фокус страницы, а затем на тег Meta Description для получения дополнительной информации. Затем он просматривает содержимое страницы, чтобы определить, насколько авторитетна эта страница. Чтобы подкрепить это, он затем ищет другие веб-сайты, ссылающиеся на эту страницу, что показывает Google, сколько других считают, что он предлагает хорошую информацию по этому ключевому слову.

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

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

Ключевые слова имеют значение

Да, это так! Игнорируйте всех, кто говорит вам, что они этого не делают, потому что даже Google все еще использует их как большую часть своего алгоритма индексации. Бессмысленно утверждать, что Google теперь смотрит только на словарный запас, и вы можете быть ранжированы по ключевому слову, которого нет на вашей странице. LSI (скрытое семантическое индексирование) — это концепция, которую, по утверждению Google, использует для определения смысла вашего веб-контента.

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

Например, если вы хотите получить трафик по ключевому слову « Как написать сообщение в блог », вы должны использовать его в качестве заголовка сообщения. Однако есть альтернативные способы сказать это, и вы должны использовать их в посте. Google вознаградит вас больше, чем если бы вы просто повторяли эту фразу снова и снова.

Где использовать ключевые слова

Используйте основное ключевое слово или фразу как можно ближе к началу страницы, чтобы они не казались надуманными. Используйте его хотя бы один раз в заголовке h3, выделенном жирным шрифтом, и еще раз в последнем абзаце. В среднем в сообщении из 500 слов вы будете использовать его в статье не более чем в 2-3 раза. Таким образом, ваша плотность ключевых слов (KD) будет 1,0% — 1,2%. Это нормально, хотя для коротких ключевых слов из 1-2 слов вы поднимаетесь до 2% -3%.

Вы можете начать со слов «Как правильно написать сообщение в блоге…» и так далее. Затем, вместо того, чтобы просто повторять ключевое слово, используйте связанные термины, такие как «Правильное написание сообщений в блоге — приобретенный навык…» и «Если вы понимаете, как создавать сообщения для своего блога…» и так далее. Таким образом, вы меняете язык, используемый для представления вашего контента.

Это то, что Google называет «скрытой семантической индексацией» или LSI. С точки зрения использования алгоритмов индексации Google этот термин означает, что вы выиграете от использования широкого словарного запаса в своем контенте, а не от повторения ключевых слов. Лучше писать по теме естественно, когда ваши знания проявятся.

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

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

Если вы не можете найти слова, которые выражают вашу целевую фразу по-другому, перейдите на thesaurus.com — этот сайт предложит множество альтернатив. Например, для слова «писать» вы можете использовать составить, перо, создать, черновик, автор, «прочеркнуть» и так далее. Это лучше, чем использовать одно и то же слово несколько раз — Google накажет за чрезмерное количество ключевых слов.

Б. Мета-данные

Термин «Мета» имеет много значений, относящиеся к блогам «позади» и «о». Мета-данные — это данные, которые видны в вашем блоге BlogSpot, и этот термин также был определен как «данные о данных». Вот несколько форм метаданных в вашем блоге:

  • Тип используемого кода (например, HTML).
  • Используемый язык (английский, немецкий и т. Д.).
  • Дополнительные шрифты, которые можно использовать.
  • Набор символов по умолчанию, например UTF-8
  • Заголовок страницы.
  • Описание содержимого страницы.
  • Список ключевых слов, релевантных странице, и многое другое.

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

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

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

Google недавно изменил это на количество пикселей. Максимум вроде бы 512 пикселей. Если вы перейдете выше этого значения, оно будет сокращено до примерно 500 — 12 используются для многоточия, используемого при сокращении описания. В Интернете есть инструменты, позволяющие проверить количество пикселей в заголовке.

Вы должны включить ключевое слово главной страницы в начало заголовка, и, если позволяет пространство, добавить после него дополнительное ключевое слово. Мы используем «Полезные советы Blogger» как дополнительное ключевое слово. Это поможет вашему SEO, особенно потому, что Google будет знать, что нужно связать Blogger с BlogSpot.

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

Мета-тег описания: обычно это фрагмент, который появляется в листинге Google прямо под заголовком листинга. Вот как выглядят метатеги title и description для списка BloggingTips.Guru в Google:

Описание под URL-адресом сайта точно такое же, как введенное в поле описания, описанное ниже). Если вы не включите тег описания, Google обычно берет первые несколько слов из содержания страницы. Хотя есть свидетельства того, что Google также может применять подсчет пикселей к этому фрагменту, на данный момент он, похоже, заблокирован на уровне 156 символов.

Тег описания блога: Чтобы убедиться, что ваше собственное описание отображается в вашем блоге BlogSpot, перейдите в Настройки> Настройки поиска> Мета-теги> Описание:

Щелкните, чтобы включить описание поиска. Затем введите описание своего блога. Используйте основное ключевое слово в начале метатега описания, а затем опишите, о чем блог. BlogSpot позволяет использовать максимум 150 символов. Используйте свое основное ключевое слово в начале описания. Обратите внимание, что это то же самое, что опубликовано в списке Google для этого блога.

Отдельные теги описания сообщений: приведенное выше описание относится ко всему блогу BloggingTips. Вы также должны сделать это с каждым отдельным сообщением Blogger. Щелкните, чтобы отредактировать сообщение, затем щелкните «Поиск по описанию» справа от окна сообщения. Вы увидите это:

Это появится только после того, как вы установите флажок «Включить описание поиска», как указано выше.

Введите описание сообщения в окне. Используйте ключевое слово вашего основного сообщения в первых нескольких словах описания. Попробуйте добавить дополнительное ключевое слово, например: «Советы по SEO на странице для блогов BlogSpot, которые помогут вам достичь более высокого рейтинга в Google. Воспользуйтесь этими полезными советами Blogger, чтобы привлечь больше посетителей в свой блог ». Это 143 символа. Как и в случае с описанием сайта, вам разрешено 150 в Blogger, хотя Google обычно разрешает 156.

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

Ключевое слово Tag: Если проверить исходный код вашего сайта или любой другой веб — сайт в Интернете, вы также увидите тег «Мета ключевое слово». Сейчас это в значительной степени излишне, хотя некоторые малоизвестные поисковые системы могут это использовать. Добавьте сюда одно или два ключевых слова, если хотите, на всякий случай, хотя Google не обращает на это внимания.

Вы можете добавлять теги или ярлыки к отдельным сообщениям, а не использовать метатег с ключевым словом. Это ключевые слова, относящиеся непосредственно к сообщению. Нажмите «Ярлыки» слева от окна редактирования, затем добавьте 4–5 ключевых слов или фраз, по которым люди смогут найти ваше сообщение.

Это мета-теги, которыми вы можете управлять. Да, вы также можете редактировать любые другие, но если вы не вундеркинд, вы должны оставить все остальное в покое. Есть и другие теги на странице, которые вы можете изменить, но пока оставьте их для тегов Title и Description.

Постоянные ссылки: постоянные ссылки показывают, как публикуется URL вашего блога. По умолчанию в Blogger ссылка для этого сообщения будет выглядеть так: http://yourblogurl.blogspot.com/2014/06/on-page-seo-tips-for-blogspot-blogs.html

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

Изменение заголовка вашего объявления в Google: заголовок сообщения во-первых, заголовок блога во-вторых: заголовок вашего сообщения в блоге BlogSpot более важен для ваших читателей, чем заголовок вашего блога. Заголовок, который отображается на странице результатов поисковых систем, является тегом Title в разделе заголовка вашего HTML. В BlogSpot это обычно будет заголовок, который вы ввели при написании сообщения.

Проблема с блогами BlogSpot заключается в том, что Blogger сначала показывает заголовок сайта или имя блога, а затем следует за ним заголовок сообщения. Например, если заголовок вашего блога был «Мой потрясающий блог» и вы написали сообщение с заголовком «Как заработать на своем блоге», в списках Google он появится как «Мой потрясающий блог — Как заработать на своем блоге». Это может вам не подойти, особенно если вы хотите, чтобы ключевое слово основного сообщения появлялось первым.

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

Вот как в этом убедиться:

1. После входа в свою учетную запись BlogSpot создайте резервную копию шаблона Blogger. Для этого нажмите «Шаблон» на панели инструментов.

Теперь нажмите Backup / Restore в правом верхнем углу. Во всплывающем окне нажмите «Загрузить полный шаблон» — он будет загружен и сохранен в папке «Загрузить» на вашем компьютере. После загрузки нажмите «Закрыть». Это позволяет вам восстановить ваш шаблон, если вы сделаете хэш следующего шага:

Теперь нажмите «Редактировать HTML».

Найдите этот код: <title><data:blog.pageTitle/></title> . Вы можете нажать Ctrl + F и скопировать его в поисковую строку:

Скопируйте приведенный ниже код и вставьте его вместо <title><data:blog.pageTitle/></title>

 <b: if cond = 'data: blog.pageType == & quot; item & quot;'>
<title> <data: blog.pageName /> | <data:blog.title/> </title>
<b: else />
<title><data:blog.pageTitle/> </title>
</ b: если>

Итак, HTML теперь должен выглядеть так:

Сохраните шаблон, и все готово.

В следующий раз, когда ваш блог просканируется поисковой системой, тег заголовка вашего сообщения появится перед тегом заголовка блога (Как заработать на своем блоге — Мой потрясающий блог). Это должно улучшить посещаемость вашего сообщения в блоге.

В. Советы по оптимизации страницы для блогов BlogSpot: заголовки-ключевые слова-изображения

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

  • На странице SEO
  • Советы по SEO на странице
  • Советы по SEO на странице для BlogSpot
  • Советы по SEO на странице для блогов BlogSpot
  • Советы по SEO
  • Советы по SEO для BlogSpot
  • Советы по SEO для блогов BlogSpot
  • Советы для BlogSpot
  • Советы для блогов BlogSpot
  • BlogSpot блоги

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

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

Использование заголовков заголовков и абзацев: это подводит нас к первому важному совету, связанному с поисковой оптимизацией страницы: включайте ключевые слова в заголовки или заголовки (то же самое). Блоги BlogSpot используют заголовки заголовков h2 по умолчанию — если вы не используете изображение в качестве заголовка (например, логотип компании), и в этом случае заголовок h2 полностью исчезнет. Проблема в том, что название блога находится в h2, а заголовки сообщений — в h4. Вы должны это изменить.

Google придает наибольшее значение SEO для тегов заголовков h2. Он считает, что текст в таких тегах наиболее релевантен странице или публикации. Затем h3 и так далее по иерархии тегов заголовков. Желательно использовать:

  • h2 для заголовка вашего сообщения
  • h3 для заголовков основного абзаца
  • h4 для подзаголовков и так далее.

Если вы сделаете каждый заголовок h2, Google, скорее всего, проигнорирует их все. Вы можете прочитать много мнений по этому поводу, но наиболее приемлемым для Google и для SEO является то, что указано выше. Это то, что Google задумал с форматом H, и что вам следует делать. Это приводит к проблеме с блогами BlogSpot.

Изменение тегов h4 заголовка Blogger по умолчанию: Google использует заголовок вашего блога (например, BloggingTips.Guru) в качестве основного заголовка в ваших сообщениях. Blogger присваивает заголовкам сообщений теги заголовков h4. Хорошо иметь два тега h2, но я бы не советовал большего. Чтобы изменить настройки Blogger по умолчанию, вы можете сделать следующее:

1) Перейдите на панель управления Blogger и нажмите «Шаблон»> «Изменить HTML».

2) Найдите каждый экземпляр .post h4 и измените его на .post h2 (Совет: нажмите Crtl + F, и вы найдете поле поиска для использования)

3) Сохраните шаблон. Теперь заголовки ваших постов должны быть заключены в теги h2.

Изменение тегов заголовка: Blogger предлагает три варианта заголовка: заголовок, подзаголовок и второстепенный заголовок:

Используйте их, как указано. Если вы когда-нибудь захотите изменить размер шрифта заголовка, просто сделайте это с помощью средства редактирования шрифта. Если вы знаете HTML, нажмите HTML и после тега H добавьте <font size = x) с x в качестве предпочитаемого размера шрифта — не забудьте закончить с </font>.

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

Заголовок SEO и ключевые слова: убедитесь, что каждый заголовок что-то значит. Он должен иметь прямое отношение к следующему контенту, а также содержать ключевые слова. Не злоупотребляйте своими основными ключевыми словами — вы можете использовать их в одном или двух заголовках, но в противном случае используйте синонимы для ключевого слова, связанных терминов или дополнительного ключевого слова, если оно у вас есть. Второе ключевое слово в этом сообщении — «Советы Blogger».

Мэтт Каттс, гуру веб-спама Google, утверждает, что вы можете использовать заголовки h2 несколько раз, когда это необходимо, но не использовать их на всей странице. Итак, h2 вверху, затем h3 и h4 для всех субтитров, если вы хотите их использовать.

Оптимизация изображений

Название изображения: дайте вашим изображениям имя, которое описывает изображение. Не называйте его просто «Изображение-1». Поисковые системы не могут «видеть» изображения, они могут искать только по заголовку и атрибуту Alt (ниже). Не оставляйте пробелов в заголовках изображений. Заполните пробелы символами подчеркивания или дефисами, например: Write-Blog-Posts

Использование атрибута Alt изображения: есть способы выделить ваше целевое ключевое слово на странице так, чтобы оно не было видно вашим читателям. Вы можете использовать атрибуты в HTML отдельных элементов страницы. Например:

Используйте атрибут ‘Alt’ в адресах изображений, например:

<img src = ”Адрес изображения” alt = ”как написать сообщение в блоге изображение 1 ″>

«Адрес изображения» — это веб-адрес изображения, но здесь подходит компонент alt = «как написать изображение 1 в блоге». Если изображение не удается разрешить по какой-либо причине, альтернативный текст будет отображаться на экране. Это объясняет читателю, что должно быть в этой области. Используйте целевое ключевое слово или его производное в кодировке html для каждого изображения.

В блогах BlogSpot вы можете либо изменить HTML-код изображения, как указано выше, либо:

а) Зайдите в редактор поста или страницы

б) Загрузите изображение и выберите его.

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

Щелкните «Свойства», и вы увидите следующее:

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

Размеры изображения: хотя нет особой необходимости включать размеры изображения в его форматирование HTML, это действительно помогает увеличить скорость загрузки, если вы это сделаете. Это фактор вашего рейтинга в Google. Вы можете сделать это с помощью HTML-редактора BlogSpot: <img border = ”0 ″ src =” http: //BlogSpot-image-address/Write-Blog-Posts.JPG ”height =” 240 ″ width = ”320 ″>

D. Якорный текст в ссылках

Это не столько «как сделать», а «как не делать»! Было время, когда Google вознаграждал вас за использование текста привязки ключевого слова в ссылках на странице. Не сейчас! Только не после обновления алгоритма Penguin! Теперь Google может рассматривать текст привязки, содержащий ключевые слова, как спам по ключевым словам и помечать ваш сайт.

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

Вот как использовать якорный текст в 2017 году:

  • Используйте голые URL-адреса, например bloggingtips.guru.
  • Используйте бренд сайта, например BloggingTips.Guru.
  • Используйте собственный бренд продукта, связанный с вашим сайтом.
  • Используйте длинные ключевые слова в своей ссылке, например, ознакомьтесь с этими советами по SEO на странице для блогов BlogSpot.

Это относится ко всем ссылкам, которые вы публикуете в своем блоге. Вы можете продавать некоторые продукты или размещать ссылки на другие блоги или веб-сайты на панели навигации. Если вы используете якорный текст, он будет платить вам за использование бренда, названия веб-сайта или URL-адреса целевой страницы, вместо того, чтобы пытаться использовать ключевое слово, чтобы повлиять на ваш рейтинг в Google. Google рассматривает такую ​​практику как «ссылочный спам».

E. Комментарии и гостевые блоги

Преимущество SEO, которое имеет блог перед статическим веб-сайтом, — это свежий контент, который поставляется с каждым постом. Еще одно преимущество — это комментарии. Содержательные комментарии могут творить чудеса с SEO вашего блога, но они также могут разрушить его. Не нужно много немодерируемых спамерских комментариев, чтобы пост в блоге потерял свой рейтинг!

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

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

Резюме полезных советов Blogger и SEO для BlogSpot

Отправка вашего блога в Инструменты Google для веб-мастеров, вероятно, является наиболее важным действием SEO, которое вы можете предпринять с любым веб-сайтом или блогом, но это не имеет ничего общего с SEO страницы. Следуйте приведенным выше полезным советам Blogger, и вы сделаете все возможное, чтобы получить максимально высокий рейтинг для своего блога BlogSpot.

SEO — это не уловки или иллюзии. Это не об обмане Google или любой другой поисковой системы. Эти на странице советы по SEO для блогов BlogSpot помогут вам достичь наивысшего рейтинга в Google, следуя рекомендациям Google.

Поделиться

Твитнуть

Поделиться

97 раз поделились

Бабушкин сундук: Красивое оформление заголовков статей


Красивое оформление заголовков статей — это элемент дизайна блога. Не каждому блогу он подходит, но выбор — за автором. 


Блог можно оформить с помощью скриптов, вставленных во вкладке «Дизайн» с помощью гаджета «HTML/JavaScript».

Чтобы добавить скрипт «Красивое оформление заголовков статей»,  в административной панели Blogger нажмите на вкладку «Дизайн» > «Добавить гаджет» > «HTML/JavaScript».

В содержание гаджета вставьте HTML-код (заголовок добавлять не нужно):

<style>.post h4 {
background: url(«http://3.bp.blogspot.com/-gLnHp4LoL-Q/T-hYlORTm3I/AAAAAAAAA0s/IN1bvxW-hwg/s1600/h4.png») no-repeat 4px center transparent;
font-size: 20px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #DAA520;
border: 3px solid #DAA520;
text-shadow: 0 1px 0 #DAA520;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
-moz-box-shadow: 0 1px 3px #DAA520, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 3px #DAA520, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 3px #DAA520, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}
</style>

 Только гаджет поставьте в footer блога, чтобы он не отражался в сайдбаре. 

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

Для этого в Таблице HTML-кодов цветов  возьмите код другого цвета, к примеру, красного #FF0000.

Этим кодом нужно заменить в HTML-коде все коды, выделенные красным цветом. Посмотрите, что получится…



Буду рада, если вы поделитесь статьёй в социальных сетях, нажав на кнопочки:

Следует ли использовать теги h2, h3 или h4 в сообщениях блога?

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

Что такое HTML H-теги?

H-теги в HTML — это теги, которые обозначают заголовки в части контента.Всего , шесть из них в HTML, от h2 до H6. Эти шесть заголовков поддерживаются всеми основными веб-браузерами и существуют с первых дней HTML, что делает их устаревшим стандартом. Согласно W3Schools, h2 обозначает самый важный заголовок, а каждое последующее число является менее важным заголовком, вплоть до H6 как относительно неважного заголовка.

Заголовки используются для двух целей. Первая цель — стилизовать в дизайне вашего сайта. Когда вы помечаете части вашего кода как h2, вы можете затем использовать CSS для указания атрибутов для всего содержимого h2.По умолчанию заголовки h2 отображаются в виде блочного текста размером 2em, с большими полями, чем у стандартного текста, и с полужирным форматированием. Однако, настроив свой CSS, вы можете настроить что угодно в своих заголовках. Преимущество этого, конечно же, заключается в единообразии в масштабах всего сайта. Вы можете изменить размер, цвет или стиль для всех заголовков на вашем сайте одновременно, отредактировав одну запись в файле CSS вашего сайта. Как правило, каждый заголовок имеет меньший размер и меньшее поле, чем предыдущий, пока H6 не станет лишь немного больше и с большим смещением, чем обычный текст.

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

Другими словами, содержание тегов заголовков помогает Google индексировать и анализировать тему сообщений в блоге в целом.

Теперь давайте ответим на несколько общих вопросов о тегах заголовков.

Следует ли использовать теги заголовков?

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

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

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

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

Одно из преимуществ использования тегов заголовков — для целей дизайна сайта. Если вы указываете шрифт, вес и размер заголовков индивидуально в коде страницы и хотите изменить дизайн своего сайта, вам придется просмотреть все свои сообщения и изменить каждое из них.Если вы используете теги h2, h3 и т. Д., Вы можете просто настроить CSS для них из своего центрального документа.

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

Сколько тегов заголовков следует использовать?

Сколько вам нужно! Теги заголовков обозначают заголовки и подзаголовки в вашем контенте. Жестких ограничений на количество заголовков, которые вы можете использовать, нет. Однако есть и передовой опыт.

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

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

Большинство сообщений в блогах будут иметь только заголовок и подзаголовки, и поэтому обычно будут использовать только теги h2 и h3. Вы используете тег h2 для своего заголовка, а затем используете тег h3 для всех своих подзаголовков. В некоторых редких случаях у вас есть очень глубокий, очень подробный пост, в котором есть подразделы.Их названия могут быть в тегах h4.

Давайте обсудим два примера. Во-первых, давайте взглянем на страницу Википедии для HTML. Структурированные данные Википедии — отличная демонстрация использования тегов h2, h3 и h4.

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

  • В самом верху страницы заголовок HTML, определяющий тему страницы, является единственным элементом в тегах h2.
  • Далее по странице отображаются подзаголовки.История, разметка и т. Д. Это следующие по важности для структуры страницы, и все они находятся в тегах h3.
  • В каждом разделе h3 есть подзаголовки, такие как «Разработка» и «Временная шкала версий HTML» в разделе «История». Они находятся в тегах h4.
  • Ниже на временной шкале версий HTML вложены подзаголовки, HTML2, HTML3, HTML4 и так далее. Все это в тегах h5.

Как видите, заголовок можно рассматривать как верхнее вложение, и каждый подзаголовок в этом заголовке форматируется с помощью тега заголовка +1.Итак, все в заголовке h2 — это h3, все внутри каждого заголовка h3 — h4 и так далее. Это может быть понижено до H6 согласно стандартам W3C.

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

  • Самый верхний заголовок, «Руководство по поисковой оптимизации для новичков», заключен в теги h2, также помечен «Jumbotron».
  • Верхний подзаголовок «Введение» также находится в тегах h2, но с другим классом.В этом случае вместо Jumbotron он помечается как заголовок содержимого.
  • Следующий по величине подзаголовок «Добро пожаловать в путешествие по SEO!» — это первый элемент в тегах h3. Это даже не заголовок, это слоган.
  • Далее ссылка «Глава 1: SEO 101» на отдельный документ находится в тегах H5.
  • Теги h4 на странице полностью внизу в нижнем колонтитуле, в углу призыва к действию «получить 10 лучших Moz».

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

Можно ли использовать H7 и выше?

Да и нет. Теги для H7 и выше — , не поддерживаются ни W3C, ни современными браузерами. Я полагаю, вы можете создать их сами как ссылки для CSS, но они не будут обрабатываться так же, как механически h2 — H6. Без специального форматирования CSS, прикрепленного к ним, они не будут отличаться от обычного текста.

Кроме того, очень редко у вас есть структура сайта, которая включает столько уровней, что вам нужен H7 и выше.На этом этапе вам может быть лучше разделить свой h2 на разные страницы, а не на подразделы одной страницы. Сделайте каждый h3 своим собственным h2 на его собственном URL и сделайте страницу индекса из того, что раньше было страницей h2, со ссылками на каждый h3 как на новый h2. Или нет! Как доказывает Moz, вы можете делать практически все, что захотите. Пока код не нарушен явно, это не имеет большого значения.

Могут ли теги заголовков появляться не по порядку?

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

Тем не менее, как доказывает Моз, на самом деле не имеет значения, что вы делаете со своими тегами заголовков, когда у вас так много всего интересного. Теперь, не пострадает ли сайт меньшего размера от SEO из-за неправильного использования тегов заголовков? Может быть. Moz имеет огромное влияние, так что неправильное использование тегов заголовков, скорее всего, вообще не повлияет на их поисковый рейтинг.Лично не тестировал.

Можно ли использовать более одного тега заголовка?

Да! Фактически, кроме тега h2, это предполагаемое использование всех тегов заголовков. Думайте об этом как о книге или вернитесь к примеру из Википедии. Должен быть только один тег h2 в качестве названия вашей книги или названия вашей страницы. Таким образом, в книге может быть много глав, и каждая глава может быть h3, не противореча друг другу.

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

Чего следует избегать с тегами заголовков?

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

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

Избегайте использования более одного тега h2 на странице. Moz является противоположным примером этому, но в целом вам нужен только один тег h2 на вашей странице, включающий заголовок сообщения в блоге. Moz имеет специальное помеченное форматирование для их super-h2 и их обычного h2, с чем я не согласен. Нет никакой функциональной разницы между их h2 Jumbotron и их названием h2 по сравнению с использованием h2 и h3. Единственная причина, по которой я могу предположить, что они используют это форматирование, заключается в том, что они использовали глобальное форматирование сайта для h3s в другом месте и нуждались в обходном пути для конкретного формата для этого окончательного руководства.

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

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

Джеймс — профессионал по контент-маркетингу, которому нравится писать полезный контент для блоггеров. Он пишет статьи в Forbes, Entrepreneur, Inc и Business Insider.

Изменить стили заголовка по умолчанию в шаблоне Blogger

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

…

. Этот пост покажет вам простой и эффективный способ сделать это так, как вы хотите.


Теги заголовков обычно должны иметь более крупный шрифт, чем основной текст, но в blogger не все хорошо с тегами заголовков, многие теги заголовков написаны в верхнем регистре, а другие даже меньше, чем текст в основном тексте, и это не то мы действительно хотим.
Вы видите примеры в блогах, использующих простой шаблон, и другие шаблоны, доступные для вашего блога от Blogge. Шаблон, из которого я сделал этот шаблон, был «Простым шаблоном», но вы не увидите заголовков, которые выглядят странно или меньше, чем основной текст, потому что делать такие вещи в Интернете — не ракетная наука.

Фиксация размеров и стилей

Размеры — это одно, а стили — другое. Если вам это не нравится, не храните его, это ваш блог, и у вас есть полный контроль над ним, поэтому вы можете легко его изменить. Все, что вам нужно, это руководства, которые помогут вам в этом. Прежде чем мы его изменим, вы должны понять, как это сделано, CSS. Новичок в CSS? Не волнуйтесь, вам нужны базовые знания о копировании, и вы получите ссылки, чтобы узнать о нем больше. Приведенный ниже CSS может помочь вам решить эту странную проблему с шаблоном.
 h2 {
размер шрифта: 18 пикселей;
текст-преобразование: нормальный;
}
1. Изучите каждое свойство, ценность и попытайтесь понять, что это означает. Простой вид h2 в месте выбора говорит о том, что вставки между фигурными скобками будут применены к тегу

. Вы меняете селекторы по своему желанию. Не волнуйтесь, вы можете использовать разные CSS для разных тегов заголовков, например:

и т. Д.

2. Далее идут стили в скобках. CSS настолько прост для понимания, что вы можете приступить к настройке своего веб-сайта с небольшими знаниями о CSS. Здесь вы можете увидеть, что первое свойство — font-size , я уверен, что вы знаете, что там делать, изменение значения 18 пикселей выполнит свою работу. Убедитесь, что вы указали соответствующее значение, чтобы оно выглядело лучше.

3. Самая распространенная причина, по которой люди хотят это исправить, заключается в том, что некоторые теги заголовков по умолчанию написаны заглавными буквами, и независимо от того, как вы форматировали текст в редакторе сообщений, когда он публикуется, он становится тем, что вы не делаете » даже не ожидал.Различные значения свойства text-transform могут быть прописными буквами | строчные | использовать капитал | нормальный | начальный
Если вам интересно узнать больше об этом свойстве, вы можете сделать это здесь [щелкните ссылку]

Совет: Иногда добавление CSS не отменяет существующие стили для элемента, поэтому нам нужно использовать ! important в конце значения перед точкой с запятой, чтобы принудительно применить его к нему. Например: 

 h2 {
размер шрифта: 18 пикселей! важно;
преобразование текста: нормально! важно;
}

Добавление CSS

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

Нужна дополнительная помощь? Мы всегда готовы дать правильные ответы на ваши вопросы, если вы чего-то не поняли из этого поста, не стесняйтесь комментировать, и если вам помогли, то комментарий может быть полезным, чтобы сказать спасибо!

Как использовать теги заголовков в сообщении блога (с h2 по h6)

HTML-теги заголовков, или теги заголовков, как следует из названия, различают типы заголовков и подзаголовков в сообщении блога.Некоторые люди называют их тегами заголовков или тегами заголовков SEO.

теги h2 — h6 обозначают иерархию важности сверху вниз в html.

Тег h2 — самый важный тег. На каждой странице должен быть один тег h2, зарезервированный для заголовка статьи, страницы или продукта. h3 — h6 затем используются для наименования значимых заголовков. Мы не разрываем цепочку и не пропускаем уровни иерархии, когда пишем, чтобы поддерживать SEO на странице. Например, если заголовок вашей страницы представляет собой тег h2, и вы сразу же следуете за ним тегом h5, иерархия нарушается.Это затрудняет сканирование и категоризацию структуры заголовков поисковой системе.

Преимущества использования заголовочных тегов

  • Структурируйте теги заголовков для поиска
  • Подготовка и разделение контента для конечных пользователей
  • Повышение доступности сайта для людей с ограниченными возможностями
Теги заголовков и SEO:

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

h2 — самый важный тег, и его нельзя пропускать

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

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

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

Теги заголовка для улучшения UX:

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

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

Теги заголовков и специальные возможности:

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

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

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

Чего не следует делать с тегами заголовков

  • Не набивайте теги заголовков ключевыми словами — используйте то, что необходимо, чтобы дать краткое и понятное описание.
  • Не используйте более одного тега h2 на странице — один заголовок h2 на странице позволяет всем знать, чего ожидать от контента.
  • Не используйте теги заголовков в качестве скрытого текста — Скрытый текст давно осуждается поисковыми системами и пользователями.Это никогда не помогает и всегда приводит к штрафам за рейтинг вашего сайта.
  • Не повторяйте теги заголовков на разных страницах вашего сайта. Это сбивает с толку поисковые системы и пользователей. Поддерживайте уникальные теги заголовков по всему сайту.
  • Не используйте идентичный контент для тега h2 и метатега заголовка вашей страницы. Их различие улучшает поисковую оптимизацию и повышает удобство использования.
  • Не использовать теги заголовков для стилизации текста — используйте CSS для создания стиля и используйте теги заголовков для организации и структурирования содержимого.

Теги заголовков и их использование в блоге

Мы всегда были большими сторонниками малого бизнеса.

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

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

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

Может вы понимаете о чем я?

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

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

( Интересно, стоит ли вести блог для своего бизнеса? Прочтите этот пост! )

Что такое заголовочные (или заголовочные) теги?

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

Например, наш заголовок выше, «Что такое теги заголовка (или заголовка)?» — это тег h3. Это говорит Google или любой поисковой системе, которая сканирует наш веб-сайт, что эта информация более важна, чем, скажем, несколько абзацев текста под ней.

Теги заголовков варьируются от h2 до H6, причем h2 является наиболее важным, а H6 — наименее важным.

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

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

Совет для профессионалов: Если вы ведете блог на WordPress, СУПЕР важно, чтобы вы не использовали другие h2 по всему посту или странице вашего блога. Использование более одного h2 на странице — плохая практика SEO.

Когда следует использовать теги заголовков?

Каждая страница — будь то ваш блог или статические страницы веб-сайта — должна включать теги заголовков.

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

Так как ваши заголовки по умолчанию будут h2, вам обычно нужно начинать с h3 и двигаться дальше вниз.

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

Для каждого раздела вы можете начать использовать теги h3, с подразделами, затем использовать h4, h5 и так далее.

Это будет выглядеть примерно так:

  • Название вашего замечательного сообщения в блоге (h2)
  • Первая тема здесь (h3)
  • Вторая тема здесь (h3)
    • подробнее об этом
    • Пример подтемы (h4)
    • Пример подтемы (h4)
  • Третья тема здесь (h3)
  • Заголовок заключительного отчета (h3)

Почему вы находитесь в заголовке Теги важны?

По нашему мнению, теги заголовков имеют двойное преимущество:

1.Теги заголовков отлично подходят для SEO

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

** Заявление об ограничении ответственности : Будьте осторожны, чтобы не перенасыщал заголовки ключевыми словами. Google умнее этого, и вы будете поражены, если попытаетесь спамить по многим ключевым словам вместо того, чтобы писать заголовки, которые имеют смысл для вашего контента.

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

2. Теги заголовков помогают с удобством использования

Видите, что мы там делали?

Мы просто использовали подзаголовки для разбивки нашего большого раздела ( и пробрались в h4, пока мы были! Подлый, подлый, мы знаем. )

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

Это двойной бонус!

Почему? Потому что вы упрощаете жизнь своим клиентам или посетителям — и это делает Google счастливым.

Счастливый Google = более высокий рейтинг вашего веб-сайта

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

Такие вещи, как отзывчивость мобильных устройств и удобство использования (с помощью некоторых тегов заголовков!), Говорят Google, что отправка пользователя на ваш веб-сайт обеспечит хорошее впечатление и ценность, поэтому они с большей вероятностью поставят вас выше, чем сайт, который делает не дает подобного, хорошего опыта.Это беспроигрышный вариант!

Как вставлять теги заголовков в сообщения блога

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

Если вы используете WordPress, HubSpot или аналогичную платформу для ведения блогов, вы должны увидеть панель инструментов для редактирования текста, которая выглядит следующим образом:

** Подсказка: убедитесь, что вы переключили панель инструментов, чтобы увидеть ВСЕ параметры.

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

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

Перед заголовком вы откроете заголовок с помощью

, а после заголовка вы должны закрыть его с помощью

.

Это тот же процесс для других уровней заголовков. Например, этот раздел будет записан в HTML-коде как:

Как вставить теги заголовков

And voila! Вы только что освоили теги заголовков в коде.

(Мы говорили вам, что вы классный?)

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

Как улучшить заголовки

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

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

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

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

Что такое заголовки?

В HTML-коде вашего сайта заголовки появляются между двумя тегами: и .

Однако, когда вы видите эти теги, они обычно связаны с номером. Заголовки идентифицируются в диапазоне от 1 до 6:

В своей основной форме эти числа действительно влияют только на размер текста заголовка.

Заголовки

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

Это заголовки в их самой простой, скучной форме:

См. Pen Pimp My Headers 1 от Chelsy (@mamaneedscoffee) на CodePen.

Barf.

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

Как изменить стиль заголовков

Создать тестовый пост

Первое, что я бы посоветовал вам сделать, это создать новый пост со списком заголовков с 1 по 6. Это упростит просмотр изменений, которые мы вносим в CSS.Просто скопируйте и вставьте следующее в текстовую вкладку экрана редактирования сообщения:

(Или добавьте блок «Пользовательский HTML», если вы используете новый редактор Гутенберга.)

Заголовок 1


Заголовок 2


Заголовок 3


Заголовок 4

Заголовок 5

Заголовок 6

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

Настройка CSS

Теперь перейдите по ссылке WP Customize — слева наведите курсор на Appearance и нажмите Customize :

.

Щелкните вкладку Additional CSS внизу, сделайте вид, что читаете информацию, которую она вам предоставляет, затем нажмите небольшую ссылку «закрыть».Теперь у вас должен быть экран, который выглядит так:

Область слева с цифрой 1 — это место, где мы собираемся начать писать наш код. Скопируйте и вставьте в это место следующее:

h2 {}

h3 {}

h4 {}

h5 {}

h5 {}

h6 {}

Это код CSS, который будет контролировать внешний вид ваших заголовков. Если вы не уверены, что все это означает, прочтите мой пост Что, черт возьми, такое CSS?

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

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

.

Здесь вот-вот произойдет все волшебство.

Элементы заголовка

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

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

Цвет шрифта

Чтобы изменить цвет шрифта, просто добавьте этот фрагмент кода между {} селектора заголовка:

цвет: #xxxxxx;

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

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

После выбора цветов коды заголовков должны выглядеть следующим образом:

h2 {color: # 000000;}

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

Размер шрифта

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

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

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

размер шрифта: xpt;

X — это размер шрифта, а «pt» — единица измерения.

Теперь ваш код должен выглядеть примерно так:

h2 {цвет: # 000000; font-size: 32pt;}

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

Стиль шрифта

Здесь мы собираемся изменить фактический шрифт заголовков. Если вы не хотите вдаваться в подробности использования Google Fonts (хотя это определенно стоит узнать, как это сделать), вы можете придерживаться так называемых «веб-безопасных» шрифтов, которые все веб-браузеры распознают и отображают.

Вы можете щелкнуть здесь список лучших веб-шрифтов.

После того, как вы выбрали шрифт, вы можете добавить его в свой код CSS следующим образом:

font-family: «Название шрифта»;

Обязательно заключайте название шрифта в одинарные кавычки (‘).Также не забудьте указать точное название шрифта.

Тада! Теперь ваш код CSS выглядит так:

h2 {цвет: # 000000; размер шрифта: 32pt; font-family: ‘Arial Black’;}

И ваши заголовки должны выглядеть немного иначе.

Вот пример того, как должен выглядеть код:

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

Давай сойдем с ума

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

Заголовок с фоновым изображением

См. Pen Pimp My Headers 2 от Chelsy (@mamaneedscoffee) на CodePen.

Вы заметите, что здесь есть несколько новых фрагментов CSS, помимо размера шрифта и цвета.

Прежде всего, свойство font-weight устанавливает жирность текста, в то время как код выравнивания текста центрирует текст.

Во-вторых, свойство background указывает нашему сайту отображать фон за заголовком. #Fff указывает, что если есть какие-либо прозрачные части фонового изображения, то будет отображаться белый цвет. Следующий фрагмент, url (”), , содержит прямую ссылку на фоновое изображение.

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

Заголовок с тенью текста

См. Pen Pimp My Headers 3 от Chelsy (@mamaneedscoffee) на CodePen.

Вы можете добавить немного глубины своему заголовку, создав текстовую тень с помощью свойства text-shadow.

В этом селекторе много чего происходит. Первое число (в данном случае 5 пикселей) контролирует горизонтальное направление тени. Число 0 поместит его непосредственно за текстом, тогда как положительные числа перемещают тень вправо, а отрицательное число перемещает ее влево.

(Кстати, «px» означает пиксели, что является всего лишь единицей измерения.)

Второе число, снова 5 пикселей, указывает вертикальное направление тени. Положительное число перемещает тень вниз, а отрицательное число перемещает тень вверх.

Третье число, 1px, контролирует размытость тени. Ноль делает его резким и четким — чем больше вы увеличиваете число, тем четче он становится.

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

Порядок номеров в скобках: красный, синий, зеленый. 0,4 указывает на непрозрачность цвета. 1.0 будет отображать истинный цвет, а 0.0 будет невидимым.

Уф! Ты в порядке? Я собираюсь показать вам еще один изящный трюк с заголовком:

Заголовок с левой границей

См. Pen Pimp My Headers 3 от Chelsy (@mamaneedscoffee) на CodePen.

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

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

В этом случае мы хотим, чтобы полоска зеленого цвета отображалась ПЕРЕД тегом заголовка.

Здесь есть много другого кода, который заставляет его работать, но на самом деле нет необходимости в настройке этого внешнего вида. Если вы посмотрите на первый фрагмент CSS, h2: после , есть селектор с именем width , и он измеряется в пикселях (px). Вы можете изменить число, чтобы сделать ленту шире или тоньше, в зависимости от ваших предпочтений.

В этом разделе вы также можете изменить цвет границы, изменив цвет фона.

Последний блок управляет внешним видом текста — в основном селекторы color , font-family и font-size .Остальное касается только позиционирования заголовка.

Ваши заголовки ждут!

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

(PS: не забудьте удалить этот тестовый пост или добавить его в черновики, когда закончите!)

Как всегда, если у вас есть какие-либо вопросы, не стесняйтесь обращаться ко мне или оставлять комментарии ниже!

Как создать идеальный тег h2 для SEO

Неважно, управляете ли вы крошечным семейным магазином или огромной корпорацией; контент-маркетинг работает.

Вы только посмотрите, как резко выросла индустрия контент-маркетинга в последние годы.

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

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

Но ты другой. Вы читаете эту статью и собираетесь узнать точный метод создания отличных h2s, которые выведут ваш контент-маркетинг на новый уровень.

Что такое h2?

h2 — это HTML-тег, который указывает заголовок на веб-сайте.

Позвольте мне распаковать это.

  • HTML: Это означает язык гипертекстовой разметки. Большинство веб-сайтов используют этот язык для создания веб-страниц.
  • Тег: Тег HTML — это фрагмент кода, который сообщает вашему веб-браузеру, как отображать содержимое.
  • Заголовок: HTML имеет шесть различных тегов заголовков: h2, h3 и т. Д. H2 считается самым важным тегом, а H6 — наименее важным. Теги часто форматируются от большого (или самого важного) до самого маленького (или наименее важного).

Если бы вы создали h2 в HTML, это выглядело бы так:

Привет, меня зовут первый заголовок!

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

Во-первых, убедитесь, что вы находитесь на веб-странице.

Затем просмотрите исходный код.

Для этого я использую сочетание клавиш для Chrome (Mac): command + Option + u (не нажимайте знак плюса, просто удерживайте command, option и u одновременно).

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

Вы также можете щелкнуть View → Developer → View Source (в Chrome):

Это то, что вы увидите при просмотре исходного кода:

Затем найдите тег h2.

Нажмите CTRL + F, чтобы открыть функцию поиска в браузере. Опять же, я использую Chrome, но большинство браузеров используют эту функцию.

Когда я нажимаю CTRL + F, я вижу небольшую строку поиска в правом верхнем углу окна браузера.

Тип «h2.»

Затем нажмите Enter.

Chrome выделяет h2 на этой странице.

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

Копия в теге h2 — «Как поддерживать активность и вовлеченность вашей группы в Facebook.”

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

Почему H2s так важны?

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

В целом посещаемость моего блога была довольно хорошей, но я решил еще раз присмотреться к нему, чтобы выявить улучшения. Одним из таких улучшений было обновление h2 в одной из моих статей.В течение трех дней на странице было на 85% больше органического трафика. Кроме того, он переместился со страницы 3 поисковой выдачи на страницу 1, позицию восьмую!

Все потому, что поменял х2.

Я не единственный, кто пережил такие резкие перемены. Фактически, мой рост поискового трафика ничто по сравнению с местным магазином автозапчастей в Хьюстоне, штат Техас, который изменил названия своих страниц и h2s. Результат?

В таблице все сказано:

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

h2 всегда были основным фактором ранжирования.

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

В последнем исследовании Moz по факторам ранжирования в поисковой сети теги заголовков указаны как второй по важности фактор ранжирования. Хотя это не всегда так, многие используют один и тот же тег заголовка. и h2.

h2 — это обычно наиболее заметный визуально контент на странице и, вероятно, самая важная функция SEO.

И сначала может показаться, что h2s — это вообще не функция «SEO», потому что это больше о пользователе, чем о технической оптимизации страницы, верно?

Верно! Это направление, в котором SEO пошло в последние годы. SEO — это больше об оптимизации пользователей, чем об оптимизации для поисковых систем .

Не упускайте идею о том, что пользователи замечают h2. Это имеет значение.

h2 — один из самых мощных элементов SEO и UX на странице, которые есть в вашем арсенале.

А теперь давайте разберемся, как их использовать.

Как D o Я создаю убийцу H2S?

h2 — не большой секрет. Дело в том, что их использует практически любой, кто хоть что-нибудь знает о SEO или HTML.

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

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

Вот правила создания h2.

1. Используйте Only One h2

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

Почему нет? Если один хорош, разве не лучше два или шестнадцать?

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

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

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

2. Ваш h2 должен описывать тему вашей страницы

На самом базовом уровне h2 должен описывать содержание.

  1. Часто тег h2 будет похож на тег заголовка или совпадает с ним.
  2. Обычно тег h2 будет заголовком вашего сообщения в блоге или статьи.
  3. Обычно тег h2 дает читателю четкое представление о том, что он собирается читать.

3.

В h2 должно быть от 20 до 70 символов

Если ваш h2 слишком короткий, вы тратите ценное пространство; если он слишком длинный, вы ослабляете силу тега.

Однако, если вы используете тот же тег h2 и title для страницы, вам следует уделять больше внимания.В соответствии с передовой практикой заголовки должны содержать от 40 до 60 символов, чтобы вы могли уместить большинство ключевых слов. Однако, когда вы начнете достигать диапазона ключевых слов 50-60, ваш CTR может начать снижаться. В результате старайтесь придерживаться диапазона 30-40 символов.

4. Сделайте свой тег h2 заметным

Ваш h2 должен быть самым важным визуальным элементом на странице.

  1. он должен быть большим
  2. он должен быть сильным
  3. он должен быть заметным
  4. вы должны использовать любые визуальные элементы, элементы форматирования и стиля, необходимые, чтобы выделить эту вещь

Почему это важно?

Имейте в виду, что h2 — это семантический элемент, а не визуальный элемент, и важно сохранить это различие.Веб-дизайнерам не нужно добавлять элементы стиля с помощью семантических тегов, таких как h2, h3 и т. Д.

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

Размер имеет значение в веб-дизайне, а семантические теги имеют значение в веб-разработке. Объединение их в SEO имеет смысл.

Хороший пример такого форматирования можно найти в блоге Smart Passive Income.H2 Пэта Флинна определенно силен.

Когда я проверяю исходный код, я вижу следующее:

Вот еще один хороший пример от Рамита Сетхи.

Сможете угадать, что у него на h2?

h2: «Вы знаете свой потенциал заработка».

5. Создавайте h2s, которые обеспечивают хорошее взаимодействие с пользователем

SEO сильно изменился за последние несколько лет. Самым большим изменением на сегодняшний день стало влияние пользовательского опыта (или UX) на SEO.

Лучший способ рассмотреть SEO и UX — это диаграмма Венна (чтобы получить доступ к ссылке, вы должны загрузить расширение для Chrome).

Эта диаграмма была опубликована в 2012 году.

Спустя почти десять лет круг SEO станет меньшим кругом внутри еще большего круга дизайна и удобства использования.

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

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

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

Это потому, что это заметно. Он отправляет сообщение. Он передает настроение. Это обещание.

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

6. Используйте фокусированное длиннохвостое ключевое слово в своем h2

Хотите верьте, хотите нет, но некоторые оптимизаторы поисковых систем не рекомендовали использовать ключевые слова в ваших h2s. Они думали, что это можно рассматривать как наполнение ключевыми словами, за что Google давным-давно наказал.

К счастью, в использовании ключевого слова в h2 нет ничего лишнего. Напротив, Google хочет, чтобы вы использовали ключевое слово в h2.Это помогает их сканерам лучше понять, о чем ваша страница.

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

Лучше использовать ключевое слово; иногда именно длиннохвостое ключевое слово.

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

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

Это страница из блога Crazy Egg.

Статья о бандитских испытаниях.

Самый заметный визуальный элемент на странице — «Глоссарий: бандитское тестирование». Это тоже h2.

Вот факты об этой странице:

  • Название : Что такое бандитское тестирование? The Crazy Egg Glossary
  • The h2 : Глоссарий: Bandit Testing
  • Ключевое слово: bandit testing

Их ранг на момент публикации этой страницы (впоследствии он был обновлен)? Страница Google 1, позиция пятая! Эта позиция была заработана всего через две недели после публикации статьи.

В этой статье используется более длинный подход. Ключевое слово в этом сценарии — «Взлом видеообъявлений Facebook».

Это ключевое слово включено в заголовок блога, и это также тег h2.

Всего через две недели после публикации статья оказалась на первой странице, позиции 5 в Google.

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

Однако следуйте нескольким простым правилам:

  • не заставляйте его
  • делайте естественным
  • не используйте ключевые слова!

7.Ответьте на намерение пользователя с помощью h2

Фраза «намерение пользователя», кажется, сбивает с толку некоторых людей, но на самом деле это довольно просто.

Всякий раз, когда вы пишете контент, вы хотите задавать такие вопросы, как:

Что хочет пользователь, открывая мою статью?

Каковы их намерения?

Ваш h2 должен удовлетворить это намерение.

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

Если бы я написал статью на эту тему (о, подождите, я написал!), То я хотел бы ответить на их намерения своим h2.

Вот как работает путь намерения.

Сначала пользователь получает представление. Затем они ищут это в Google.

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

Если они нажмут на нее, они увидят мою статью в блоге по этой теме.

Моя цель с этим тегом h2 — пообещать им то, что они искали: некоторые простые, но рискованные SEO-тактики, которые могут увеличить их трафик.

Так объясняет это Марк Пуртелл в SEJ :

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

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

  1. Используйте только один h2
  2. Ваш h2 должен описывать тему вашей страницы
  3. Сделайте ваш h2 выделяющимся
  4. Создайте h2s, которые обеспечивают хорошее взаимодействие с пользователем
  5. Используйте целенаправленное длиннохвостое ключевое слово в вашем h2
  6. Ответьте пользователю намерение с вашим h2

Преобразуйте свой веб-сайт за 1 неделю с помощью аудита тегов h2

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

Я вижу, что многие люди тратят много времени на «аудит содержания» своих веб-сайтов. Я не против аудита контента; но вместо того, чтобы проводить полноценный аудит контента на вашем веб-сайте, я предлагаю вам сначала провести аудит тега h2.

Аудит

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

1.

Загрузить Screaming Frog

Вы можете сделать это на сайте Screaming Frog.

Щелкните «SEO Spider Tool».

Затем нажмите «Загрузить».

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

2. Откройте Screaming Frog

Когда вы успешно загрузили Screaming Frog, откройте его.

3.Введите свой URL-адрес

4. Нажмите «Пуск» и дождитесь завершения процесса сканирования

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

Обычно Screaming Frog просматривает 500 страниц меньше минуты.

5.

Щелкните h2 в строке меню

Здесь вы увидите список всех тегов h2 на вашем сайте.

6.

Проверить h2 Теги

Щелкните меню фильтра.

Сначала найдите отсутствующие h2, просто выбрав «Отсутствует» в поле фильтра.

Вы увидите список всех страниц вашего сайта, на которых отсутствует тег h2.

Ваша первая задача — создать h2 для каждой из этих страниц.

(Если, конечно, у вас нет причины , а не . Моя страница / блог — это страница меню для выбора статей, которые я регулярно добавляю и обновляю, поэтому я решил не включать h2).

Щелкните «Экспорт».”

Найдите хорошее место для сохранения файла.

Это CSV-файл, поэтому вы можете открыть его в Excel.

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

Наконец, добавьте фильтр ко всем «множественным» h2s. Опять сохраняем список

Теперь вернитесь в меню фильтров и выберите «Все». Экспортируйте список. На данный момент у вас должно быть четыре файла CSV.

7.Создать новые теги h2

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

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

Однако, если у вас есть время, обновите все свои h2 в соответствии с правилами, которые я предоставил выше.

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

h2 Тег FAQs Что такое тег h2?

Теги h2 — это главный заголовок веб-статьи. На странице должен быть только один h2.

Важны ли h-теги для SEO?

H-теги важны для SEO, потому что они сообщают Google, о чем ваша страница, поэтому алгоритм может определить, по каким терминам вы должны ранжироваться.

Какой длины должен быть тег h2?

Большинство экспертов считают, что длина h2 должна составлять от 20 до 70 символов.

Сколько h2s должно быть на вашей странице?

На вашей странице должен быть только один h2.Если у вас есть что-то большее, Google подумает, что вы пытаетесь обмануть систему, и накажет вас.

Как оптимизировать h2s

Заключение

Если вы читали эту статью, то знаете о тегах h2 больше, чем большинство людей. Что еще более важно, вы точно знаете, как использовать h2s для максимального воздействия на SEO.

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

Каковы ваши лучшие практические советы по h2?

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

  • SEO — разблокируйте огромное количество SEO-трафика.Смотрите реальные результаты.
  • Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
  • Paid Media — эффективные платные стратегии с четкой окупаемостью.

Заказать звонок

заголовков блогов: 20 отличных примеров и передовых методов

Заголовок , вероятно, первое, что видит новый посетитель в блоге, так что это первое впечатление — но почему заголовок блога настолько важнее или, по крайней мере, отличается от заголовка базового веб-сайта?

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

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

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

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

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

Давайте копнем глубже…

Какое настроение нужно настроить, чтобы привлечь правильную целевую аудиторию?

Когда посетитель впервые заходит на какой-либо тип веб-сайта, первое, что он определяет, — это «личность» блога — и подходит ли он им.

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

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

Как первое впечатление через заголовок может передать суть блога?

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

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

Как заголовок блога может создать первое впечатление: «Я отличаюсь от других»?

Другими словами, «Как этот блог запомнится?» “

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

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

Какие фрагменты контента должны быть немедленно заметны, чтобы создавать более эффективные действия? (переход по ссылкам, подписка и т. д.)

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

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

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

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

1.Учебник9

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

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

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

2. Home Design Find

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

Затем взгляд переводится к первому набору навигации, где четко отмечена страница «О нас», а также страница контактов.Изображения справа задают настроение и служат источником вдохновения для тех, кто интересуется темой этого блога.

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

3. Блог о дизайне блога

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

Немного ниже и более мелким текстом указано количество читателей и ссылки на RSS-канал, а также основная навигация для более подробного изучения того, о чем блог, или самого контента.

4. Кевин Джон Гомес

Обращение и фотография, нарисованные от руки, делают тему этого блога индивидуальной и соответствуют названию веб-сайта — самому веб-мастеру. Это личный блог творческого человека, и заголовок прекрасно передает это.

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

5. Naldz Graphics

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

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

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

Также есть дополнительный контент сверху, в традиционном месте для этого типа контента, поэтому его можно легко найти.

6. Профессиональный дизайн блога

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

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

7. Октябрь

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

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

8. Марк Форрестер

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

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

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

9. Cult-Foo

Это просто красивый заголовок, который ежедневно привлекает внимание многих читателей. Настроение задано как творческая и вдохновляющая тема, которая привлекает только нужную аудиторию. Логотип в этом заголовке является «источником» остальной части заголовка — прямоугольником, который ведет к остальной части дизайна.

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

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

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

10. Vectips

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

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

Забавная иллюстрация справа задает настроение и наводит взгляд на навигацию вверху.

11. Пост на неполный рабочий день

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

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

12. TutCandy

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

Справа есть слоган, объясняющий, что такое блог и чем он отличается: «Только самые вкусные руководства по дизайну». Несмотря на то, что это в первую очередь простая и увлекательная игра слов, есть несколько ключевых слов, которые вызывают у читателя положительное суждение.«Только» — уникальное, оригинальное, единственное в своем роде.

Он отвечает на вопрос «Чем этот блог отличается от других?» вопрос. «Самый вкусный» — таким слоганом можно было бы назвать «Учебники по вкусному дизайну». Это не только звучит немного странно, но и не подразумевает какого-либо приоритета над другими учебными пособиями по дизайну или другими учебными блогами.

Вверху также находится навигация по блогу и панель поиска справа. Непосредственно ниже содержание определено и организовано, что побуждает читателя глубже копаться в блоге.

13. Йоаст

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

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

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

14. Этот инди-чувак

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

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

15. Ozon3

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

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

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

16. Студия nDesign

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

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

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

17. Web Designer Wall

Это еще один замечательный блог Ника Ла из nDesign Studio, и мы видим похожую технику: потрясающий большой фон / заголовок, подтверждающий таланты и опыт дизайнера.Логотип здесь крупнее, он представляет собой слоган, связывающий название блога с его назначением.

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

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

18. Ma.tt

Кажется, существует окончательное правило веб-дизайна — не делать заголовки более 200–250 пикселей. Это отличное правило, которому следует следовать по разным причинам, но этот заголовок показывает, как эффективно его нарушить.

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

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

19. Pixel Resort

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

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

20. Депо веб-дизайнеров

Ах, да — блог, который вы сейчас просматриваете. Независимо от того, посещаете ли вы сайт впервые или уже давно читаете Webdesigner Depot, заголовок определенно привлечет ваше внимание.

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

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

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

Заключение

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

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

Написано Кайлой Найт специально для WDD.

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

.

Читайте также

Иерсиния псевдотуберкулеза: симптомы, диагностика и лечение инфекции

Как помочь ребенку научиться правильно произносить звук «Р»: советы логопеда

Уход за пупочной ранкой новорожденного: правила обработки, средства и советы

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

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