Что такое мета теги страницы. Настройка Meta-тегов и ключевых слов. Примеры правильного заполнения мета тегов Description


Что такое "Мета теги"?

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

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

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

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

Какие мета теги учитываются поисковыми системами?

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

Мета-тегов очень много, но не все они востребованы. Мета-теги находятся в HTML-коде внутри тега HEAD. Бывают два основных вида таких тегов:
1. Мета-теги вида NAME описывают конкретную страницу, они указывают адрес создателя, информацию о нем и так далее. Для поисковиков важным является краткое описание страницы, основные ключевые слова. К этому виду относятся: Title, Description, Keywords, Author, Generator, Robots, Copyright, Subject, Resource-type,Revisit, URL и так далее.
2. Мета-теги вида HTTP-EQUIV участвуют в формировании и создании заголовка для веб-странцы, несут информацию о режимах обработки страницы. Content-Language,Window-Target, Expires, Content-Type, Refresh и так далее.

Рассмотрим мета-теги, которые учитываются поисковыми системами и играют большую роль. Это Title, Description и Keywords. Остальные мета-теги принимаются во внимание поисковиками, но в гораздо меньшей степени.

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

Description является кратким описанием конкретной веб-странцы. Важно, чтобы для каждой страницы сайта был свой мета-тег. Такое описание обычно принимают во внимание абсолютно все поисковые системы, отображая сайты в своей поисковой выдаче.

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

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

Мета-теги являются HTML тегами, они указывают поисковым системам краткое описание содержания документа. Особого внимания заслуживают метатеги Title и Description.

Title определяет заголовок, а Description содержимое каждой HTML-страницы. Сначала Description использовали поисковики, как сниппет , то есть текст, расположенный под заголовком страницы в выдаче. Но в настоящее время сниппеты формируются интеллектуально, то есть из текста всей страницы выбирают часть, которая самая релевантная по запросам пользователей.Именно она будет сниппетом.

Но зачастую бывает, что сниппет для страницы формируется и из текста, который расположен в мета-теге description. Поэтому важно правильно его заполнить и обратить на него свое пристальное внимание. А заполняется он таким образом:
[META name=”description” content=” Детские игрушки, куклы и пупсы отечественного производителя, вы сможете выбрать недорогие игрушки..” ]

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

Keywords тоже располагается внутри тега head в HTML-документах. Прописывают мета-теги этого вида таким образом:
[META name=”keywords” content=”детские игрушки, куклы от производителя в Москве, велосипеды ”]

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

Один из вариантов применения тега meta - указание HTTP -заголовков, которые должны быть отправлены клиенту до отправки самой веб-страницы. Например:

<meta http-equiv = "Content-Type" content = "text/html" / >

Такая запись указывает, что страница должна быть отправлена вместе с HTTP-заголовком Content-Type: text/html. Такой заголовок указывает браузеру или другой программе тип отправляемого документа. Тем не менее, несмотря на то, что первоначально предполагалось, что веб-серверы будут считывать meta-теги внутри отправляемых клиенту веб-страниц, и формировать HTTP-заголовки в зависимости от их содержимого, на практике это не реализовано в наиболее используемых веб-серверах, соответственно, веб-серверы не меняют отправляемые клиенту HTTP-заголовки, а клиент (веб-браузер) обрабатывает эти meta-теги самостоятельно (в частности, данные из meta-тегов могут заменять данные, получаемые из HTTP-заголовков ).

Кроме того, meta-теги могут использоваться для того, чтобы сообщить браузеру информацию о документе, когда HTTP-заголовки недоступны (например, если страница открывается локально с диска, а не загружается с веб-сервера).

В общей форме метаданные записываются в следующем виде: в теге meta указывается атрибут name (имя) и связанный с ним атрибут content (содержимое), в котором описывается какой-либо аспект веб-страницы, например, ключевые слова:

<meta name = "keywords" content = "википедия, энциклопедия" / >

Функции мета-тегов

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

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

Группы мета-тегов

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

Группа NAME

Мета-тег Author и Copyright

Мeтa-тeг PICS-Label

Мeтa-тeг Window-target

Определение окна загружаемой страницы.

Мета-тег Imagetoolbar

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

<meta http-equiv = "imagetoolbar" content = "no" / >

Значение мета-тегов

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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

Что такое метатеги простым языком?

Пример метатегов

Нужны ли метатеги?

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

Перечислим основные метатеги для поисковых систем:

  1. title;
  2. description;
  3. robots.

