Анатомия заголовков H1-H6 для оформления и структуризации контента. Составляем правильный h1 и структуру подзаголовков

Здравствуйте, дорогие читатели. Сегодня хочу уделить особое внимание теме заголовков в тегах h1 h2 - h6, т.к. в ближайшее время планирую (как и обещала) несколько практических статей по редактированию заголовков в шаблонах. Но прежде, чем осваивать что-либо на практике, я считаю, нужно пусть не знать, но понимать теорию. Давайте с самого начала определимся с понятиями, с тем, что такое заголовок в HTML документах, заголовок на сайте, странице.

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

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

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

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

Любой документ включает в себя три основных HTML тега:



Здесь находится техническая информация о документе +
заголовок страницы в тегах
</b>Заголовок страницы<b>


Здесь находится основное содержимое сайта, статьи, которые имеют заголовки в тегах:

Заголовок сайта или статьи


Заголовок статьи


Подзаголовок статьи


Другие блоки с информацией


Другие блоки с информацией

Другие блоки с информацией


Итак, из кода выше, мы видим, что HTML документ имеет свой заголовок , в котором располагается техническая информация, здесь же находятся и мета-теги, и один из самых важных тегов в seo - , который содержит в себе <b>заголовок страницы </b>. Именно этот заголовок видит каждый пользователь на вкладке браузера. Этот заголовок не имеет прямого отношения к заголовкам, которые находятся в теле <body> документа, но между ними есть тесная .</p> <p>Второй по значимости тег в seo – и является тег заголовка <h>.</p> <p>Итак, любая поисковая система придает большое значение этому тегу. Как приводила пример с книгой, именно он (вместе с title) сообщает тему страницы, о чем она, обобщает смысл статьи. Именно этот заголовок сообщает вам, о чем будет моя статья, которую вы читаете. Мы с вами видим, что такие заголовки всегда отличаются внешним видом от основного содержания страницы. Для этого и были придуманы специальные теги, которые отвечают за то, чтобы информация в них всегда была выделена.</p> <p>С одной стороны, тег, как бы один <h>, но с другой стороны, их шесть и все они пронумерованы в порядке своей значимости, и что очень важно, не просто значимость, а ещё и иерархия. Вот с этого момента начинается самое запутанное и непонятное – как определить значимость, что является более значимым, а что нет?</p> <p>Давайте просто рассуждать логически. Вот у нас главная страница на сайте. Как правило, главная страница отражает всю тематику сайта в целом. И в идеальном варианте – название сайта так же должно отражать всю тематику сайта. Значит, название сайта должно быть заголовком, причем, самым главным заголовком, т.е. в теге:</p> <blockquote><p><h1>Название сайта</h1>.</p> </blockquote> <p>Далее, не обязательно, но как правило, на главной странице должно быть какое-то обращение к посетителю, и в идеальной ситуации, это обращение должно включать в себя заголовок, который в свою очередь должен содержать в себе тематику сайта (ключевое слово, отражающее тематику сайта). Значит, этот заголовок должен быть в теге:</p> <blockquote><p><h2>Заголовок статьи-обращения к посетителю</h2>.</p> </blockquote> <p>Далее, в этой статье-обращении может (а я настаиваю на том, что <b>должен </b> ) быть подзаголовок, которые ещё более раскрывает все аспекты тематики сайта. Так же включает в себя какие-то ключевые слова, которые могут быть или должны быть близки к названию сайта или заголовка статьи. Такой подзаголовок должен быть в теге:</p> <blockquote><p><h3>Подзаголовок статьи</h3>.</p> </blockquote> <p>Давайте представим такую страницу.</p> <p>Вот таким образом мы распределяем теги заголовков. Стоит заметить, что если вместо заголовка вы используете картинку-баннер, то оформлять его в тег заголовка не нужно.</p> <p>Остаются два немаловажных вопроса:</p> <p>Как использовать остальные теги – 4, 5, 6</p> <p>И нужно/можно ли использовать теги заголовков в меню/сайдбаре?</p> <p>На первый вопрос отвечаю, что использовать именно все теги заголовков не обязательно.</p> <p>На второй вопрос однозначного ответа нет. Но я имею такое мнение, что если в сайдбаре есть такой информационный блок, в котором находится информация о сайте, информация, отражающая тематику сайта, то необходимо такие блоки оформлять тегами заголовка.</p> <p>Например, это может быть блок: <i> </i>. В заголовке такого блока находится ключевое слово, которое отражает тематику всего проекта. Поэтому такой блок стоит оформить в заголовок <h4>.</p> <p>Тут может возникнуть такой вопрос: А почему его не оформить в более высокого ранга тег? Ответ так же можно попробовать получить логическим путем.</p> <p>Как правило (подчеркиваю, как правило ), современная верстка сайта имеет такую структуру:</p> <p>Заголовок сайта<br> ↓<br> Основное содержание страницы<br> ↓<br> Сайдбар<br> ↓<br> Футер/подвал страницы</p> <p>Т.е. именно в таком порядке поисковый робот видит всю информацию на странице.</p> <p><b>Второе </b>, что мы должны знать – все теги заголовков имеют свою иерархию (об этом писала выше), и не допустимо, чтобы тег третьего порядка был выше тега второго порядка.</p> <p>Казалось бы, на все вопросы ответили, и тема должна быть исчерпана, но не все так просто. Дело в том, что, как правило, внутренние страницы отличаются от главной, при этом, так же важно, чтобы они тоже были хорошо оптимизированы, чтобы мы получали с них трафик с поисковых систем. Поэтому, для них очень желательно применять свою иерархию заголовков.</p> <p>Из моей картинки в примере, если на сайте есть отдельные статьи о <i>Продвижении в поисковиках </i> и <i>Продвижении в социальных сетях </i>, то, для внутренней структура заголовков должна быть такой:</p> <p><img src='https://i1.wp.com/lh5.ggpht.com/_G92voTj-yF0/TS3-kbdapZI/AAAAAAAABEI/r7T-C94lU5I/s800/seo-zagolovka-statey%5B4%5D.gif' width="100%" loading=lazy></p> <p>Т.е. уже заголовок сайта не имеет такого важного значения, как заголовок статьи (может, мой пример, не самый наглядный, т.к. везде присутствует слово “продвижение”). Такая расстановка заголовков значительно улучшает ранжирование страниц в поисковых системах, тем самым увеличивая переходы пользователей с них.</p> <p>Выше я написала, что это <b>желательно </b>, но не надо биться головой о стенку, если это невозможно сделать. Платформы, шаблоны и знания у всех разные, и если не получается, то лучше сконцентрироваться на чем-то другом, направить свои действия на улучшение того, что лучше получается. Ведь успешное продвижение в поисковых системах зависит от совокупности целого ряда факторов. Чем больше мы уделяем внимание внутренней оптимизации, тем меньше нам требуется внешняя. Если внутренняя уже исчерпала себя, то надо переключаться на внешнюю оптимизацию.</p> <p>Данная статья направлена, в первую очередь, на понимание темы, теории. В век CMS правильно сделать заголовки не сложно, но к сожалению, для этого надо обладать более глубокими знаниями в сайтостроении и программировании. И если для основного большинства моих читателей данная статья больше для ознакомления, то для тех, кто когда-нибудь будет заказывать создание сайтов Чебоксары или в любом другом городе мира, составлять техническое задание для верстальщика, программиста, создавать свой сайт самостоятельно, сможет либо объяснить, либо применить эти знания на практике.</p><p>Например, я давно собираюсь поэкспериментировать с шаблоном, и сделать именно так, как описала в статье, потому что считаю это самым оптимальным вариантом. Но я пока не так сильна в XML (для Blogger) и в PHP (для WordPress), чтобы сходу сообразить, как для разных страниц сделать разные заголовки. Но зато, после этой статьи у меня будет больше стимула воплотить свои идеи на практике, и я обязательно расскажу вам, как это у меня получилось. Естественно, не только расскажу, но и поделюсь. </p><p><b>Статьи про то, и готовы. </b></p> <p>Если какие-то вопросы я раскрыла не достаточно полно, спрашивайте в комментариях, дополню. Пишу эти слова, т.к. чувствую, что в голове ещё что-то осталось недосказанное, но никак не могу вспомнить, что. Поэтому спрашивайте.</p> <p>Задумывались ли вы когда-нибудь о том, чтобы вести коллективный блог или хотя бы найти второго автора для своего блога. Если такие мысли вас посещают, то стоит обратить внимание на статью Недостатки нескольких авторов блога . Там же, на блоге, можете найти статью и о достоинствах.</p> <p>Желаю удачи в развитии ваших блогов.</p> <p>Что такое заголовок, знает абсолютно каждый. Это емкое, привлекательное название, в котором при всей лаконичности заключается суть целой публикации, статьи и т. д. Но заголовок на странице сайта - это не совсем то, что мы привыкли видеть в газетах, журналах или книгах. Почему? Попробуем разобраться.</p> <h2>Что такое H1?</h2> <p>H1 - это главный заголовок в статье, заголовок первого уровня. Каждая страница в интернете имеет свою структуру. Заголовки H1-H6 как раз и позволяют правильно структурировать материалы, причем как для поисковиков, так и для пользователей. H1 - главный заголовок, H2-H6 второстепенные, вложенные подзаголовки. В коде заголовки выглядят так: <h1>сам заголовок</h1>, цифра как раз и обозначает уровень заголовка.</p> <p>Заголовки в Интернете служат не только для обозначения структуры и сути описываемого, но и для оптимизации сайта. Чтобы вывести сайт на видимые позиции в выдаче, пишите правильные заголовки, соблюдая 2 простых условия:</p> <h2>Условие 1. Ключевые слова в заголовках</h2> <p>Для этого у вас должно быть разработано качественное семантическое ядро - отнеситесь к нему крайне ответственно и помните, что один и тот же ключ вставлять на все страницы сайта нельзя. Релевантность всему голова: нужно соответствовать ожиданиям клиентов и поисковиков. В заголовках главной страницы можно брать среднечастотные и высокочастотные запросы. А на товарных страницах (карточка товара) вполне допустимы заголовки с низкочастотными ключами. Ключ должен вести на конкретную позицию или единицу, быть точным, а не обобщенным.</p> <p>Размещая ключевые слова, делайте это аккуратно: не злоупотребляйте ключами и не составляйте спамные заголовки (например, <i>купить квартиру Москва, купить сумка холодильник, купить мотоцикл Красноярск цена, моя твоя не понимать и т. д. </i>). Сохраняйте красоту фразы и ее логичность. В великом и могучем русском языке слова спрягаются и склоняются, а роботы сейчас понимают смыл, разбираются в языке не хуже нас с вами! И не частите - спам очевиден всем, а так и до Баден-Бадена рукой подать, ну и не забывайте про Панду от Google.</p> <p>Пример, где количество ключей зашкаливает, перебор.</p> <p>Из главного заголовка понятно, о каком товаре пойдет речь. Конечно, в первом абзаце без ключа не обойтись, но делайте это ненавязчиво, а не так открыто и агрессивно.</p> <p>Ну и надеюсь, что никому и никогда не придет в голову затолкать в заголовок все ключевые слова, предназначенные для одной страницы. Ничего хорошего явно не получится. =)</p> <p>Помните, что текст создается не только для поисковых машин, но и для людей. И вообще роботам нравятся человечные, простые и понятные тексты. Если в заголовке ключевые слова органично встанут в начало предложения, то сработает чуточку лучше. Т.е. с точки зрения оптимизации страницы под ключевое слово "гостиницы Москвы" лучше отработает заголовок "Гостиницы Москвы - официальные сайты, обзоры, фото", чем "Обзоры, фото и официальные сайты гостиниц Москвы".</p> <h2>Условие 2. Теги <h1>-<h6></h2> <p>Размещая тексты на сайте, не забудьте правильно расставить теги. Теги для заголовков текста определяются следующим HTML-кодом: <h1>-<h6>. По нашим наблюдениям, вполне хватает двух тегов — <h1>-<h2>. Сейчас большие тексты люди не читают, и даже исходя из логики вещей, вложенность такого количество заголовков не нужна. Исключение могут составлять страницы, где много видео, картинок, интерактивных элементов и т.д. Но это все же исключение, а не правило.</p> <p>Поисковики также учитывают размерность и значимость тегов <h1>-<h2>. При верстке стоит обратить внимание, чтобы заголовки визуально выделялись из общего текста.</p> <p>Ссылки в заголовках использовать не стоит, особенно в <h1>: так вы уведете человека со страницы на другой материал или, если ссылаетесь на эту же страницу, создаете циклическую ссылку, которая ничего хорошего не дает.</p> <p>Допустимо ссылаться с заголовков уровня <h2> и ниже, но тоже если это оправдано и логично.</p> <p>Поисковые роботы придают заголовкам большое значение, поскольку они используются, чтобы обозначить важную информацию. Так машинам будет легче читать текст и понимать его структуру, логику; видеть, что есть самое весомое. Не стоит пытаться схитрить и применять теги <h1>-<h6> для всего текста на странице, ведь толку от этого не будет. Роботы не дураки, и вообще очень ранимые - могут отомстить за это чем-нибудь малоприятными для вашего сайта. Поэтому предварительно подумайте семь раз, последствия страшны. Прописывая заголовки в тексте, придерживайтесь следующих правил:</p> <ol><p>Наводим порядок. Теги <h1>-<h6> расставляются по принципу иерархии: тег <h1> важнее тега <h2>. На деле это выглядит вот так:</p> <p><img src='https://i1.wp.com/1ps.ru/files/blog/2018/technical-side-of-headings-02-mini.png' width="100%" loading=lazy></p> <p>Поисковики перфекционисты: любят верную последовательность, чтобы все было на своих местах, на своих полочках. Поэтому соблюдаем логику: младший сын не может родиться раньше старшего. Такое не допустимо - вот пример с нарушенной иерархией:</p> <p><img src='https://i0.wp.com/1ps.ru/files/blog/2018/technical-side-of-headings-03-mini.png' width="100%" loading=lazy></p> <p>Кроме того, тег <h1> играет важную роль при формировании быстрых ссылок в поисковой выдаче Яндекс.</p> <p>Если все получится, то эффект от такой вроде бы незначительной и легкой работы не заставит себя ждать.</p> <p>А если у вас возникнут сложности - обращайтесь к нашим специалистам , мы готовы проверить, правильно ли прописаны заголовки у вашего сайта, корректно прописать в случае ошибок и ответить на любые вопросы. Составление заголовков для 1 страницы (+подбор 3-х релевантных ключей) - от 450 рублей.</p></ol> <i> </i> <blockquote class="bq-idea"><p>На моих топовых информационных проектах сначала специалист в тематике составляет структуру статьи (заголовки и подзаголовки), а потом уже копирайтеры по ним пишут текст.</p> </blockquote> <p>Структура — это на самом деле очень важно, если вы заморачиваетесь насчет качества. А чтобы составить нормальную структуру, нужно понимание того, как работают теги h.</p> <p>h1 — это главный подзаголовок в статье, который обычно размещен над текстом.</p> <blockquote class="bq-vajno"><p>Первый заголовок должен визуально быть больше остальных заголовков на странице.</p> </blockquote> <p>h2-h6 — это маленькие подзаголовки, которые проставляются по принципу вложенности.</p> <h2><span>Для чего вообще нужны заголовки? </span></h2> <p>Для тех, кто не сильно в теме — вот в принципе неплохое видео про азы составления подзаголовков h1-h6. Если не считаете себя спецом, посмотрите:</p> <p><span class="JuB6WeW7bcU"></span> <span class="JuB6WeW7bcU"></span></p> <p>И для закрепления материала чуть послабее видео:</p> <p><span class="MlX8xFRRAXE"></span> <span class="MlX8xFRRAXE"></span></p> <p>Заголовки призваны в одной фразе или даже слове выделить основную суть, идею последующего текста. Обычно на них человек обращает свое внимание в первую очередь, решая, стоит ли читать остальной материал. Особенно важное значение заголовки имеют в рекламных текстах, письмах, и служат главным инструментом по привлечению внимания целевой аудитории.</p> <p>В коде тег выглядит так: <h1>, где буква h происходит от слова «header», что в переводе значит «заголовок». Каждый уровень обозначается соответствующей цифрой.</p> <h3><span>H-теги глазами людей </span></h3> <p>Текст, разбитый на подзаголовки, смотрится более «опрятно», его проще читать. Современный пользователь уже давно научился сканировать статьи буквально за несколько секунд и оперативно делать выводы, стоит ли читать весь текст, есть ли в нем та полезная информация, которую он ищет. Заголовки цепляют глаз, выделяя главное и давая юзеру возможность проанализировать материал.</p> <p>Теги h1, h2, h3, h4, h5, h6 позволяют создать для читателя некую карту, по которой он сможет быстро сориентироваться в тексте. И если этими выделениями удалось зацепить внимание, то человек задержится на странице и наверняка прочтет всю статью. Проверить результат можно по поведенческим факторам. Если люди задерживаются на странице, совершают какие-либо действия – значит работа по SEO была проделана не зря.</p> <h3><span>H-теги глазами поисковиков </span></h3> <p>Поисковые роботы собирают с них информацию для семантического анализа. Особое значение для ботов имеют заголовки уровней h1, h2, h3. Их непоследовательное или неправильное применение может негативно сказаться на ранжировании станицы. Если в HTML-коде вообще отсутствуют h-теги, то сайту придется туго в продвижении. Уровни h4, h5, h6 менее значимы.</p> <h2>Иерархия H-тегов </h2> <p>Главным правилом в расстановке заголовков является их иерархия. Необязательно, чтобы теги шли друг за другом по размеру, но недопустимо в тексте использовать, например, h3, если у вас нигде не присутствует мета h2 или применять h6 без h5.</p> <p>Вот так выглядит иерархия с правильной вложенностью:</p> <h2>Что за тег h1 </h2> <p>Тег h1 – это оглавление текста (все равно что название книги или заголовок статьи в газете).</p> <blockquote class="bq-vajno"><p>На каждой странице должен быть один и только один тег h1.</p> </blockquote> <p>В плане привлекательности для пользователя он имеет главное значение. Но для SEO-продвижения больший вес будет иметь .</p> <p>Title – это тоже заголовок, но прописывается он не только для людей, но и для роботов. Он отображается не на самой станице, а только во вкладке браузера и в сниппете в качестве активной ссылки на сайт. Фактически title является альтернативным, но главным заголовком для html-документа. Если он отсутствует, то поисковая система берет за основу h1 и использует его в серпе.</p> <h3><span>Почему h1 должен различаться с Title </span></h3> <p>Довольно важно понимать, что h1 и Title — это разные заголовки. И их соответственно надо умело комбинировать. Вот азы на эту тему:</p> <p><span class="U6ODRKPEJ_M"></span> <span class="U6ODRKPEJ_M"></span></p> <p>Пренебрежение правилами уникализации и релевантности заголовков может привести к тому, что сайт попадет под фильтр. Последнее время поисковые системы стали уделять особое внимание качеству контента и его SEO-настройкам. Дубли, переспам, хаотичное расставление заголовков, их несоответствие содержимому карается.</p> <h3><span>Требования по длине H1 </span></h3> <p>H1 рекомендуется делать более лаконичным, чем Title, не превышая количество символов более, чем 50. Но не случится катастрофы, если заголовок получится длиннее, когда не удается втиснуть всю суть в обозначенное количество.</p> <p>Специальные плагины для WordPress позволяют проанализировать правильное заполнение всех мет прямо в редакторе.</p> <h4><span>Правила для грамотного написания h1 </span></h4> <ul><li>Должен быть уникальным для всего сайта и абсолютно читабельным;</li> <li>Не повторяет тег title, но и не противоречит ему;</li> <li>Не стоит делать его слишком длинным (более объемным можно делать title);</li> <li>Используется только 1 раз на каждую страницу;</li> <li>Релевантен тексту и отображает смысловую суть материала;</li> <li>Интересен, привлекателен для пользователя;</li> <li>Нельзя ставить в конце точку и рекомендуется по минимуму использовать знаки препинания.</li> </ul><h4><span>Применение ключей </span></h4> <p>Главные ключевые фразы, в первую очередь, должен содержать title. Но следует их писать и в h1. И там, и там лучше это делать в самом начале. Но лучше бы ключевые слова не дублировали друг друга в этих двух тегах. Нужно использовать разные словоформы или разбавленные вхождения в h1 и прямые в title.</p> <blockquote class="bq-istoriya"><p>Некоторые берут все ключи на страницу и из них составляют структуру статей. Сразу учтите — без классных ПФ такая россыпь ключей по подзаголовкам будет караться фильтром за переспам.</p> </blockquote> <h2><span>Психологические приемы для составления привлекательного заголовка </span></h2> <p>Заголовок должен быть «цепляющим». Вот видео от Максима Ильяхова, спеца в области СМИ, ректора Школы редакторов и создателя сервиса «Главред»:</p> <p><span class="b7Cjj3KPEYg"></span> <span class="b7Cjj3KPEYg"></span></p> <p>Вот еще пара «приемов», которые применяются при составлении заголовков.</p> <h3><span>Решение проблемы </span></h3> <p>Помните, что человек всегда ищет не информацию или товары, а прежде всего – решение своих проблем, потребностей, нужд. Оперируйте именно к предполагаемой проблеме целевой аудитории</p> <blockquote><p>Пример удачного заголовка: «Выпадают волосы? Остановите выпадение за неделю».<br> Пример неудачного заголовка: «Можно ли остановить выпадение волос?»</p> </blockquote> <p>В первом случае мы четко обозначаем проблему и предлагаем конкретное решение. Во втором случае проблема задета косвенно и варианты ее решения размыты.</p> <h3>Заинтриговать </h3> <blockquote><p>Пример удачного заголовка: «Раскрываем секрет самого эффективного рецепта от выпадения волос».<br> Пример неудачного заголовка: «Лучший рецепт от выпадения волос».</p> </blockquote> <h3>Прием «экзамен» </h3> <p>Предложение, составленное в такой форме, бросает вызов читателю, предлагая ему проверить себя.</p> <blockquote><p>Пример удачного заголовка: «Вы уверены, что правильно боритесь с выпадением волос?»<br> Пример неудачного заголовка: «Все ли вам известно о выпадении волос».</p> </blockquote> <p>Конечно, это далеко не все методы, которые помогают воздействовать на восприятие человека и привлечь его интерес. Читайте книги по маркетингу, чтобы вычитать больше, если интересна эта тема. Кстати title тоже может быть «заманивающим». Тем более что скорее всего именно он высвечивается в поисковой выдаче. Проверить его отображение можно будет после индексации страницы.</p> <h2><span>Зачем нужны подзаголовки h2-h6 </span></h2> <p>Теги от h2 до h6 располагаются уже в теле самой статьи, структурно разделяя ее на тематические абзацы, и в коде HTML-документа, выделяя его значимые элементы. Они также идентифицируются поисковыми роботами для семантического анализа страницы.</p> <p>Нужны для того, чтобы иерархично обозначать все важное и стоящее внимания пользователя на странице. Такая структура помогает человеку быстрее сориентироваться в информации и оценить ее соответствие своим запросам.</p> <p>h2 – акцентирует внимание пользователей и поисковых систем на основном содержании статьи. Показывает самое значимое в тексте.</p> <p>h3 – является подпунктом для информации, идущей под H2, раскрывая ее еще глубже.</p> <p>h4, h5, h6 – определяются, как вложенные подзаголовки (раскрывают детально суть H2 или H3) и используются в тексте, в качестве выделяющих мелкие пункты и значимые слова, а также в меню, сайдбаре и других составляющих веб-документа.</p> <p>Длина всех h-тегов должна быть в пределах 50 символов.</p> <h2><span>Как правильно прописывать подзаголовки h2-h6 </span></h2> <ul><li>Нельзя, чтобы наименьший подзаголовок присутствовал без большего. То есть, если в тексте стоит метатег h4, то ему обязательно должны предшествовать h2 и h3.</li> <li>Чем выше заголовок по уровню, тем крупнее должен быть и шрифт. В WordPress обычно по умолчанию настройки выставлены таким образом, что теги автоматически форматируются в правильном виде.</li> <li>Все h-теги обязаны соответствовать содержанию контента, отображать суть информации.</li> <li>Недопустимо использовать h1-h6 в качестве анкоров или активных ссылок.</li> <li>Нельзя писать другие теги внутри тега h.</li> <li>В h-тегах допускается только текст и знаки препинания.</li> <li>В подзаголовках не должно быть переспама ключевых слов. Ключевики лучше всего задействовать в title, h1, h2, а в более мелких, таких как h3, h5, h6 делать упор на детальное раскрытие темы.</li> </ul><p>Если в разметке страницы прописан title и основной заголовок H1, но сам текст статьи не слишком большой и не содержит в себе подзаголовков, это не является ошибкой. В ТОПе находится немало страниц, где контент идет практически сплошной полосой, разве что разделенной на абзацы. Попасть в лидирующие позиции можно и без «колдовства» над разметкой текста, делая больший упор на . Сайты на WordPress прекрасно индексируются поисковиками. Но все же применение этих тегов не только облегчает задачу, но и делает контент более легким и приятным для визуального восприятия.</p> <h2><span>Как заполнять h-теги в WordPress </span></h2> <p>h1 заполняется обычно в поле над текстом в записи:</p> <p>Чтобы сделать подзаголовки h2-h6, надо выделить необходимый элемент и, наведя курсор на вкладку «заголовки», выбрать нужный, кликнув по нему. Проделать то же самое для каждого из подзаголовков, включая их в нужный формат.</p> <p>Есть еще более простой способ – можно набрать текст в Ворде, используя нужные разметки и просто копипастом перенести статью в редактор вордпресса. Выделенные в Word заголовки автоматически отобразятся в нужных размерах. При необходимости можно подправить их, используя инструменты редактора CMS WordPress.</p> <p>Привет, ребята! Чувствую, обстановка накаляется, в комментариях начал прорываться мат, оскорбления в мой адрес. Что ж, а то я уже заскучал по этим временам. 🙂 Самое худшое - это игнорирование. А когда ругают - это же хорошо, значит кого-то задеваю. Радует. 🙂 Эге-ге-гей, товарищ комментатор, привет!!! 🙂 Но из-за мата мне, твой комментарий пришлось удалить, я не раз говорил, что ругательства подобного плана терпеть не стану.</p> <p>Многие обвиняют меня в продажных статьях. Да, было время, но я же обещал, что их количество будет уменьшаться. Но некоторые до сих пор думают, что если я делаю обзор какого-то сервиса - этот пост продажный. Думайте, что хотите, такие господа. Моя совесть чиста и улыбаюсь я во все кривые свои 32 зуба. Настроение у меня прекрасное, да и моих преданных читателей оно будет таким, по крайней мере я буду стараться. 🙂</p> <p>В прошлом уроке я рассказывал, про SEO расширение для браузеров . Я не просто так решил поднять давно изъезженную тему. Я решил поставить точки над И. Многи читатели у меня спрашивают, как правильно использовать заголовки h1, h2, h3 и т.п.? Я уже когда-то в далеком 2012 году. Делая аудиты многих сайтов я вижу одни и те же ошибки, которых я не признаю. Значит, пришло время немного дополнить тот урок.</p> <p>Возможно, какие-то оптимизаторы, посчитают теги h1 и подобные бесполезными, но все же большинство поддерживает их. Если Вы до сих пор не поняли, SEO - очень хитрая наука, у каждого свое мнение.</p> <h2>Правила использования заголовков h1, h2, h3, h4 на странице с точки зрения SEO</h2> <h3>Правило №1<b>: </b> на странице должен быть только 1 тег h1.</h3> <p>Запомните, только 1, а не 2, тем более не 3. Многих интересует, как же узнать количество данных тегов на странице и очень часто вебмастера начинают лезть в исходный код страницы и в ручную искать эти теги. Я тоже так делал до тех пор, пока мой "братан по интернету" Виталий (http://mojwp.ru/) не подсказал мне очень хитрую вещь, которая, оказывается, встроена в мой любимый SEO bar.</p> <p>Что вам требуется?</p> <br><img src='https://i1.wp.com/wpnew.ru/wp-content/uploads/2014/01/seo-tegi.jpg' width="100%" loading=lazy><p>Огромный плюс - это 1 тег в h1 на транице, что очень хорошо. Если у Вас его нету или их больше одного, ниже я расскажу, как избавиться от лишних, либо добавить.</p> <h3>Правило №2: заголовки h2, h3, h4 должны быть только в самой статье.</h3> <p>В моем случае Вы видите, что h2 используется очень даже правильно, а вот в теге h3, h4 у меня - "мусор". То есть данные словосочетания не несут никаких полезностей в плане SEO. Более того, используя теги h в ненужных местах мы снижаем значимость этих тегов для поисковых систем, так как их "вес" раскидывается на ненужные словосочетания. Поэтому, теги h должны быть только внутри статьи. Да, бывают исключения, когда ключевые слова очень грамотно вписывают в отдельные блоки по сайту, но туда впихивают никак не фразу "Подпишитесь на сайт" и т.п.</p> <p><b>Как исправить эти ошибки? </b></p> <p>Для исправления подобных ошибок нам снова понадобится очередное дополнение, о котором я уже рассказывал - это (для Chrome он тоже есть).</p> <p>Мы находим элемент в ненужном нам теге h на странице, например, для примера возьму выражение "Подписка" и "Сайт", про которые мне подсказал RDS bar (они в h4, см. картинку выше). Нашел я эти 2 элемента на сайте (можете воспользоваться поиском в браузере Ctrl+F, вбив необходимую фразу для поиска), "инспектируем" с помощью Firebug один из них:</p> <p><img src='https://i1.wp.com/wpnew.ru/wp-content/uploads/2014/01/firebug.jpg' width="100%" loading=lazy> И справа мы видим стили данного тега h4 (в моем случае):</p> <p><img src='https://i2.wp.com/wpnew.ru/wp-content/uploads/2014/01/stili-h4.jpg' width="100%" loading=lazy></p> <p>Они сейчас нам пригодятся. Открываем файл style.css нашей темы и прямо в конце дописываем характеристики данного стиля (см. на стрелку картинки выше), просто назвав его как-то по-другому (я решил назвать new4, не забываем в начале точку):</p> <p><img src='https://i1.wp.com/wpnew.ru/wp-content/uploads/2014/01/new-style.jpg' width="100%" loading=lazy> Так как данное выражение "Подписка" находится у меня в подвале, я открываю файл footer.php, вбиваю фразу "Подписка" через CTRL+F, вот он:</p> <p><img src='https://i1.wp.com/wpnew.ru/wp-content/uploads/2014/01/nahodim-h4.jpg' width="100%" loading=lazy> И вместо h4 прописываем наш новый класс (в моем случае "new4"), то есть после видоизменения будет такая картина:</p> <p><img src='https://i1.wp.com/wpnew.ru/wp-content/uploads/2014/01/analog-h4.jpg' width="100%" loading=lazy> Сохраняем файл, открываем Firefox, обновляем страничку и видим, что тег h4 со словом "Подписка" пропал:</p> <p><img src='https://i2.wp.com/wpnew.ru/wp-content/uploads/2014/01/propal-h4.jpg' height="169" width="308" loading=lazy> Так как стили слов "Подписка" и "Сайт" у меня не отличаются, я аналогично в подвале вместо тега h4 к слову "Сайт" прописываю класс "new4", и мы видим, что теперь на странице "мусорных" h4 нет:</p> <p><img src='https://i1.wp.com/wpnew.ru/wp-content/uploads/2014/01/h4-net.jpg' width="100%" loading=lazy> Аналогичные действия выполняем с ненужными тегами h3. В моем случае в h3 неправильно использовать фразы "Подпишитесь на бесплатные уроки", "Похожие уроки" и т.п. В h3 должен быть только заголовок, который встречается в тексте. Аналогично пройдитесь по разным типам сайта (статьи, страницы, категории и т.п.), а вот главная страница - это отдельная история, про которую расскажу чуть ниже.</p> <p>Если же у Вас вдруг статья не в h1, просто откройте файл темы single.php, найдите там вывод заголовка статьи (ищите в поиске через выражение "the_title") и обрамите его в h1:</p> <p><img src='https://i0.wp.com/wpnew.ru/wp-content/uploads/2014/01/dobavlenie-tega-h1.jpg' width="100%" loading=lazy></p> <h3>Правило №3: на главной странице крайне желательно использовать тег h1.</h3> <p>На данный момент на моем сайте на главной странице нет h1, что, как я считаю, нарушают структуру.</p> <blockquote><p>Я считаю, что на странице не может быть тега h3, если выше него нет h2, также не может быть использован h2, если нет h1. Аналогично, использование h1 и h3, например, без h2 - тоже неправильно. Причем все четко должно идти по структуре: h2 не может стоять выше h1 на странице, h3 не должен стоять выше первого тега h2 и т.д.</p> </blockquote> <p>Что же запихнуть в h1 для главной страницы? Это может быть текст, куда грамотно включены наиболее запрашиваемые ключевые слова, по которым вы продвигаетесь. Повторюсь, ГРАМОТНО вписанные, а не тупое перечисление.</p> <p>Также у многих описание в шапке сайте выводит как раз нужную информацию. Там обычно "вкусные" ключевые слова, а также шапка считается "сладким местом", где хорошо "кормить" поисковые системы нужными фразами. Грех это не использовать.</p> <blockquote><p>Запомните: заголовок h1 должен быть отличен от title страницы. Это будет полезно для поискового продвижения.</p> </blockquote> <p>Обычно, где-то в этом месте встречается описание сайта (в моем случае его нет):<br><img src='https://i1.wp.com/wpnew.ru/wp-content/uploads/2014/01/opisanie.jpg' width="100%" loading=lazy> Но тут возникает некая проблема: если мы пропишем это описание в h1 в шапке сайта, то оно внутри статей тоже будет в h1, что снова неправильно.</p> <p>То есть, нам требуется прописать некую функцию, которая выполняет следующее: если мы находимся на главной странице, то тексту в шапке присваивается тег h1, если же мы на странице отличной от главной, то отображается тот же текст, в таком же стиле, но уже без тега h1. Это делается для того, чтобы на внутренних страницах не было 2 тега h1 (описание сайта + заголовок статьи).</p> <p>И мой еще один "братан по интернету", на этот раз уже с Казани, которого зовут Рамиль (жаль у него нет блога, поставил бы сейчас ссылку), любезно поделился этой PHP функцией (вы же знаете, в PHP я не "шарю"), вот она:</p><p> <?php if(is_front_page()) {?><h1 id="description">Описание сайта</h1> <? } else{ ?><strong id="description">Описание сайта</strong> <?}?> </p><p>Тут вы заранее должны задать в style.css одинаковые стили для h1 и для стиля "description", чтобы визуально посетители не видели отличий.</p> <p>Так же существует мнение,что во избежании санкций со стороны поисковых систем за "переспам" заголовки h2, h3 и h4 лучше заменять стилями, например <div class=”zagolovok”> или <p>По-моему, все. Если будут вопросы - пишите, по-любому отвечу. И да, продолжайте писать веселые комментарии, они вызывают у меня улыбку и поднимают настроение. 🙂</p> <p><b>Тег H1 или заголовок H1 </b> — это заголовок первого уровня и он имеет наибольшее значение и важность среди всех заголовков. <b>Тег H1 </b> должен применяться на странице один раз, располагаться выше всех других заголовков и иметь самый большой размер шрифта.</p> <p>Всего тегов заголовков существует шесть. Это h1, h2, h3, h4, h5 , h6. Эти теги применяются для форматирования текста на странице. H1 самый весомый среди них как для посетителе, так и для поисковиков.</p> <p>Приветствую Вас на страницах . В этой статье поделюсь с Вами некоторыми моментами при использовании заголовка H1 на страницах блога под управлением CMS WordPress.</p> <h2>Тег H1 — значение для продвижения</h2> <p><img src='https://i0.wp.com/inetmkt.ru/wp-content/uploads/2012/03/tegi-h.jpg' align="left" height="150" width="150" loading=lazy>Поисковые системы используют слова и фразы, применяемые в этом теге, для определения релевантности страниц поисковому запросу. Этот тег является одним из наиболее значимых элементов релевантности. При оптимизации текста страницы важнее тега H1 поисковые системы ценят только тег TITLE.</p> <p>И если быть более кратким и конкретным, то <b>тег H1 рекомендуется использовать для заголовков страниц наших сайтов </b> и они должны содержать ключевую фразу, по которым эта страница продвигается.<br> Релевантность страниц, наряду с , является одним из самых весомых показателей для завоеваний лояльности поисковых систем.</p> <h2>Правила заполнения заголовка H1</h2> <p>Для получения хорошего результата при продвижении страниц сайта следует выполнять следующие правила его заполнения:</p> <ol><li>Каждая страница должна содержать ОДИН тег H1.</li> <li>Тег должен содержать одно ключевое слово, по которому продвигается страница.</li> <li>Содержимое заголовка H1 должно быть уникальным для каждой страницы.</li> <li>Тег H1 не должен быть гиперссылкой.</li> <li>Желательно, чтобы тег не содержал классов, идентификаторов и других CSS элементов, а был в «голом» виде.</li> <li>Не рекомендуется использовать в содержимом знаков препинания, запятых, двоеточий и так далее.</li> <li>Размер тега не должен быть более двух предложений, лучше одно.</li> </ol><p>В html-коде заголовок страницы должен выглядеть таким образом:</p> <blockquote><p><h1>Тег H1 это заголовок страницы</h1></p> </blockquote> <p>Наиболее типичные грубые ошибки – это отсутствие тега H1 на странице или присутствие более одного заголовка. Такие ошибки обычно характерны для страниц разделов, в которых перечислены статьи, входящие в эти разделы.</p> <p>Контроль заполнения тега H1 по всему сайту проводится в рамках . Для проведения такого аудита есть немало достойных инструментов. Я же порекомендую Вам сервис от Мегаиндекса – <i>audit.megaindex.ru </i> .</p> <h2>Тег H1, применение в WordPress</h2> <p><img src='https://i0.wp.com/inetmkt.ru/wp-content/uploads/2012/03/h1-wordpress.jpg' height="150" width="148" loading=lazy>Теорию повторили и теперь остановимся на некоторых технических моментах, связанных и применением тега H1 на сайтах, использующих CMS WordPress. Поскольку большинство начинающих блоггеров используют бесплатные шаблоны, то в них могут содержаться некоторые недоработки.<br> В частности, возможны варианты, когда заголовок страницы выделяется не тегом H1, а другим тегом, чаще всего это H2.</p> <p>Эта же недоработка обнаружилась и на моем блоге, после того как я создал при помощи программы Artisteer. При просмотре HTML-кода было обнаружено, что все заголовки страниц выводятся с тегом H2.</p> <p>Для устранения этого пришлось редактировать файл <i>single.php </i> , именно так в большинстве шаблонов называются файлы, которые выводят информацию по каждой отдельной записи. Как я это сделал сейчас продемонстрирую наглядно.<br> В теле файла <i>single.php </i> ищем часть кода, которая выводит заголовок. В моем случае этот выглядело таким образом:</p> <blockquote><p><h2 class=»art-PostHeaderIcon-wrapper»><br> <span class=»art-PostHeader»><br> <?php the_title(); ?><br> </span><br> </h2 ></p> </blockquote> <p>Меняем выделенные красным цветом теги h2 на необходимые h1 и файл <i>single.php </i> исправлен и готов к использованию. Оказалось, что это довольно просто, поменял пару символов и готово. Теперь этот блок стал выглядеть так:</p> <blockquote><p><h1 class=»art-PostHeaderIcon-wrapper»><br> <span class=»art-PostHeader»><br> <?php the_title(); ?><br> </span><br> </h1 ></p> </blockquote> <p>В Вашем случае выражение может быть несколько другого вида, но смысл, я надеюсь, Вы поняли.</p> <p>Аналогичные изменения мне пришлось проделать с еще одним файлом темы <i>page.php </i>, который отвечает за вывод страниц блога. Как известно блог на CMS WordPress содержит записи и страницы.</p> <p>Функции создания и изменения их находятся в разных разделах администрирования блога, они хранятся в разных местах и соответственно за их вывод отвечают и разные программные модули.</p> <p>В итоге отрезок кода в файле <i>page.php </i>, который выводит заголовок страницы стал выглядеть вот так:</p> <blockquote><p><h1 class=»art-PostHeaderIcon-wrapper»><br> <span class=»art-PostHeader»><a href=»<?php the_permalink() ?>» rel=»bookmark» title=»<?php printf(__(‘Permanent Link to %s’, ‘kubrick’), the_title_attribute(‘echo=0’)); ?>»><br> <?php the_title(); ?><br> </a></span><br> </h1 ></p> </blockquote> <p>Но это было еще не все, на моем шаблоне я обнаружил, что тег H1 используется при выводе заголовка самого блога. И мне пришлось решать, оставлять все как есть или добиваться вывода заголовков страниц с тегом H1.</p> <p>Ведь использование двух и более заголовков этого типа на одной странице не рекомендуется. Поисковые системы могут это расценить как переоптимизацию и сделать соответствующие выводы.</p> <h2>Тег H1, корректировка шаблона WordPress</h2> <p>В конце концов решил подправить эту недоработку, тем более, что хлопот больших это не принесло. Сейчас я Вам обо всем подробно доложу.</p> <p>Для этого надо было внести поправки всего в два файла.</p> <p>Первый <i> header.php </i> — это файл вывода заголовка блога.</p> <p>Второй <i>style.css </i> — файл описания стилей блога.</p> <h3>Изменения header.php</h3> <blockquote><p><div class=»art-Logo»><br> <h1 id=»name-text» class=»art-Logo-name»><br> <a href=»<?php echo get_option(‘home’); ?>/»><?php bloginfo(‘name’); ?></a></h1 ><br> <div id=»slogan-text» class=»art-Logo-text»><br> <?php bloginfo(‘description’); ?></div><br> </div></p> </blockquote> <p>Находим в <i>header.php </i> фрагмент, который выводит заголовок блога и меняем тег заголовка h1 (выделил красным цветом те символы, которые изменяю) на тег абзаца p . В результате получили такой код.</p> <blockquote><p><div class=»art-Logo»><br> <p id=»name-text» class=»art-Logo-name «><br> <a href=»<?php echo get_option(‘home’); ?>/»><?php bloginfo(‘name’); ?></a></p ><br> <div id=»slogan-text» class=»art-Logo-text»><br> <?php bloginfo(‘description’); ?></div><br> </div></p> </blockquote> <h3>Изменения в файле style.css</h3> <p>Синим цветом я выделил наименование класса css, который нам придется подправить в файле <i>style.css </i>, чтобы шрифт и размер вывода заголовка блога остался прежним, таким же как и до изменений. Далее открываем файл стилей, ищем поиском необходимый класс «art-Logo-name», фрагмент ниже</p> <blockquote><p>h1 .art-Logo-name, h1 .art-Logo-name a, h1 .art-Logo-name a:link, h1 .art-Logo-name a:visited, h1 .art-Logo-name a:hover<br> {<br><br> font-size: 29px;<br> text-decoration: none;<br> padding:0;<br> margin:0;<br> color: #E0EDF0 !important;<br> }</p> </blockquote> <p>Все выделенные красным цветом h1 меняю на p и получаю в результате</p> <blockquote><p>p .art-Logo-name, p .art-Logo-name a, p .art-Logo-name a:link, p .art-Logo-name a:visited, p .art-Logo-name a:hover<br> {<br> font-family: Arial, Helvetica, Sans-Serif;<br> font-size: 29px;<br> text-decoration: none;<br> padding:0;<br> margin:0;<br> color: #E0EDF0 !important;<br> }</p> </blockquote> <p>Вот, собственно и все, что я хотел рассказать Вам о теге H1, как одном из элементов .<br> Замечу только, что все работы я проводил на<b> тестовом поддомене </b>, чтобы посетители моего блога не испытывали затруднений при возникновении проблем, которые могут возникнуть при подобного рода манипуляциях. Да и с точки зрения безопасности и сохранности функционала сайта это будет правильным решением.</p> <p>В заключение хочу Вам предложить посмотреть небольшое видео, оно, правда, озвучено на английском языке, но мне все было понятно, надеюсь и Вам будет несложно разобраться. Этот ролик неплохо дополняет текст статьи и для новичков или тех, кто не силен в программировании будет неплохим подспорьем. Приятного просмотра.</p> <p><span class="zgOuilSChgY"></span></p> <p>На этом позволю себе закончить, а Вам пожелать успехов.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </article> <div class='yarpp-related'> <div class="title">Похожие публикации</div> <ul class="related"> <li class="related__item"> <div class="related__item-img"> <img src="/uploads/5fb17e8a04e229b543ce3f876f16308e.jpg" width="150" height="95" alt="Пошаговый мануал как ввезти технику, на которую отсутствует нотификация фсб" / loading=lazy></div> <a href="/other/v-rossii-uprostili-vvoz-gadzhetov-bez-notifikacii-skoree-zakazyvaem-poshagovyi-manual-kak-vvezti-teh.html">Пошаговый мануал как ввезти технику, на которую отсутствует нотификация фсб</a></li> <li class="related__item"> <div class="related__item-img"> <img src="/uploads/e3894d2e796dc518b3ba1981c6598a80.jpg" width="150" height="95" alt="Бонусная программа МТС «20% возвращаются" / loading=lazy></div> <a href="/corps/20-vozvrashchayutsya-otzyvy-bonusnaya-programma-mts-20-vozvrashchayutsya.html">Бонусная программа МТС «20% возвращаются</a></li> <li class="related__item"> <div class="related__item-img"> <img src="/uploads/b0b2bc40ddf5070f27a9da53810a0e06.jpg" width="150" height="95" alt="Обзор программ для проектирования дома или дачи своими руками" / loading=lazy></div> <a href="/ram/programma-dlya-sozdaniya-zdanii-i-sooruzhenii-obzor-programm-dlya.html">Обзор программ для проектирования дома или дачи своими руками</a></li> <li class="related__item"> <div class="related__item-img"> <img src="/uploads/706eb8b76a9ed175dfdfba4479989a21.jpg" width="150" height="95" alt="Программы для самостоятельного проектирования дома на компьютере" / loading=lazy></div> <a href="/motherboards/top-10-programm-dlya-proektirovaniya-domov-programmy-dlya.html">Программы для самостоятельного проектирования дома на компьютере</a></li> </ul> </div> </main> <aside class="sidebar"> <div class="section section_widget lambda_1"></div> <div class="section section_widget widget_text"> <div class="textwidget"></div> </div> <div class="sidebar-menu"> <div class="title">Рубрики</div> <ul> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/internet/">Интернет</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/safety/">Безопасность</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/windows-7/">Windows 7</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/multimedia/">Мультимедиа</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/power-supplies/">Блоки питания</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/monitors/">Мониторы</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/motherboards/">Материнские платы</a></li> </ul> </div> </aside> </div> </div> <footer class="footer"> <div class="mygrid footer-grid"> <div class="container-fluid"> <div class="row"> <div class="col-sm-5"> <div class="about-site"> <img src="/img/logo.png" loading=lazy><br> Мультимедиа, интернет, видеокарты, материнские платы. Windows </div> </div> <div class="col-sm-5"> <div class="flink-wrapper"> <div class="flink"> <a href="/feedback.html">Контакты</a></div> <div class="flink"> <a href="">Реклама и сотрудничество</a></div> <div class="flink"> <a href="">Политика конфидициальности</a></div> <div class="flink"> <a href="/sitemap.xml">Карта сайта</a></div> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <div class="copyright">© 2024 </div> </div> </div> </div> </div> </footer> </div> </div> <script type='text/javascript'> var tocplus = { "smooth_scroll": "1" }; </script> </body> </html>