Метатег robots

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

  • - запрещает индексирование страницы;
  • NOFOLLOW - запрещает проход по ссылкам, имеющимся на странице;
  • INDEX - разрешает индексирование страницы;
  • FOLLOW - разрешает проход по ссылкам;
  • ALL - равносильно INDEX, FOLLOW;
  • NONE - равносильно NOINDEX, NOFOLLOW.

Метатег keywords

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

Заявление Google об использовании метатегов:

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

Что такое title страницы на самом деле

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

Для чего нужен Title?

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

Какая должна быть длина title?

Для Яндекса - 80 символов, 15 слов.

Для Google - 70 символов, 12 слов.

Что должно быть в title?

Title неприменно должен содержать в себе ключевые слова, тоесть запросы по которым вы хотите видеть себя в ТОП-е.

Приведем пример тайтл:

Основные ключевые запросы:

бахилы цена
бахилы оптом
купить бахилы

Купить бахилы оптом по цене от 60 рублей в компании Камень.

у вас возникнут вопросы по подобию:

  • Как правильно составить тайтл?
  • Можно ли в title ставить цену?
  • и тд.

Получить ответы на вопросы можно путем анализа title в Топ по вашим запросам. Просмотрите как выглядит выдача поисковика, зайтите в ТОП 10 сайтов и проанализируйте Title. Только после этого можно грамотно составить title.

Description сайта: что это такое

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

Как переводиться description?

В нашем случае это слово будет переводиться как описание.

Как писать description что должно быть в description?

  • Рекомендуемая длина -150-200 символов. Именно такой объем помещается под ссылкой на страницу в поисковой выдаче. Конечно, можно написать и побольше, но в таком случае описание будет выглядеть незавершенным.
  • Также дескрипшн должен содержать ключевые фразы, по которым продвигается оптимизируемая страница. Самые частотные ключи следует расположить в начале. Важно: употребляйте не больше 3-х ключевых фраз и не повторяйте одно и то же слово больше 5 раз.
  • Тег description должен быть уникальным, т.е отличным от title и от описаний других страниц сайта. Также не советуем копировать какие-либо части текста со страницы (даже особо удачные) и вставлять их в мета-тег.
  • Самое главное при написании дискрипшена - точность. Вы должны лаконичино и емко описать содержание страницы и сделать ее привлекательной для пользователя (для чего, собственно, нужен description).

Как посмотреть description страницы?

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

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

  • откройте страницу в удобном для вас редакторе;
  • найдите тег и вставьте после него следующие строки:

Мета теги (meta tags) - это специальные теги html, которые входят в состав заголовочных тегов html и не видны пользователю на странице

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

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

Все мета теги можно разделить на три группы:

  • Для поисковой машины (учитываются при продвижении сайта)
  • Для браузера (учитываются только браузером)
  • Информация об авторе

1. Мета теги для поисковой машины

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

Мета теги, которые учитывает поисковая машина:

  • title - заголовок страницы, другими словами название страницы. Очень важный тег в ранжировании сайтов (см. тег );</li> <li><b>description </b> - <a href="/kak-napisat-title-stranicy-osobennosti-formirovaniya-opisanii/">описание страницы</a> сайта (см. );</li> <li><b>keywords </b> - ключевые слова страницы сайта (см. );</li> <li><b>robots </b> - управляет индексацией документа, а также ссылками в этом документе. Имеет следующий синтаксис:</li> </ul><blockquote><meta name ="Robots " content ="ПАРАМЕТРЫ "> </blockquote> <p>Параметры могут принимать следующие значения:</p> <ul><li>index (разрешить индексацию документа)</li> <li>noindex (запретить индексацию документа)</li> <li>follow (разрешить следовать по ссылкам)</li> <li>nofollow (запретить следовать по ссылкам)</li> <li>all (равносильно сочетанию index и follow)</li> <li>none (равносильно сочетанию noindex, nofollow)</li> </ul><p>По умолчанию стоит all, что является нормой для большинства страниц интернета. Например, если хотите запретить страницу к индексации и обход ссылок, то надо написать none или noindex, nofollow (тег noindex и ).</p> <p><u>Примечание </u>: <br>Наверняка Вы слышали про файл robots.txt (см. как правильно создать robots.txt), в котором можно запрещать к индексации <a href="/otdelnyi-shablon-stranicy-wordpress-sozdanie-shablona-stranicy/">отдельные страницы</a> сайта или даже целые разделы. Однако поисковая машина все равно может проиндексировать документ, который закрыт, через robots.txt, т.к. это всего лишь рекомендация для поисковой машины. В свою очередь мета тег robots позволяет со 100% точностью закрыть <a href="/kakoi-marki-printer-vybrat-dlya-doma-kompaktnyi-printer-pomozhet/">нужный документ</a> от индексации.</p> <p>4. <b>Revisit </b> - позволяет указать, как часто нужно переиндексировать документ. Этот мета тег устарел и не учитывается поисковыми роботами. Его никто сейчас не воспринимает в серьез.</p> <h2>2. Мета теги для браузера</h2> <p>Главная задача мета тегов для браузера - это корректно отображать страницу сайта для пользователя.</p> <p>В этом варианте есть пару важных тегов, давайте рассмотрим каждый из них. Синтаксис мета тега в <a href="/kak-vklyuchit-plagin-v-gugl-hrom-gde-nahodyatsya-rasshireniya-dlya-google-chrome-kak/">общем случае</a> следующий:</p> <blockquote><meta http-equiv ="параметр " content ="параметр2 "> </blockquote> <p>Могут быть использованы следующие параметры атрибута:</p> <ul><li><b>Content-Type </b> - служит для задания кодировки страницы сайта. Обычно используется кодировка кириллицы Windows-1251 или UTF-8</li> <li><b>Content-Language </b> - задает язык, на котором написана страница. На мой взгляд не очень важный тег</li> <li><b>Cache-Control </b> - параметры кэширования документа</li> <li><b>Refresh </b> - этот мета тег задает промежуток времени для 301 редиректа</li> </ul><h2>3. Мета теги c информацией об авторе</h2> <p>Напоследок расскажу о том, как можно задать информацию о браузерах через мете таги:</p> <ul><li>Site-created - дата запуска сайта;</li> <li>author - имя автора сайта;</li> <li>owner - указывает владельца документа;</li> <li>reply-to - контакты автора;</li> <li>address - адрес автора.</li> </ul><p>Честно говоря, эти теги на данный момент никому не нужны, но тем не менее они есть.</p> <p>Этот материал я подготовил для новичков в SEO, а также на владельцев сайтов, которые не знают как правильно заполнить метатеги. Рассмотрим, что сейчас актуально, а что уже не используется <a href="/reiting-10-ti-luchshih-poiskovyh-sistem-luchshie-poiskovye-sistemy-preimushchestva-poiskovoi-sistemy-meta/">поисковой системой</a> при ранжировании сайта.</p> <h2>Начнём с определения что такое метатеги?</h2> <p><b>Метатеги (англ. meta tags) </b> - это (X)HTML-теги, предназначенные для предоставления структурированных метаданных о веб-странице. Как правило, указываются в заголовке тега <head> (X)HTML-документа. Метатеги не отображаются на странице и не имеют видимого контента. В них располагается <a href="/wipe-data-ne-pomogaet-wipe-na-android-kak-pravilno-vypolnit-sbros-nastroek/">дополнительная информация</a> для поисковых роботов, различного ПО.</p> <p>В SEO, когда слышим что-то вроде “Нужно прописать метатеги на странице”, в голове сразу же всплывают метатеги Description и Keywords, ну и, само собой, Title. Какое же SEO без этого тега? Начну сразу с них.</p> <h2>Тег Title</h2> <p>Его ещё называют мета<a href="/chto-takoe-tegi-i-metategi-title---ne-meta-teg-no-dlya-seo-ochen-vazhen-chto-takoe/">тег Title</a>, хотя, с технической точки зрения, — это не так. Очень важный тег, влияет на ранжирование, является заголовком страницы и часто используется поисковыми роботами при формировании заголовка сниппета. Поэтому, помимо того, что в Title нужно добавлять основные ключевые слова, важно следить за его привлекательностью. Он должен стимулировать пользователей к переходу на сайт.</p> <p>Title должен:</p> <ol><li>Отображать суть страницы.</li> <li>Ближе к началу содержать прямое вхождение наиболее конкурентного запроса.</li> <li>Быть читабельным предложением с вхождение ключевых слов.</li> <li>Отличаться от заголовка страницы <H1>.</li> <li>Не содержать спама.</li> <li>Быть уникальным для каждой страницы.</li> <li>Примерной длины — около 70 — 130 символов.</li> </ol><p>Для <a href="/posadochnye-stranicy-idealnaya-posadochnaya-stranica-i-chto-eto-takoe/">посадочных страниц</a>, категорий, разделов рекомендую заполнять Description вручную.</p> <p>Автоматически заполнять Description можно, например, для карточек товара. Для этого используйте шаблоны вида:</p> <p>Description: В нашем интернет-магазине + “название магазина” + доступные цены от + “цена” + на + “название карточки товара” + с доставкой по + “город”.</p> <p>Description: “Название карточки товара” + по <a href="/harakteristiki-karty-radeon-hd-4870-videokarta-radeon-hd4870---novyi-korol-v/">доступной цене</a> + “цена” + от интернет-магазина + “название магазина” + с доставкой по + “город”.</p> <p>Как делать нельзя:</p> <ol><li>Не делайте слишком короткие Description — в <a href="/kak-obnovit-android-do-poslednei-versii-ekonom-energiyu-pravilno/">Google Search</a> Console, в разделе Оптимизация HTML видно короткие метаописания.</li> <li>Там же отслеживайте и исправляйте дубли Description (они должны быть уникальны).</li> </ol><ol><li>Не пишите несогласованные фразы — метатег должен быть читабельным.Не используйте перечисления.</li> </ol><h2>Метатег Keywords</h2> <p>Этот мета-тег не влияет на ранжирование, но, поскольку Яндекс пишет , что meta keywords может учитываться — рекомендую заполнять его, добавляя 3–5 релевантных контенту фраз, разделённых между собой запятыми.</p> <p><b>Метатег expires </b> — также используется для управления кэшированием. В мета-тег устанавливается дата. Когда она проходит, браузер должен использовать повторный сетевой запрос, а не имеющийся кэш страницы. Дата указывается в формате RFC850.</p> <p>Пример использования:</p><p><b>Метатег content-language </b>— указывает язык документа.</p> <p>Пример использования:</p><p> <meta http-equiv="content-language" content="ru" /> </p><p>В HTML5 указание языка упрощено:</p><p> <html lang="ru"> </p><p>Постарался перечислить, как мне показалось, самые интересные метатеги. Если вас интересуют другие meta, рекомендую ознакомиться с материалами: Метатеги, которые поддерживаются в Google и Использование HTML-элементов Яндекс .</p> <h2>Подведём итоги</h2> <p>Метатегов достаточно много, но, как оптимизатору, чаще всего приходится использовать в <a href="/tegi-h1-h2-h3-kak-ispolzovat-zagolovki-v-seo-prodvizhenii-tegi/">SEO тег</a> Title, meta description, meta keywords. Если вы начинающий сеошник или владелец сайта, рекомендую также ознакомиться с вебинаром “Правила формирования Title и Description” нашего SEO-TeamLead Евгения Аралова:</p> <p><span class="GVsLHrLhhNA"></span></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> </div> </article> <div class="related-posts"> <h3 class="title text-uppercase text-center">Еще на эту тему:</h3> <div class="row"> <div class="post article-wrp with-border col-sm-6 col-md-4"> <div class="article-in-loop"> <a class="thumb-title" href="/top-programm-dlya-udaleniya-draiverov-skachat-driver-sweeper/"> <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb"> <span class="embed-responsive-item"> <span class="super-wrp"> <span class="span-table"> <span class="span-table-row"> <span class="span-table-row-cell"> <img src="https://i2.wp.com/pc-assistent.ru/wp-content/uploads/2017/06/driver_sweeper_200x175.png" class="img-responsive" alt="Скачать Driver Sweeper – программа для удаления драйверов из OC Windows Скачать программу для удаления драйверов карты" loading=lazy> </span> </span> </span> </span> </span> </span> <span class="date"> </span> <span class="title"> Скачать Driver Sweeper – программа для удаления драйверов из OC Windows Скачать программу для удаления драйверов карты </span> </a> </div> </div> <div class="post article-wrp with-border col-sm-6 col-md-4"> <div class="article-in-loop"> <a class="thumb-title" href="/vykidyvaet-na-rabochii-stol-sniper-elite-v2-vykidyvaet-na-rabochii-stol-sniper-elite-v2-chto/"> <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb"> <span class="embed-responsive-item"> <span class="super-wrp"> <span class="span-table"> <span class="span-table-row"> <span class="span-table-row-cell"> <img src="https://i2.wp.com/i.rutab.net/upload/tech_issues/audio_check.png" class="img-responsive" alt="Выкидывает на рабочий стол Sniper Elite V2 Что делать если лагает sniper elite 3" loading=lazy> </span> </span> </span> </span> </span> </span> <span class="date"> </span> <span class="title"> Выкидывает на рабочий стол Sniper Elite V2 Что делать если лагает sniper elite 3 </span> </a> </div> </div> <div class="post article-wrp with-border col-sm-6 col-md-4"> <div class="article-in-loop"> <a class="thumb-title" href="/kak-naiti-kartinu-po-fotografii-poisk-pohozhei-fotografii-v-internet-poisk/"> <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb"> <span class="embed-responsive-item"> <span class="super-wrp"> <span class="span-table"> <span class="span-table-row"> <span class="span-table-row-cell"> <img src="https://i2.wp.com/kompukter.ru/wp-content/uploads/2018/03/klikaem-po-znachku-foto-v-gugl.png" class="img-responsive" alt="Поиск похожей фотографии в интернет" loading=lazy> </span> </span> </span> </span> </span> </span> <span class="date"> </span> <span class="title"> Поиск похожей фотографии в интернет </span> </a> </div> </div> </div> </div> </div> <aside id="sidebar" class="col-sm-4 col-sidebar hidden-xs" role="complementary"> <div class="content-menu bs-docs-sidebar"> <div class="progress-right" id="progress-right">0%</div> <script> window.onscroll = function() { var scrolled = window.pageYOffset || document.documentElement.scrollTop; var scrollprogress = Math.round(scrolled / ((document.documentElement.scrollHeight - document.documentElement.clientHeight) / 100)); document.getElementById('progress-right').innerHTML = scrollprogress + '%'; } </script> <div class="ad clearfix text-center"> </div> </div> <script> /** * Скрипт закріплення блоку при прокрутці */ (function() { var a = document.querySelector('#sidebar'), b = null, P = 0; window.addEventListener('scroll', Ascroll, false); document.body.addEventListener('scroll', Ascroll, false); function Ascroll() { if (b == null) { var Sa = getComputedStyle(a, ''), s = ''; for (var i = 0; i < Sa.length; i++) { if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) { s += Sa[i] + ': ' + Sa.getPropertyValue(Sa[i]) + '; ' } } b = document.createElement('div'); b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;'; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes[1]); } a.style.height = b.getBoundingClientRect().height + 'px'; a.style.padding = '0'; a.style.border = '0'; } var Ra = a.getBoundingClientRect(), R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('#content').getBoundingClientRect().bottom); // селектор блока, при достижении нижнего края которого нужно открепить прилипающий элемент if ((Ra.top - P) <= 0) { if ((Ra.top - P) <= R) { b.className = 'stop'; b.style.top = -R + 'px'; } else { b.className = 'evr-sticky'; b.style.top = P + 'px'; } } else { b.className = ''; b.style.top = ''; } window.addEventListener('resize', function() { a.children[0].style.width = getComputedStyle(a, '').width }, false); } })() </script> <style> /* Додаємо відступ вгорі, щоб було на одному рівні із змістом */ body.single #breadcrumbs { margin-bottom: 5px; } #content article { padding-top: 15px; } #sidebar .evr-sticky { position: fixed; z-index: 101; } #sidebar .stop { position: relative; z-index: 101; } #div-gpt-ad-30906309 { margin-top: 20px; } #sidebar .evr-sticky #div-gpt-ad-30906309, #sidebar .stop #div-gpt-ad-30906309 { margin-top: 20px; } #sidebar .content-menu { transition: 0.5s all; } #sidebar .content-menu .title { padding-top: 15px; font-size: 20px; margin: 0 0 15px 0; } #sidebar .content-menu .title .glyphicon { padding-right: 5px; } #sidebar .content-menu ul { padding: 0; margin: 0; overflow: auto; } #sidebar .content-menu .nav li { margin: 0; clear: both; margin-bottom: 4px; } /* Bullet before text */ #sidebar .content-menu .nav li a:before { content: "●"; position: absolute; font-size: 17px; color: #dedede; left: 0; top: -1px; } #sidebar .content-menu .nav li a { position: relative; display: inline-block; font-size: 15px; color: #000; line-height: 1.2; padding: 3px 0 0 18px; overflow: hidden; text-decoration: none !important; } #sidebar .content-menu .nav li.active:focus>a, #sidebar .content-menu .nav li.active:hover>a, #sidebar .content-menu .nav li.active>a, #sidebar .content-menu .nav li a:hover { text-decoration: none; font-weight: normal; color: #c23085; background-color: transparent; border-left: 0 none; } /* Bullet before text */ #sidebar .content-menu .nav li.active>a:hover:before, #sidebar .content-menu .nav li.active>a:before { -moz-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); left: 1px; color: #c23085; background: transparent; } #sidebar .content-menu .nav li a:hover:before { color: #c23085; background: transparent; } #sidebar a.go-top { display: block; margin-top: 5px; padding: 14px 0 5px 0; text-align: center; text-transform: lowercase; font-size: 17px; color: #666; background: transparent url(/wp-content/themes/sk-Evrikak/i/go-top-in-sidebar.png) no-repeat 50% 50%; opacity: 0; transition: 0.2s all; } #sidebar a.go-top:hover { color: #000; text-decoration: none; } /* Якщо блок зафіксовний */ #sidebar .evr-sticky a.go-top { opacity: 1; } #sidebar .evr-sticky { box-shadow: -9px 0 10px 0 rgba(0, 0, 0, 0.08) !important; } </style> <script> jQuery(document).ready(function() { // (c) http://jsfiddle.net/gableroux/S2SMK/ // підсвітка активного пункту меню, bootstrap jQuery('body').scrollspy({ target: '.bs-docs-sidebar', offset: 70 }); // даємо висоту меню, щоб зробити прокрутку jQuery(window).bind("load resize", function() { var body_w = jQuery("body").width(); // визначаємо ширину вікна var window_h = jQuery(window).height(); // визначаємо висоту вікна //alert(window_h); if (body_w > '767') { // якщо ширина більша 767 window_h = window_h - 375; // коригуємо висоту блоку з меню. віднімаємо висоту блоку «наверх», у перспективі треба буще ще відняти інші-нові блоки var menu_h = jQuery('#sidebar .content-menu').height(); //if(menu_h > window_h) { // якщо висота усього сайдбару більше висоти екрану, то вказуємо висоту для меню. Воно автоматично розтягне висоту сайдбару, з’явиться прорутка у меню, і сайдбар займе усю висоту вікна jQuery('#sidebar .content-menu ul.nav').css('height', window_h); //} } }); // парсимо контент і формуємо меню jQuery('#content .evr-section').each(function() { var evr_section_id = jQuery(this).attr('id'); var evr_section_title = jQuery(this).find(':header:first').text(); var txt = '<li class="content-menu-item added-by-js"><a href="#' + evr_section_id + '">' + evr_section_title + '</a></li>'; //var txt = txt.unwrap(); //txt = jQuery('li', txt).unwrap; //txt = txt.unwrap('h3'); //txt = jQuery(txt).wrap('<li>'); jQuery('#sidebar ul.nav').append(txt); // Insert }); // Додаємо спеціальний клас для посилання на відео jQuery('#sidebar .content-menu').find("a[href='#entry-video']").addClass('link-to-video'); // навігація по статті (плавна прокрутка до потрібного блоку) jQuery('#sidebar .content-menu .nav a').click(function() { jQuery.scrollTo(this.hash, { offset: -10, // Відступ вгорі duration: 750 }); return false; }); // перейти вгору (плавна прокрутка вгору) jQuery('#sidebar a.go-top').click(function() { jQuery.scrollTo(this.hash, { offset: 0, // Відступ вгорі duration: 450 }); return false; }); }); </script> <link type="text/css" href="/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="https://battlecase.ru/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.mousewheel.js"></script> <script type="text/javascript" src="https://battlecase.ru/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.jscrollpane.min.js"></script> <script> // Прокрутка оновлюється при зміні висоти вікна jQuery(function() { jQuery('#sidebar .content-menu ul.nav').each( function() { jQuery(this).jScrollPane({ showArrows: jQuery(this).is('.arrow') }); var api = jQuery(this).data('jsp'); var throttleTimeout; jQuery(window).bind("load resize", function() { // IE fires multiple resize events while you are dragging the browser window which // causes it to crash if you try to update the scrollpane on every one. So we need // to throttle it to fire a maximum of once every 50 milliseconds... if (!throttleTimeout) { throttleTimeout = setTimeout( function() { api.reinitialise(); throttleTimeout = null; }, 50 ); } }); } ) }); </script> <style> /* Styles specific to this particular page */ .scroll-pane { overflow: auto; height: 400px; } .jspTrack { background: #dedede; } .jspVerticalBar { width: 6px; } .jspDrag { background: #309dc6; } </style> </aside> </div> </div> <div class="other-posts"> <div class="container"> <h3 class="title text-uppercase text-center h">Другие статьи:</h3> <div class="row articles"> <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3"> <div class="article-in-loop"> <a class="thumb-title" href="/samyi-moshchnyi-telefon-v-mire-na-dannyi-moment-samye-moshchnye-smartfony-top-10/"> <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb"> <span class="embed-responsive-item"> <span class="super-wrp"> <span class="span-table"> <span class="span-table-row"> <span class="span-table-row-cell"> <img src="https://i1.wp.com/technosova.ru/wp-content/uploads/2018/10/2-2.jpg" class="img-responsive" alt="Самые мощные смартфоны Топ 10 самых мощных телефонов" loading=lazy> </span> </span> </span> </span> </span> </span> <span class="date"> Самые мощные смартфоны Топ 10 самых мощных телефонов </span> <span class="title"> Современные технологии позволяют уместить в обычном смартфоне мощность и производительность... </span> </a> </div> </div> <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3"> <div class="article-in-loop"> <a class="thumb-title" href="/kak-udalitsya-iz-moego-mira-kak-udalit-stranicu-i-akkaunt-v-moem-mire/"> <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb"> <span class="embed-responsive-item"> <span class="super-wrp"> <span class="span-table"> <span class="span-table-row"> <span class="span-table-row-cell"> <img src="https://i1.wp.com/socialnie-seti.info/wp-content/uploads/2012/09/galochki-dlya-ydaleniya-stranici.jpg" class="img-responsive" alt="Как удалить страницу и аккаунт в моем мире" loading=lazy> </span> </span> </span> </span> </span> </span> <span class="date"> Как удалить страницу и аккаунт в моем мире </span> <span class="title"> Бывает так, что человек пройдя регистрацию понимает, что эта социальная сеть не для него и хочет... </span> </a> </div> </div> <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3"> <div class="article-in-loop"> <a class="thumb-title" href="/ne-udalyaetsya-avast-chto-delat-kak-udalit-avast-s-kompyutera-esli-on-ne/"> <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb"> <span class="embed-responsive-item"> <span class="super-wrp"> <span class="span-table"> <span class="span-table-row"> <span class="span-table-row-cell"> <img src="https://i2.wp.com/vellisa.ru/wp-content/uploads/2018/05/2-1.jpg" class="img-responsive" alt="Как удалить аваст с компьютера если он не удаляется" loading=lazy> </span> </span> </span> </span> </span> </span> <span class="date"> Как удалить аваст с компьютера если он не удаляется </span> <span class="title"> Сейчас мы разберем, как удалить Аваст, чтобы после деинсталляции антивируса, на компьютере не... </span> </a> </div> </div> <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3"> <div class="article-in-loop"> <a class="thumb-title" href="/kak-podklyuchit-nokia-lyumiya-800-k-kompyuteru-podklyuchenie-nokia-lumia-k/"> <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb"> <span class="embed-responsive-item"> <span class="super-wrp"> <span class="span-table"> <span class="span-table-row"> <span class="span-table-row-cell"> <img src="https://i2.wp.com/sms-mms-free.ru/sites/default/files/images/Specifications_Nokia_800_Zune.jpg" class="img-responsive" alt="Подключение Nokia Lumia к ПК" loading=lazy> </span> </span> </span> </span> </span> </span> <span class="date"> Подключение Nokia Lumia к ПК </span> <span class="title"> Статьи и Лайфхаки впервые могло разочаровать всех, кто недавно приобрёл данное мобильное... </span> </a> </div> </div> </div> </div> </div> <style> /* Додаємо відступ внизу */ body.single #content .ad { margin-bottom: 20px; } /* Додаємо відступ вгорі */ body.single #sidebar .ad { margin-top: 20px; } </style> <footer id="footer" class="clearfix"> <noindex> <div class="container row-1 hidden-xs"> <nav class="nav"> <div class="menu menu-footer"> <ul id="menu-podval" class="menu"> <li class="menu-item type-custom object-custom home "><a href="/">Главная</a></li> <li class="menu-item type-post_type object-page "><a href="">О проекте</a></li> <li class="menu-item type-post_type object-page "><a href="">Рекламодателям</a></li> <li class="menu-item type-post_type object-page "><a href="/sitemap.xml">Карта сайта</a></li> <li class="menu-item type-post_type object-page "><a href="/feedback/">Обратная связь</a></li> </ul> </div> </nav> </div> <div class="border-blue clearfix"></div> <div class="container row-2"> <div class="row"> <div class="col-sm-6"> <div id="text-2" class="block widget-container widget_text"> <div class="textwidget"> <div class="sn"> <a href="https://www.facebook.com/sharer/sharer.php?u=https://battlecase.ru/chto-takoe-meta-tegi-stranicy-nastroika-meta-tegov-i-klyuchevyh-slov-primery/" target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/facebook.png" alt="" class="img-responsive" loading=lazy></a> <a href="https://vk.com/share.php?url=https://battlecase.ru/chto-takoe-meta-tegi-stranicy-nastroika-meta-tegov-i-klyuchevyh-slov-primery/" target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/vkontakte.png" alt="" class="img-responsive" loading=lazy></a> <a href="https://youtube.com/" target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/youtube.png" alt="" class="img-responsive" loading=lazy></a> </div> <style> .sn a { display: inline-block; margin: 0 10px 0 0; width: 55px; } @media (max-width:767px) { .sn { text-align: center; } .sn a { margin: 0 7px; width: 43px; } } .sn a:hover { opacity: 0.9; } </style> </div> </div> </div> </div> </div> <div class="border-3 clearfix"></div> <div class="container row-3"> <div class="row"> <div class="col-sm-8 col-txt col-txt-1"> Размещенные на сайте материалы, могут содержать информацию для пользователей старше 18 лет. </div> <div class="col-sm-4 col-txt col-txt-2 text-right"> <div class="project-by-um"> © 2012 - 2018 <img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/svg/logo-ukr-media.svg" width="90" class="img-responsive" loading=lazy> </div> </div> </div> </div> </noindex> </footer> </div> <div class="modal fade" id="modal-search" tabindex="-1" role="dialog" aria-labelledby="modal-searchLabel"> <div class="modal-dialog modal-lg itc-container" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="modal-searchLabel">Поиск по сайту</h4> </div> <div class="modal-body"> <form role="search" method="get" class="form-search" id="modal-searchform" action="/"> <div class="form-group"> <input type="search" autocomplete="off" spellcheck="false" placeholder="Введите текст поиска" value="" name="s" id="modal-s" class="input-lg form-control"> </div> </form> <div class="modal-search-results"></div> </div> </div> </div> </div> <link rel='stylesheet' id='dashicons-css' href='/wp-includes/css/dashicons.min.css?ver=4.9.1' type='text/css' media='all' /> <link rel='stylesheet' id='thickbox-css' href='/wp-includes/js/thickbox/thickbox.css?ver=4.9.1' type='text/css' media='all' /> <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/decomments/templates/decomments/assets/js/decom.min.js?ver=1513648647'></script> <script type='text/javascript' src='https://battlecase.ru/wp-content/themes/sk-Evrikak/js/modernizr-2.8.3.min.js?ver=4.9.1'></script> <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/visualizer/js/lib/clipboardjs/clipboard.min.js?ver=3.0.4'></script> <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script> <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/lazy-load/js/jquery.sonar.min.js?ver=0.6.1'></script> <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/lazy-load/js/lazy-load.js?ver=0.6.1'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var thickboxL10n = { "next": "\u0414\u0430\u043b\u0435\u0435 \u2192", "prev": "\u2190 \u041d\u0430\u0437\u0430\u0434", "image": "\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435", "of": "\u0438\u0437", "close": "\u0417\u0430\u043a\u0440\u044b\u0442\u044c", "noiframes": "\u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u043e\u0432. \u0423 \u0432\u0430\u0441 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0442\u0435\u0433\u0438 iframe, \u043b\u0438\u0431\u043e \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0445 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442.", "loadingAnimation": "http:\/\/battlecase.ru\/wp-includes\/js\/thickbox\/loadingAnimation.gif" }; /* ]]> */ </script> <script type='text/javascript' src='/wp-includes/js/thickbox/thickbox.js?ver=3.1-20121105'></script> <div id="mmenu_res" style="display:none;width:100%;height:40px;line-height:40px;background:#FD6A93;color:#FFFFFF;position:fixed;text-align:center;font-size:23px;;z-index:100000000"> <a class="mmenu_open" href="#irevoltmenu"> <span class="mmenu-icon-bar"></span> <span class="mmenu-icon-bar"></span> <span class="mmenu-icon-bar"></span> </a> Рубрики </div> <div class="modal fade" id="modalAd" tabindex="-1" role="dialog" aria-labelledby="modalAdLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div class="ad text-center"> </div> </div> </div> </div> </div> <link rel="stylesheet" href="/wp-content/themes/sk-Evrikak/ad/ad_popup-and-bottom/show-ads.css"> <script src="/assets/jquery1.cookie1.js"></script> <script src="https://battlecase.ru/wp-content/themes/sk-Evrikak/ad/ad_popup-and-bottom/show-ads.js"></script> </body> </html>