Сниппет это важный элемент любого сайта для привлечения посетителей с поисковой выдачи. Поэтому в данной статье мы более детально разберем этот seo элемент. Вы узнаете, что это такое, для чего он нужен и как сделать расширенные сниппеты Гугл, Яндекс и Mailru.
Сниппет это что такое
Для начала давайте разберемся, что такое сниппет сайта и для чего он нужен. Сниппет — это блок информации о найденном документе, который отображается в результатах поиска.
Его основные задачи:
- Показать первичную информацию на нужный запрос
- Заставить человека обратить на себя внимание
- Заинтересовать пользователя для перехода на сайт
Обратите внимание, что snippets влияет на . Если вы его составите плохо, то на ресурс могут заходить нецелевые посетители, которые не будут слишком заинтересованы в контенте. Это очень плохо для SEO продвижения! Поэтому тут будьте очень внимательны.
Сниппеты по-разному предоставляются в поисковых системах. Пути их получения тоже отличаются. В этом материале мы с вами более подробно разберем сниппеты Яндекс. Также я дам вам полезные рекомендации относительно Google и Mail.ru.
Вот как выглядит обычный и оптимизированный snippet:
Обычный и оптимизированный сниппет в Яндексе
Добиться топовой позиции, это еще не означает что вы гарантированно получите переход на сайт. Вас легко обойдут конкуренты если их сниппет будет более презентабельным и намного лучше притягивать внимание.
Для начала давайте разберем два примера сниппетов Яндекса. В поиске мы вбили запрос «продажа детской одежды Иркутск». На 4 и 5 позиции находились два представленных ниже сайта.
На какой из сайтов вы перешли бы при условии, что можно открыть только 1 проект?
Я бы выбрал второй вариант.
Из чего состоят сниппеты Яндекс
Давайте подробно разберем, что мы видим у второго сайта:
- Адрес сайта
- Название
- Описание
- Дополнительная информация из Яндекс Справочника
- Доп. инфа о сайте
Если так присмотреться, то то же самое мы видим и для первого сайта.
Но почему тогда второй вариант лучше?
А лучше из-за содержания и открытых контактов из Яндекс Справочника. Именно последняя хорошо отвечает на мой региональный запрос.
Если посмотреть исходный код первого сайта, то увидим следующее. Описание, выводимое в сниппете отличается от мета тега description. Кликните по картинке ниже для увеличения.
Дело в том, что описание, составляемое поисковой системой Яндекс, зависит от заданного запроса. Оно может браться из разных мест. И даже не с вашего сайта. Но об этом мы в этой статье еще поговорим.
Если посмотреть исходный код страницы второго проекта, что в описании сниппета выводится мета-тег description. Это значит, что поисковая система считает этот тег релевантным . Следовательно, описание сниппета можно считать оптимизированным под запрос.
Описание сниппета для сайта
Как сделать сниппет для Яндекса
Теперь давайте более подробно поговорим о том, как сделать сниппет для Яндекса. Для этого ниже мы разберем все его составные части. Я расскажу, для чего они нужны и как правильно их внедрить.
Формируем Title
В 90% случаев тег title идентичен названию, которое выводится в сниппете. Рекомендуемая длина к заполнению тега title колеблется в районе 55 символов.
Обязательно должно быть наличие ключевого запроса в этом теге. Также сам тайтл должен освещать суть страницы, к которой он привязан.
Если тайтл отсутствует или сформирован очень плохо, то будет выбран более информативный заголовок из текста документа.
Еще могут использоваться данные, размеченные . Это такой стандарт разметки для формирования и публикации информации в сниппете для поисковой выдачи и в социальных сетях.
Чтобы добавить информацию для формирования сниппета в соцсетях, в html коде страницы внутри элемента head укажите заголовок страницы и название сайта в свойствах og:title и og:site_name.
Более подробно я говорить про такой формат не буду, так как он разрабатывался Facebook в основном для социальных сетей.
Просто иногда он может учитываться поисковыми системами. Обычно это происходит, когда основные мета-теги составлены плохо или вообще, пустые.
Тогда поисковикам ничего не остается, как в выдаче выводить данные с других элементов html кода страницы. Поэтому всегда прописывайте основной title страницы.
Фавикон или иконки для сниппетов
— это небольшая картинка или значок сайта, который высвечивается в выдаче рядом тайтлом. Также эти иконки для сниппетов могут отображаться и в строке браузера.
Выводим иконки для сниппетов
Чтобы фавиконка отобразилась в результатах поиска, необходимо в корневом каталоге сайта разместить картинку в виде файла размером 16 x 16 и форматом ico. Но возможны также и другие форматы: gif, png или jpeg.
Чтобы описать favicon, в html коде страницы добавьте в элемент head один из следующих кодов, представленных на рисунке выше. Через некоторое время ваша фавиконка появится сниппете Яндекса.
Теперь давайте поговорим о том, как добавить адрес в сниппет Яндекса. Стоит сказать, что для крупных проектов с хорошо выраженной структурой, в сниппете может показываться навигационная цепочка. Это ряд ссылок разделов сайта, к которому относится найденная страница.
Сформированный адрес в сниппет Яндекс
Для распознания структуры и выбора названия сайта, Yandex использует алгоритм быстрых ссылок. Рекомендации вебмастера сводятся к тому, чтобы сделать более понятную и простую структуру проекта.
Никаких других специальных возможностей для этой функции не требуется. Вот основные правила для создания навигационных цепочек в расширенном сниппете в Яндексе:
- Только для крупных веб-ресурсов
- Формировать строго по каталогам: дерево разделов сайта должно соответствовать url
- Наличие человеко-понятных урлов
- Для выбора названий используйте title и тексты ссылок на страницу. И нужно, чтобы они (title и название ссылок) совпадали.
Также в вебмастере Яндекса можно визуально выделить адрес своего сайта. Делается это в пункте «Регистр имени сайта» раздела «Информация о сайте».
Этот инструмент позволяет изменить написание урла сайта в поиске. Это нужно чтобы сделать его более понятным и информативным для пользователя.
Новый регистр имени сайта
После задания регистра имени сайта, данные отправляются на проверку модератором.
Помните, что Yandex оставляет за собой право не принимать те изменения в имени сайта, которые предназначены только для искусственного выделения.
Изменение регистра в имени должно быть направлено на улучшение читаемости домена и удовлетворять следующим требованиям:
- Если доменный сегмент содержит более одного слова, то все слова сегмента могут начинаться с заглавной буквы. Пример был показан на рисунке выше.
- Нельзя изменять регистр для доменных имен, включающие дефис.
- Нельзя изменять для интернациональных доменов. Соответственно, домены на кириллице не имеют возможности регистра имени.
- С заглавной буквы могут начинаться имена собственные, в том числе и являющиеся доменами общего пользования.
- Все заглавные буквы допустимы в доменных именах, представляющие собой общеизвестные аббревиатуры, которые совпадают с названием сайта или компании.
Дополнительная информация
Следующий пункт, это дополнительная информация. Тут подробно останавливаться не буду, так как повлиять на него мы не можем.
Кнопка рядом с названием сайта позволяет сразу перейти к сохраненной копии страницы. А также посмотреть все документы по найденному запросу данного проекта или пожаловаться на результаты поиска.
Сохраненная копия покажет копию сайта последней даты индексации.
Пожаловаться — это если вы считаете, что результаты поиска Яндекса не соответствуют запросу или содержат неприемлемую информацию. Тогда вы сможете сообщить об этом.
Описание (аннотация)
Описание или аннотация — это короткое описание документа. Составляется на основе мета-тега description, фрагмента текста с сайта и описания сайта из Яндекс Каталога или Dmoz.
Description должен содержать краткое и осмысленное содержание страницы с ключевыми запросами только для данной страницы. Максимальная длина должна быть не более 200 символов.
Если мета-тег дескрипшен отсутствует или плохо сформирован, то система покажет наиболее информативное описание с текста страницы. То есть описание автоматом будет формироваться в виде цитат из текста.
Еще может браться описание из Яндекс Каталога или Dmoz. Но это будет при условии, если такое описание будет более точно отвечать на запрос пользователя. Чтобы отказаться от описания из Яндекс Каталога и Dmoz, нужно в html коде страницы разместить мета-теги.
Вы должны заранее знать, по каким запросам будет продвигаться ваша страница, так как это основа SEO. А сниппет это реклама сайта из этих же запросов. Поэтому нужные ключевые слова уже должны быть заранее прописаны на самой странице.
Еще бывает такое, что в аннотации может показываться надпись типа «Ссылки на страницу содержат». Это значит, что робот не нашел ключевой запрос в вашем тексте. Однако он обнаружил сайты, которые ссылаются на вас под этим запросом.
Контактная информация
Следующий важный элемент, влияющий на кликабельность вашей ссылки в результатах поисковой выдачи, это контактная информация.
Чтобы вывести контакты в сниппете, вам необходимо добавить свою организацию и всю подробную информацию о ней в Яндекс Справочник
.
Еще передавать контактные данные в Яндекс можно другими способами. Например, использовать микроразметку .
Разметка по стандарту Schema.org
Яндекс Справочник понимает схемы и разметки. После разметки информации на странице, обязательно воспользуйтесь валидатором для ее проверки. Для этого в вебмастере есть инструмент «Валидатор микроразметки».
Отображение быстрых ссылок в сниппете Яндекс
Отображение быстрых ссылок в сниппете Яндекс сформировано в виде короткого пути к важной информации на сайте. Данные ссылки ведут на страницы с наиболее востребованным для пользователя информацией. То есть, страницы, наиболее посещаемые пользователями.
Вывод быстрых ссылок в сниппете Яндекс
- Основные страницы и разделы доступны с главной
- Логичная и продуманная навигация
- Короткие названия страниц, отражающие их содержание
- должна быть с заполненным alt
- Title совпадает с H1 и с текстами ссылками на страницу
Обратите внимание, что это лишь советы. Их выполнение не дает точной гарантии в том, что быстрые ссылки в сниппете Яндекс будут определены.
Если они определены, то их управление осуществляется в панели вебмастера. Делается это в разделе «Информация о сайте» пункт «Быстрые ссылки».
Информация о товаре и цена в сниппете Яндекса
Актуальная информация о товаре и его цена в сниппете Яндекса — это очень важный момент для всех владельцев интернет-магазинов. Ниже вы видите привлекательно-сформированный snippet с выведенной ценой.
Цена в сниппете Яндекса
Чтобы получить нечто подобное с участием Яндекс Маркета
, вам необходимо загрузить свои товары. Тогда информация о них будет автоматически передаваться в поиск.
Скажу, что такой способ платный. Поэтому на нем более подробно останавливаться не будем. Вместо этого поговорим про бесплатные варианты.
Вывести информацию о товаре можно с помощью вебмастера Яндекса
. Делается в пункте «Товары и цены». Настройка экспорта информации о товарах и услугах из вашей базы данных YML файла возможны в некоторых CMS по-умолчанию.
Для популярных CMS существуют различные плагины и модули, которые позволяют без лишних доработок создать данный файл.
После его создания на сайте магазина вам понадобиться несколько минут для передачи информации Яндексу посредством кабинета вебмастера.
Добавлять информацию о товаре можно также с помощью микроразметки . Ее пример вы найдете ниже.
Вывод цены в сниппете разметкой schema.org
Как видно, в html-коде страницы добавлены специальные атрибуты, которые понимает робот.
Атрибуты разметки Schema.org
То есть сайт начинает говорить роботу, что price — это цена. А name — это название. И так далее.
После внедрения микроразметки в html-код сайта, обязательно проверьте валидность. Можно использовать инструменты Яндекса и Гугл валидатора.
В Яндексе, когда введете адрес страницы для проверки, то получите что-то похожее, как на рисунке ниже.
Валидатор Яндекса
Тут вам покажут, как парсер микроразметки обработал вашу страницу. На рисунке не обнаружено ни одной ошибки. Значит валидность пройдена. То есть все необходимые поля правильно заполнены на сайте.
Семантическую разметку понимает не только Yandex, но и Google. Поэтому рекомендую вам дополнительно проводить проверку и в Гугл Валидаторе.
Валидатор Гугла
Давайте теперь рассмотрим этот же сайт, но на этот раз возьмем страницу, у которой нарушена валидность. Для начала, глянем на сниппет сайта.
Как видим, он не слишком презентабельный. Не захватывает внимание пользователя. Также непонятно, о чем данный веб-проект.
А все это из-за того, что на такой странице не заполнено одно из обязательных полей семантической разметки.
Видно, что поле описания не заполнено. Оно относится к обязательным. Поэтому нужная информация и не выводится в поисковой выдаче.
Еще с помощью Schema.org мы можем внедрить на сайт другие схемы, которые будут выводиться в специальных расширенных сниппетах Яндекса. Более подробно о них мы говорить не будем, так как здесь очень много информации.
Найти нужную информацию про микроразметку вы можете в Яндекс Помощь
или на сайте .
Rich snippets или расширенные сниппеты Google
Давайте поговорим про Rich snippets или расширенные сниппеты Google. К сожалению, мы не сможем рассмотреть все примеры в поисковой выдачи Гугл. Тут поддерживаемых форматов и возможностей гораздо больше.
Расширенные сниппеты Google
Но важно знать, что Google также, как и Yandex активно поддерживает микроразметку Schema.org. Поэтому по-умолчанию рекомендую вам использовать именно ее.
В Гугле расширенные сниппеты получили название rich snippets. Для тех, кто не хочет подробно вдаваться в технические премудрости, система дает нам упрощенный вариант. Размечать страницы можно маркером в кабинете для вебмастеров Google.
Маркировка Гугл
Справа от видео нажмите на синюю кнопку «Начать выделение». Дальше вводим урл страницы и ниже выбираем необходимый тип разметки.
Типы микроразметки страницы
Потом выбранная страница откроется в режиме маркировки. Прямо тут выделяем курсором нужные фрагменты контента и добавляем значения к атрибутам.
Маркировка страницы в Google
Только убедитесь, что значение отображается правильно. Для этого смотрим на блок «Мои элементы данных».
Разметьте все данные, которые только сможете. А после выделения нажмите «Опубликовать». После индексации Google учтет внесенные изменения и отобразит их в своей выдаче.
В Mail.ru также, как и в предыдущих поисковых системах можно выводить красивый сниппет для сайта. Более подробно в статье мы рассмотрим такие схемы, как контактная информация и быстрые ссылки.
Расширенные сниппеты Mail.ru
Выше расположены примеры расширенного сниппета. Как видно, они похожи на те, что были в предыдущих поисковых системах. Тут также представлен адрес сайта, фавикон, хлебные крошки и навигационные цепочки.
Для их вывода Mail.ru вам понадобиться кабинет вебмастера с подтвержденными правами на сайт. Интерфейс в нем очень простой и понятен для пользователя. Поэтому вам не составит труда указать нужные данные.
Для отображения быстрых ссылок
(«Сайтлинки»), вам нужно зайти в кабинет вебмастера Mail.ru и подтвердить права на проект. Далее перейдите в «Сайтлинки» и нажмите на кнопку «Добавить».
Добавление быстрых ссылок в сниппет Mail.ru
Для добавления контактной информации
в сниппет, перейдите в раздел «Телефон и адрес» и нажмите на кнопку «Добавить».
Добавление контактов в сниппет Mail.ru
Заполните все необходимые поля. Однако возможность этой информации в сниппете 100% не гарантирована. Mail.ru также поддерживает микроразметку schema.org.
Безусловно, если ваш сайт находится по какому-то запросу на первой странице выдачи поисковой системы – это хорошо. К этому нужно стремиться, это будет решающим фактором в популярности вашего проекта, и от этого будет зависеть ваша прибыль (если проект коммерческий). Но, следует заметить, что трафик на первую позицию в поиске и на 10-ю это разные вещи. Существует много статистических исследований, которые дают примерные проценты распределения трафика по позициям. Точные данные вы сможете найди где-то в другом месте. Ясно одно: чем дальше от первой позиции – тем меньше трафик. Десятая позиция в Google потенциально может дать примерно 10% от всех посетителей набравших этот запрос. И это при том, что она более кликабельная, чем 9-я (потому, что крайняя снизу).
Немного теории
Логическим завершением любого поискового запроса, сделанного человеком, должен быть переход на сайт, где есть именно то, что человек искал. После нахождения такого сайта, человек испытывает моральное удовлетворение и прекращает поиск. По-этому, если на первой странице выдачи выше вашего сайта есть много качественных и профессионально сделанных проектов – то вам стоит надеяться только на чудо. Выход один – делать качественный сайт. Но, есть все-таки один момент, который может дать немного преимущества – нужно заставить человеческий глаз сфокусироваться именно на описании вашего сайта в результатах выдачи. Я не буду затрагивать тему о том, что нужно создавать информативные сниппеты, чтобы в них был намек на то, что сайт содержит именно то, что нужно. Это все понятно. Давайте представим, что все 10 сайтов из выдачи имеют качественные информативные сниппеты. Что в этом случае можно сделать, чтобы привлечь больше внимания?
Как повысить CTR сайта в поисковой выдаче Google?
Выход есть. Чтобы увеличить кликабельность сниппета (CTR – clickthrough rate), нужно как-то визуально выделить ваш сайт в результатах поиска Google от остальных. Человек всегда будет обращать внимание на отличия в общей однородной массе. Текст описаний сайтов (сниппет) – это и есть масса, масса текста. Если не фокусироваться на каких-то отдельных словах, а смотреть как-бы сквозь текст, за него, то ничего особенного в глаза не бросается. Чтобы текст сниппета бросался в глаза нужно делать либо сгустки пикселей в какой-то части, либо делать пустое пространство, либо делать вертикальные расчески (несколько одинаковых строк текста одна под другой).
Почему сниппеты для Google, спросите вы?
Он самый предсказуемый в плане отображение сниппетов. Только Google будет отображать то, что я ему укажу. На самом деле, любой владелец сайта должен иметь возможность сам выбирать, как будет выглядеть его описание в выдаче, а не так, как захочет Yandex .
Как же Google формирует сниппет сайта?
В формировании описания сайта в результатах выдачи принимают участие: тэг
, <meta name=”description”>, содержимое параметра alt=”” первой картинки в html коде, текст внутренних и <a href="/avtomaticheskoe-opredelenie-dvizhka-foruma-pervye-shagi-v-poiskovoi/">внешних ссылок</a>, описание сайта в каталоге Dmoz, или просто текст со страницы сайта. Также, в <a href="/kak-ustanovit-vremya-vkontakte-kak-skryt-vremya-poslednego-poseshcheniya/">последнее время</a> появилось много возможностей выделить свой сайт с помощью микроформатов для расширенных <a href="/rasshirennye-snippety-v-gugle-google-poshagovaya-instrukciya-rasshirennyi-snippet/">сниппетов Google</a>. Но, это уже тема для другой статьи. Возможно, я все-таки найду в себе силы и реализую давно задуманный проект по созданию сниппетов для Google, и всему, что с этим связано.</p>
<p>Если не пустой <b><title>
</b> – первая строка сниппета формируется из него. Если <b><title>
</b> пустой – то Google может выбрать текст первой ссылки, которая содержит набранное ключевое слово, если таких нет, то текст самой первой ссылки в html-коде или часть основного текста.</p>
<p>Две другие строки сниппета (иногда три) формируются так, чтобы содержать текст, релевантный поисковому запросу. Если <b><meta name=”description”>
</b> не пустой и релевантен запросу, то описание сайта берется из него. Есть определенный <a href="/maksimalnyi-razmer-faila-pdf-kak-umenshit-razmer-pdf-faila-bez-poteri-kachestva/">максимальный размер</a> <b>description
</b>, если текста в нем мало, то Google заполняет <a href="/icloud-pochti-zapolneno-chto-znachit-kak-kupit-dopolnitelnoe-mesto-v/">свободное место</a> релевантными кусками из текста. Если <b><meta name=”description”>
</b> пустой, но параметр <b>alt=””
</b> первой картинки <b><img>
</b> не пустой, то берется этот текст. Если <b>description
</b> нерелевантен запросу, то описание сайта фомируется из кусков релевантного текста (на усмотрение Google).<br>
Если сайт присутствует в <b>Dmoz
</b>, то Google может брать данные для сниппета оттуда. Чтобы отключить показ описания сайта из Dmoz, нужно вставить на сайт этот html-код: <b><meta name=”robots” content=”noodp”>
</b>.</p>
<p>Для того, чтобы влиять на создание сниппета, нужно из всего выше перечисленного выделить самый подходящий вариант: <b><title> должен быть не пустой
</b>; <b><meta name=”description”> не пустой, релевантный запросу, не короткий
</b>. Дальше, дело техники.</p>
<h2>Оптимизация сниппетов Google. Перейдем к практике </h2>
<p>Задача: сфокусировать глаза пользователя на описании вашего сайта. Я предлагаю делать сгустки в тексте. Для этого очень хорошо подходит любое повторение одного и того же символа много раз: AAAAAAAAA, WWWWWWWWW, iiiiiii, 88888, @@@@@@@@, ##########, [[[[[[[[, < <<<< >>>>>>, и так далее. Любые графические спецсимволы тоже подойдут: ❄ ❆ ☀ ☁ ☂ ☔ ☽ ★ ☎ ☘ ☙ ☢ ☑ ☒ ☯ ☗ ☰ ☱ ☲ ☲ ☴ ☵ ☶ ☷ ☻ ♠ ❤ ♦ ◆ ♨ ♬ ♻ ♼ ⚀ ⚅ ⚈ ⚉ ⚑ ⚫ ▂ ▃ ▅ ▆ ██ ▒▓ ▀▄▀▄ ═ ╬ ╦ ╩ ╦ ❥ ✿ ❋ ✩ ✮ ✯ ✰ ❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ .</p>
<p>Вся сложность заключается в том, чтобы забить текстом <b>description
</b> под завязку, и заставить Google перенести текст на вторую строку так, как нам нужно. Это не так сложно, нужно знать всего пару нюансов. На самом деле этот перенос делается браузером, когда превышается ширина поля, содержащее текст (за это отвечает гугловский css-класс). Ну, и максимальный размер description у меня получился 155 символов. Тоесть, нужно сделать такой блок текста, чтобы он был по максиму близок к 155 символам и произошел принудительный перенос в нужном нам месте на вторую строчку. Управлять переносом можно, зная, что браузер не разрывает слова. Единственное замечание, нельзя просто взять и сделать всю вторую строчку из одного неразрывного слова – google ее не примет и поставит троеточие (…). нужно внутри вставить слова и символы, которые гугл понимает как пробел: дефис, подчеркивание (я еще не протестил все <a href="/windows-8-perezagruzka-iz-komandnoi-stroki-perezagruzka-iz-komandnoi-stroki-windows/">возможные варианты</a>, иногда хвост такого описания после слова обрубает до самого конца). Старайтесь пока во второй строчке привязывать подобный “хвост” после текста не пробелом.</p>
<h2>Закрепим полученную информацию на реальном примере</h2>
<p>Так как я уже начал замечать в выдаче Google сайты, которые используют мои методы создания сниппетов, то считаю, что пришло время расскрыть немного свои карты .</p>
<p><img src='https://i1.wp.com/saney.ru/wp-content/uploads/2011/10/snippets1.gif' width="100%" loading=lazy></p>
<p>В этом сниппете используется “#” в title и description. Несколько таких символов подряд отлично концентрируют на себе внимание.<br>
Звездочки ★ тоже очень сильно заметны. Здесь я использовал их, чтобы изобразить рейтинг отзывов. Получилось неплохо. Я думаю, что слово “««- recommended” тоже не останется без внимания, ведь возле остальных сайтов такой надписи нет. Также, в сниппете присутствует email компании. Но, больше всего привлекает внимание конечно же эта конструкция с ❺. На другом сайте, где ипользуется подобный шаблон сниппета, средний CTR 9-й позиции на 1-й странице <a href="/kak-popast-na-rabotu-v-google-i-stoit-li-eto-togo-v-prilozhenii-google-ne/">результатов Google</a> равен примерно 12%. Это <a href="/gugl-plei-kak-zaregistrirovat-prilozhenie-instrukciya-o-tom-kak-zaregistrirovat-akkaunt-razrabotchi/">данные Google</a> Webmasters Tools за последние 3 месяца.</p>
<p><b>Как это можно сделать?
</b></p>
<p>Эту красоту можно сделать с помощью специальных микроформатов данных, которые Google уже давно использует при отображении сайтов. Я не буду в этой статье расписывать подробно, что это, а остановлюсь на нашем примере.</p>
<p>Чтобы сделать такой сниппет с ❺, нужно вставить в html-код вашего сайта такой текст:</p>
<p><div xmlns:v=”http://rdf.data-vocabulary.org/#”><br>
<span typeof=”v:Breadcrumb”><a href=”http://вашсайт.com/” rel=”v:url” property=”v:title”>Ваш текст</a> › </span><br>
<span typeof=”v:Breadcrumb”><a href=”http://вашсайт.com/раздел-сайта.php#content” rel=”v:url” property=”v:title”>❺❺❺❺❺</a> › </span><br>
<span typeof=”v:Breadcrumb”>Ваш текст</span><br>
</div></p>
<p>В результате моих экспериментов был найден способ, как заставить Google показывать один и тот же текст возле URL сайта. А также была решена проблема с показом такого сниппета для главной страницы сайта. Для этого нужно в структуре Breadcrumb в том месте, где прописывается внутренний раздел сайта, просто дописать так называемую “хеш-ссылку” к <a href="/yandeks-glavnaya-stranica-sdelat-domashnei-kak-sdelat-yandeks/">главной странице</a> /#hash. Где hash – это id какого-нибудь элемента на вашей странице.</p>
<p>Также, стоит заметить, что Google уже обратил внимание на такие сниппеты. Если раньше можно было использовать такие приколы как ▀▄▀▄▀ или ████ ☑, то сейчас многие из таких символов уже запрещены к показу возле URL. Или же они показываются только в региональных выдачах, а в google.com не работают (или работают, но хлебные крошки должны быть короткими и начинаться с буквы).</p>
<p><img src='https://i2.wp.com/saney.ru/images/snippets.gif' height="73" width="350" loading=lazy></p>
<p>Еще одна фича, которая все-еще работает – это возможность прописать в Breadcrumb URL другого сайта (вместо ссылки на раздел сайта, не home page) . Тогда со сниппета Google можно будет переходить на другой сайт, если пользователь кликнет по такой ссылке, как ❺❺❺❺❺ в нашем примере. Это может быть использовано “черными оптимизаторами”, чтобы без ипользование редиректов направлять трафик из профилей форумов на свои сайты. Или же можно использовать в качестве другого url сервис bit.ly, чтобы узнать как пользователи кликают на сниппет.</p>
<h2>Генератор сниппетов для Google</h2>
<p><i>Данная статья была написана в 2008 году, после нескольких лет успешного применения описанных техник на практике. С тех пор многое изменилось, но основная идея осталась прежней.
</i></p>
<p>Не забудьте понажимать на <a href="/peepso-novyi-plagin-dlya-sozdaniya-socialnoi-seti-na-wordpress/">социальные кнопки</a>, если вам понравилась статья
</p>
<p>Для того, чтобы дать пользователю <a href="/tip-faila-bmp-chto-bmp-format-faila-opisanie-rasshireniya-dopolnitelnaya-informaciya/">дополнительную информацию</a>, ещё до посещения сайта в поисковой выдаче, такие системы, как Google и Яндекс, создали расширенные сниппеты. Они же помогают выделить более качественные сайты, которые готовы внедрять новшества и развиваться.</p>
<p>Сами по себе они представляют собой результат поисковой выдачи, который был расширен благодаря одному из дополнений. У каждого поисковика существует собственные системы, а также свои правила для их подключения.</p>
<p>Не иже будет представлена информация о всех возможных вариациях этих дополнений, а также способах их получения.</p>
<p>В Яндексе на сегодняшний день существует огромное количество <a href="/otkrytie-mpp-failov-sozdannyh-v-razlichnyh-versiyah-project-mpp/">различных расширений</a> для поисковой выдачи, чтобы пользователи могли получить максимум информации о сайте и выбрать из представленных вариантов максимально подходящий.</p>
<p><img src='https://i2.wp.com/web-rynok.ru/wp-content/uploads/2018/12/img_5c094f0eb58d5.png' align="center" width="100%" loading=lazy></p>
<p>Значок Турбо можно получить только после подключения специального YML файла в вебмастере в разделе «Турбо-страницы»-«Источники». Подробнее о технической составляющей <a href="/oblachnoe-hranilishche-dropbox-dropbox-ustanovka-registraciya/">данного файла</a> <span>https://yandex.ru/support/webmaster/turbo
</span>/ .</p>
<p><img src='https://i1.wp.com/web-rynok.ru/wp-content/uploads/2018/12/img_5c0957e4df4db.png' align="center" width="100%" loading=lazy></p>
<h2><span>Расширенные спиппеты в Google
</span></h2>
<p>В Google также для получения <a href="/energosberegayushchie-lampy-podrobnaya-informaciya-vidy-lampochek-osveshcheniya/">подробной информации</a> о сайте или странице также имеются расширенные описания.</p>
<p>Наиболее часто встречающиеся это быстрые ссылки. Они позволяют минуя основную страницу ознакомится с дополнительными материалами или информацией. Сильно расширяют ответ в выдаче и помогают выделиться.</p>
<p><img src='https://i0.wp.com/web-rynok.ru/wp-content/uploads/2018/12/img_5c09585d069cf.png' align="center" width="100%" loading=lazy></p>
<p><img src='https://i0.wp.com/web-rynok.ru/wp-content/uploads/2018/12/img_5c09590856c06.png' align="center" width="100%" loading=lazy></p>
<p>Недавно появившийся список ответов, показывающий прямо в выдаче последние комментарии. Полезен для форумов, отзовиков и сервисов вида вопрос/ответ. Показывается только в мобильной выдаче.</p>
<p><img src='https://i1.wp.com/web-rynok.ru/wp-content/uploads/2018/12/img_5c09596e686d7.png' width="100%" loading=lazy></p>
<p>Эмблема AMP выдаётся сайтам, контент которых будет загружен моментально. Появляется только в мобильной выдаче.</p>
<p><img src='https://i1.wp.com/web-rynok.ru/wp-content/uploads/2018/12/img_5c0959cddb433.png' align="center" height="470" width="433" loading=lazy></p>
<p>Цены, сроки доставки и другие атрибуты для продажи товаров. Предоставляют возможность прямо из списка ответов выбрать подходящий сайт для покупки выбранного товара.</p>
<p><img src='https://i0.wp.com/web-rynok.ru/wp-content/uploads/2018/12/img_5c095a32dbded.png' align="center" width="100%" loading=lazy></p>
<p>Библиотека представлений, когда можно оформить в поисковой выдаче страницу для каждого типа материалов, среди которых:</p>
<ul><li>Рецепты;</li>
<li>Фильмы;</li>
<li>Вакансии;</li>
<li>Набор данных;</li>
<li>Продукты;</li>
<li>Телесериалы;</li>
<li>Мероприятия;</li></ul>
<p><b>Сниппет - это небольшое <a href="/ascii-opisanie-kodirovanie-tekstovoi-informacii/">текстовое описание</a>
</b>, которое присутствует вместе со ссылкой в поисковой выдаче. Он дает пользователю информацию о материале, предоставленном той или иной страницей сайта в результатах выдачи по заданному запросу.</p>
<p>За счет сниппетов пользователю облегчается задача в процессе выбора наиболее подходящего для него материала. Среди всех предоставленных ему ссылок, человек может выбрать только такие, которые наибольшим образом подходят под его поисковый запрос.</p>
<p>Чем привлекательней будет выглядеть описание страницы, тем <a href="/ustanovit-prilozhenie-kakie-est-na-tele2-vse-o-tarife-i-o/">больше вероятность</a>, что посетитель перейдет на данный сайт. Поэтому сниппет является одним из <a href="/tipy-shin-sovremennogo-pk-i-ih-harakteristika-sistemnaya/">важных элементов</a> поискового продвижения.</p>
<p>Вот, например, как выглядит в Яндекс сниппет по запросу "как раскрутить сайт":</p>
<p>Как мы видим, Яндекс выделяет синоним запроса в title, в быстрых ссылках и точные формы запроса в тексте страницы. Как сделать, чтобы нужная часть текста попала в сниппет?</p>
<ul><li>Желательно чтобы в предложении присутствовала точная форма запроса.</li>
<li>Также увеличивает вероятность попадания в сниппет нахождение в этом же предложении или рядом повторения запроса или его синоним.</li>
</ul><p>То есть Яндекс берет и "вырывает" кусок текста из страницы (до 240 знаков), где наиболее плотно расположены .</p>
<p>В результатах <a href="/yandex-golosovoi-poisk-windows-golosovoi-nabor-v-yandeks-brauzere/">поиска Yandex</a> и Google можно видеть как обычные сниппеты, так и расширенные. Последние наиболее точным образом описывают предоставляемую страницу пользователю в результатах поисковой выдачи. Вот поэтому расширенные сниппеты в последнее время стали наиболее предпочтительными и популярными. Стоит помнить еще и о том, что в различных поисковых системах они создаются разными способами.</p>
<h3>Расширенные сниппеты Яндекса</h3>
<br><img src='https://i2.wp.com/raskruty.ru/img/snippet/rasshirennyj-snippet.png' width="100%" loading=lazy><p>В поисковой системе Yandex присутствуют <b>расширенные сниппеты (англ. rich snippets)
</b>, которые предоставляют пользователю быстрые ссылки на нужные разделы ресурса, адрес организации либо компании (указывается и место на карте Яндекса) и т.д.</p>
<p>Подробная информация предоставляется о заведениях общественного питания (барах, кофейнях, ресторанах и пиццериях), музеях, кинотеатрах, аэропортах, автошкол, различных фитнес-центрах и пр. Помимо этого, расширенные сниппеты Yandex могут показывать информацию о <a href="/kulinarnaya-kniga-recepty/">кулинарных рецептах</a>, вакансиях, рефератах, товарах, словарях и т.д.</p>
<p>Яндекс, как и поисковая <a href="/operatory-poiskovoi-sistemy-google-sekrety-facebook/">система Google</a> также обладает поддержкой семантической разметки информации в микроформатах. К примеру, для разных рецептов применяется разметка в таком микроформате как hRecipe.</p>
<p>При предоставляется возможность управления разметкой информации на страницах и таким образом можно оказывать влияние на формирование данных, которые будут содержаться в расширенном сниппете.</p>
<h2>Сниппеты Google</h2>
<p>Вот как выглядит сниппет в Google по тому же запросу (описание взято из description):</p>
<br><img src='https://i1.wp.com/raskruty.ru/img/snippet/snippet-google.png' width="100%" loading=lazy><p>В отличии от Яндекса в основном создается из тега description и имеет меньшее количество знаков. Поэтому уделите особое внимание заполнению этого тега. Делайте описания страниц привлекательными для пользователя и с употреблением нужных ключевых слов.</p>
<p>Расширенные сниппеты Гугл также имеют предназначение, чтобы детализировать информацию о предоставленных в поисковой выдаче страницах. В зависимости от того какой поисковый запрос задает пользователь сниппет Гугл также содержит разнообразную специальную информацию. К примеру, рейтинг, адрес, список быстрых ссылок, фотографии и т.д.</p>
<p>Для различного рода и типа контента, поисковая система Google может показывать дополнительную информацию: люди, события, организации и компании, музыка, рецепты и другое. Чтобы управлять расширенными сниппетами на страницах ресурса, нужно применять один из трех вариантов сематической разметки информации: <b>микроформаты
</b> (microformats), <b>микроданные
</b> (microdata) либо же RDFa.</p>
<p>Микроформаты – необходимо использовать для составления описания разных сущностей (элементов) и их свойств, это атрибут class в HTML-тегах.
Микроданные – это рекомендованный поисковой системой Гугл вариант разметки, как и микроформаты, который позволяет поисковому роботу узнать об <a href="/vot-of-tank-zapreshchennye-mody-spisok-zapreshch-nnyh-modov-boty-osobyi-vid/">особых видах</a> информации присутствующей на сайте, блоге и т.д.</p>
<p>Для микроданных обычно используют такие атрибуты как itemprop, itemsscore, itemtype в HTML-тегах (доступно в HTML5). Делается это для того, чтобы таким свойствам или элементам контента давать краткие имена при их описании.</p>
<p>При использовании формата RDFa обычно используются XHTML-теги. Необходимо отметить, что для всех трех вариантов разметки специальной информации доступна вложенность, которая предоставляет возможность связывать между собой <a href="/proverka-diodov-razlichnyh-vidov-multimetrom/">различные виды</a> описываемых данных на страницах.</p>
<p>Как заявляют сотрудники поисковых систем, сниппеты Гугла или Яндекса влияния на позицию сайта в выдаче не оказывают. Хотя при этом оказывают огромную помощь для пользователей при выборе <a href="/kak-naiti-neobhodimuyu-informaciyu-v-internete-kto-ishchet-tot-naidet-sekrety/">необходимой информации</a> среди результатов, предоставленных поисковиком.</p>
<p>Таким образом, благодаря тому, что поисковые системы обладают возможностью показывать расширенные сниппеты, описание сайта или блога станет наиболее привлекательным для пользователей. А это означает, что на ваш сайт придут новые целевые посетители.</p>
<p>Нет <a href="/kak-napisat-idealnyi-keis-metody-treninga-metod-keisov-primery/">идеального метода</a> гарантированно попасть в ТОП <a href="/kak-rabotaet-vydacha-google-sozdaem-effektivnyi-snippet-rasshirennye-snippety/">выдачи Google</a>. Но есть <a href="/poyavlenie-kosmoenergetiki-kanaly-shema-seansa-posledovatelnost-provedeniya-seansa-i-obshchii-princi/">общие принципы</a>, понимание которых значительно повышает шансы на успех.
</p>
<p>Хотите лидировать в поиске?
</p>
<p>Тогда нужна правильная стратегия.
</span><span>Правильная стратегия продвижения
</span> <span> – это больше чем исследование ключевых слов и рекламная <a href="/kod-remarketinga-google-analytics-nastroika-remarketinga-v-google-adwords-nastroika/">кампания AdWords</a>. Чтобы максимально использовать присутствие в Гугле, нужно создать эффективный сниппет, который заставит пользователей переходить на вашу веб-страницу. Это важный, но часто игнорируемый аспект SEO.
</p>
<p>Сниппет – одна из тех вещей, которые сами по себе кажутся малозначительными, но в комплексе с другими факторами обеспечивают успешное продвижение. И тут дело не только в <a href="/tehnicheskie-aspekty-sistem-sputnikovoi-svyazi-istoriya/">техническом аспекте</a> SEO. Правильно составленный сниппет сам по себе увеличивает посещаемость веб-ресурса, ведь он – это шапка, которую люди видят в поисковике прежде всего. Хороший сниппет – жирный плюс в карму сайта, ведь посетитель должен получить именно то, что ищет.
</p>
<p><img src='https://i0.wp.com/marketingbuzz.info/wp-content/uploads/2018/05/Snippet_definition.png' align="center" width="100%" loading=lazy></p>
<p>Верите или нет, но даже небольшие изменения могут сыграть важную роль, когда дело доходит до кликов и переходов пользователей.
</p>
<p>Эта статья – <a href="/kak-sdelat-originalnoe-privetstvie-v-gruppe-vk-oformlenie/">подробное руководство</a> по тому, как сделать качественный сниппет для продвижения в Гугле.
</p>
<h2><span>Заголовок сниппета (тайтл)
</span></h2>
<p>Заголовок сниппета – это тег title, который прописывают на страницах сайта, потом он отображается в Гугле.
</p>
<p>С одной стороны, заголовок должен быть привлекателен и полезен для пользователя, с другой – содержать ключевые слова, необходимые для выдачи поисковика. Обычно в начале этого тега вписывают главный ключ, потом дополнительный. Если бренд раскручен – его название добавляют в конце заголовка.
</p>
<p>Оптимальная длина Title – 60 знаков. В среднем это 10 слов, в которых нужно кратко и емко представить информацию о странице.
</p>
<p>Вот пример: сайт bbknives.com продает ножи. Тайтл для категории Армейские ножи выглядит так:
</p>
<p><i><span>Важный момент — релевантность, тайтл должен включать в себя самые ВЧ ключевики и отличаться от заголовка H1 данной страницы.
</span>
</i></p>
<p>Подробнее о правильном составлении заголовка можно посмотреть в этом видео
</p>
<p><span class="youstCMC8oQ"></span></p>
<h2><span>Человекопонятный URL
</span></h2>
<p>Возможно, вы заметили, что выдача часто пропускает части URL-адреса, удаляя их средние разделы, даже если там только одна строка. Рекомендуем использовать короткие, но значимые URL, когда это возможно, чтобы максимально увеличить их влияние на <a href="/apdeity-yandeksa-apdeity-yandeksa-kakie-byvayut-kak-otslezhivat/">поисковую выдачу</a> Google.
</p>
<p><img src='https://i1.wp.com/marketingbuzz.info/wp-content/uploads/2018/05/Snippet_sewing_eq.png' align="center" width="100%" loading=lazy></p>
<p>URL-адреса часто отображаются как интерактивные ссылки. В этих случаях Google пытается передать внутреннюю <a href="/prosmotret-ierarhicheskuyu-strukturu-diska-s-programmirovanie-i-komp-ry-failovaya-struktura-diska-p/">иерархическую структуру</a> сайта на основе прописанной разработчиками навигации.
</p>
<p><img src='https://i0.wp.com/marketingbuzz.info/wp-content/uploads/2018/05/Mens_shoes.png' align="center" width="100%" loading=lazy></p>
<p>Поисковая выдача может демонстрировать данные времени по их URL-адресу. Это востребовано для новостных агентств и иных информационных веб-порталов, которые стремятся публиковать актуальную информацию.
</p>
<p><img src='https://i2.wp.com/marketingbuzz.info/wp-content/uploads/2018/05/News_Moldova.png' align="center" width="100%" loading=lazy></p>
<p>Чтобы отметки времени автоматически добавлялись к статьям, придется обратиться к программисту или установить <a href="/pishem-svoi-pervyi-plagin-na-jquery-sozdanie-specialnogo-plagina-jquery/">специальный плагин</a>, зависимо от того, на какой платформе сделан сайт.
</p>
<h2><span>Кэшированная ссылка
</span></h2>
<p>Кэшированная ссылка полезна для случаев, когда сайт не работает. Это моментальный снимок, который Google делает на всех ресурсах и добавляет в свой кэш. Также он является резервном, если страница удалена, временно недоступна или не загружается.
</p>
<p>Не так давно Google внес изменения в местоположение этой ссылки. Теперь она находится рядом с URL (зеленая птичка).
</p>
<p>Что дает запрет на кеширование?
</p>
<p>Он мешает пользователям копировать контент. В обычной ситуации посетители могут брать тексты с кеша, даже если функция копирования заблокирована средствами управления сайта. Запрет решает этот вопрос радикальным образом.
</p>
<p><i><span>Примечание: кэшированные и не принадлежащие <a href="/google-chrome-ne-zapuskaetsya-tormozit-ili-ne-otkryvaet-stranicy/">Google страницы</a>, не влияют на общий рейтинг.
</span>
</i></p>
<h2><span>Фрагмент текста (description)
</span></h2>
<p>Не секрет, что <a href="/chto-hranit-icloud-kratkoe-opisanie-osnovnyh-servisov-icloud-bolshe-chem/">краткие описания</a> страниц в поисковиках оказывают большое влияние на поведение пользователя. Но знаете ли вы, что Гугл не всегда показывает тот текст, который прописан в description.
</p>
<p>Формирование фрагмента, который появляется в результатах поиска, полностью автоматизировано и учитывает как содержимое страницы, так и ссылки на нее из интернета. Его цель – полно и информативно представить и описать результат выдачи и объяснить как текст относится к запросу пользователя. То есть максимально точно ответить на вопрос человека.
</p>
<p>Чем больше релевантной и <a href="/the-tablet-does-not-connect-to-the-internet-3g-ginternet-and-tablets/">полезной информации</a> вы предоставите для Google, тем лучше сниппет и как следствие – выше положение веб-ресурса.
</p>
<p>Вот пример:
</p>
<p>Это фрагмент текста в сниппете интернет-магазина швейного оборудования, жирным система выделяет <a href="/avtomaticheskii-sbor-yandeks-wordstat-kak-bystro-utochnit-chastotnost/">ключевые фразы</a>. Материал вытянут с текста на странице, потому что прописали нерелевантный поисковому запросу дескрипшн. Вот оригинал этого метатега с их сайта:
</p>
<blockquote><p>description» content=»Купить швейную машину в интернет-магазине швейного оборудования по самым доступным ценам.</p>
</blockquote>
<p>Алгоритм поисковика ищет для сниппета тексты наиболее <a href="/pyat-sposobov-opredelit-relevantnost-stranicy-poiskovym-zaprosam/">релевантные запросам</a>. Чаще всего используется метатег description, если его нет или плохо составлен (как на примере выше), то система подбирает информацию по своему вкусу. Подтягивает данные из заголовков H1 этого документа (страницы), из текстов или ссылок на нее в интернете. Подробнее о заголовках и метатегах – в
</span>статье
.
</p>
<p>Длина метатега description в Google – 320 символов (с декабря 2017 года). Если вы заметили, что заголовок обрезается (на примере ниже – троеточие), желательно переписать его, сократить и сделать релевантным <a href="/vidy-poiskovyh-zaprosov-dlinnyi-hvost-nizkochastotnye-srednechastotnye-i/">поисковым запросам</a>, которые используются в тексте.
</p>
<p><img src='https://i1.wp.com/marketingbuzz.info/wp-content/uploads/2018/05/Industr_seweq2.png' align="center" width="100%" loading=lazy></p>
<p><img src='https://i0.wp.com/marketingbuzz.info/wp-content/uploads/2018/05/Leq_pom.png' align="center" width="100%" loading=lazy></p>
<p>Задача заключается в том, чтобы вместить в эти пределы информативный и полезный текст, привлекательный для человека и поисковика. Сниппет должен способствовать продвижению и одновременно с этим продавать ваш товар или услугу.
</p>
<p>Чтобы сделать <a href="/kakoi-antivirus-luchshe-vsego-podhodit-dlya-android-reiting-antivirusov/">хорошее описание</a>, нужно поработать с <a href="/chto-takoe-semanticheskoe-yadro-kak-sostavit-effektivnoe/">семантическим ядром</a> – посмотреть, по каким запросам будет продвигаться эта страница. Главный ключ рекомендуют прописать два раза: первый раз в точном виде, второй – в разбавленном, полезно использовать синонимы. Такой сниппет по мнению <a href="/roboty-poiskovyh-sistem/">поискового робота</a> будет релевантным.
</p>
<p>Если работаете в каком-либо отдельном регионе – вставьте в описания название своего города или области. Это способствует <a href="/relevantnost-sekonom-dengi-na-prodvizhenii-relevantnyi---eto/">эффективному продвижению</a> и увеличению продаж.
</p>
<p>Еще один момент – <a href="/trikolor-tv-kontaktnyi-telefon-kruglosutochnyi-nomer-telefona-goryachei-linii/">контактный телефон</a>. Будет полезен для использовать интернет-магазинов. Такое описание внушает доверие и позволяет связаться с колл-центром, не переходя на сайт.
</p>
<p>Иногда поисковик «своевольничает» и не применяет метатег description в пользу более релевантного куска текста. Фрагмент может взяться из любой части страницы, поэтому важно уделять пристальное внимание контенту, особенно в отношении ключевых слов.
</p>
<p>Как с этим бороться – я уже говорил, перепишите дескрипшн, используя в начале ключи в точном вхождении, а потом синонимы и близкие по смыслу слова. Сделайте его более релевантным, чем текст на странице, ссылки на сайт в каталогах или <a href="/kak-izbavitsya-ot-kontekstnoi-reklamy-v-hrome-kak-ubrat-vsplyvayushchie-okna/">контекстная реклама</a> (тот источник, откуда поисковик тянет сниппет).
</p>
<p><i><span>Важно: description не должен повторять title!
</span>
</i></p>
<p>Поскольку фрагмент основан на
</span><span>поисковых запросах
</span> <span>, необходимо включить популярные и релевантные термины в мета-описание и контент на странице.
</p>
<p>Если текст в сниппете не появляется вообще, скорее всего это связано с тем, что эта функция заблокирована в файле robots.txt. В таких случаях в выдаче отображается сообщение «Описание этого результата недоступно из-за файла robots.txt этого сайта».
</p>
<p><img src='https://i1.wp.com/marketingbuzz.info/wp-content/uploads/2018/05/Twitter.png' align="center" width="100%" loading=lazy></p>
<p>Это случается, если некорректно пытаются закрыть страницу от индексирования. Рекомендуем применять команду «noindex» вместо полного запрета. Таким образом, система сможет сканировать страницу, не добавляя ее в свой индекс. Если же хотите только убрать текст из сниппета, используйте другую команду: <meta name = «googlebot» content = «nosnippet»>.
</p>
<h2><span>Ссылки и микроразметка
</span></h2>
<p>Микроразметка – это дополнительные данные в сниппете, особенно востребована для страниц интернет-магазинов. Она обеспечивает максимум <a href="/exit-to-sell-iphone-iphone-iphone-x-design/">детальной информации</a> о товаре или услуге представленных на веб-ресурсе. Не переходя на сайт, можно узнать важную для потенциального покупателя информацию.
</p>
<p>Микроразметка позволяет включить в выдачу такие данные:
</p>
<ul><li><span>географическое расположение;
</span></li>
<li>телефон и адрес;
</li>
<li><span>время работы организации;
</span></li>
<li><span>описания товаров и услуг;
</span></li>
<li>отзывы;
</li>
<li>статистику.
</li>
</ul><p><img src='https://i2.wp.com/marketingbuzz.info/wp-content/uploads/2018/05/Foxtrot.png' align="center" width="100%" loading=lazy></p>
<p>Важнейшим моментом является то, что не нужно прописывать код отдельно для каждого поисковика. Все ведущие системы понимают стандарт Schema, на котором делают микроразметку.
</p>
<p>Обратите внимание на иллюстрации выше, под главной ссылкой на магазин есть дополнительные, которые ведут прямо на тематические страницы сайта. Это удобно, потому что дает возможность быстро найти то, что нужно. Поисковик позволяет использовать до шести таких ссылок. Веб-сайты с четкой иерархией, продуманной структурой и уникальным брендом, скорее всего, будут иметь такие сниппеты.
</p>
<p><img src='https://i1.wp.com/marketingbuzz.info/wp-content/uploads/2018/05/Rozetka.png' align="center" width="100%" loading=lazy></p>
<p>Есть еще интересные моменты.
</p>
<p>На этом сниппете, кроме дополнительного функционала, расположена отдельная строка поиска. Она создана для удобства пользователей и позволяет искать товары на этом сайте. Существуют несколько способов реализации этой функции, иногда поиск производится при помощи <a href="/ustanovit-na-knopku-zavershit-vyzov-blekberri-pasport/">автоматического вызова</a> команды: поиска по сайту средствами Google.
</p>
<p> <br><img src='https://i0.wp.com/marketingbuzz.info/wp-content/uploads/2018/05/Kettle.png' align="center" width="100%" loading=lazy></p>
<p>Или просто перебрасывает на веб-ресурс, на встроенную систему поиска.
</p>
<h2><span>Новинка от Google — featured snippets (нулевая позиция)
</span></h2>
<p>Нулевая позиция – новинка, интересный и полезный тренд. Позволяет «волшебным образом» попасть в ТОП, минуя утомительные SEO-процедуры. Это блок с ответами, недавнее нововведение, при помощи которого поисковик предоставляет людям наиболее краткие и содержательные ответы на запросы.
</p>
<p>Такие сниппеты расположены на самой верхней, нулевой позиции в ТОПе, то есть над рекламой и органикой. Соответственно они и ранжируются выше.
</p>
<p><i><span>В чем главное преимущество featured snippets? Их сразу видно, поэтому переходов будет намного больше.
</span>
</i></p>
<p><img src='https://i0.wp.com/marketingbuzz.info/wp-content/uploads/2018/05/EDC-knife.png' align="center" width="100%" loading=lazy></p>
<p>Многие компании стремятся, чтобы их сниппет попал сюда по каким-либо запросам. Это превосходный способ выделиться среди конкурентов.
</p>
<p>Нулевая позиция отбирает переходы даже у ТОП 3, не говоря уже про <a href="/obuchenie-ispolzovaniya-programmy-kompas-3d-lt-v12-besplatnye/">нижнюю часть</a> первой страницы. Вместе с тем, если конкурент обошел вас по принципиально важному запросу, то просто необходимо его оттуда вытеснить.
</p>
<p>Блоки ответов сейчас находятся на стадии внедрения. Еще далеко не на все запросы есть соответствующие сниппеты ТОП-0. Иногда качество ответа оставляет желать лучшего, но система работает.
</p>
<h2><span>Как стать лучшим из лучших
</span></h2>
<p>На стадии запуска featured snippets тестировали специалисты большинства крупных SEO-платформ. Вот некоторые обобщенные данные:
</p>
<ul><li><span>featured есть у 41% популярных запросов;
</span></li>
<li><span>чаще всего это блоки текста около 60 слов;
</span></li>
<li><span>чтобы текст попал туда, нужен маркированный список, желательно на 8 позиций;
</span></li>
<li><span>рекомендуется применять иллюстрацию 4:3, тогда поисковику будет удобно подставлять ее в выдачу;
</span></li>
<li><span>очень желательно, чтобы сайт поддерживал https.
</span></li>
</ul><h2><span>Дополнительные замечания
</span></h2>
<p>Чаще всего на нулевую позицию попадают сниппеты из ТОП-10. Количество ссылок не оказывает прямого влияния. Но и обычным продвижением, и
</span>рекламой
<span>не стоит пренебрегать.
</p>
<p>Сейчас еще не выработан <a href="/skorost-skachivaniya-stim-kak-uvelichit-skorost-zagruzki-v-steam-samyi/">верный способ</a> попасть в него, но есть общие рекомендации:
</p>
<ul><li><span>тестировать успешные сниппеты и стараться сделать лучше;
</span></li>
<li><span>экспериментировать, писать тексты формата вопрос-ответ;
</span></li>
<li><span>применять таблицы, графики и картинки;
</span></li>
<li><span>не забыть про заголовки H1-H3.
</span></li>
</ul><p>Ну и в завершение еще один фактор – используйте низкочастотные ключевики с «длинными хвостами». Точные и полные ответы на вопросы увеличивают вероятность пройти на нулевую позицию. А если хотите больше узнать о них – есть хорошее видео:
</p>
<p><span class="8XoBcrF0DIo"></span></p>
<h2>Заключение
</h2>
<p>Даже небольшие изменения в результатах поиска могут оказать большое влияние на трафик сайта. Google – постоянно развивающаяся система, поэтому следите за новинками, экспериментируйте и все получится.
</p>
<p>Подведем итог.
</p>
<p>Чтобы сделать эффективный сниппет, нужно:
</p>
<ol><li><span>Посмотреть ключевые слова и прописать релевантный метатег title..
</span></li>
<li><span>Первое предложение description желательно начать с главного ключа в точном вхождении; во втором и третьем использовать синонимы и близкие слова, (размер – до 320 знаков).
</span></li>
<li><span>По необходимости включать географические данные, телефон, дополнительные ссылки и микроразметку schema.
</span></li>
<li><span>Если хотите, чтобы сниппет попал в ТОП-0, напишите небольшую статью, которая будет полностью раскрывать какую-либо тему, используйте <a href="/spiski-v-html---markirovannyi-spisok---numerovannyi-spisok--/">маркированные списки</a>, таблицы, иллюстрации 4:3 и графики; представьте, что создаете текст для энциклопедии.
</span></li>
</ol><p>Экспериментируйте с текстами и метатегами и добьетесь успеха.
</p>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
<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>
<footer>
<div class="td-post-source-tags">
</div>
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://rokwell.ru/chto-takoe-snippet-yandeks-i-gugl-rasshirennye-snippety/" content="https://rokwell.ru/chto-takoe-snippet-yandeks-i-gugl-rasshirennye-snippety/" /><span style="display: none;"><span style="display: none;"><meta itemprop="url" content="/assets/logo.svg"></span>
<meta itemprop="name" content="Что такое сниппет яндекс и гугл, расширенные сниппеты поисковых систем. Как создать красивые сниппеты для Google">
</span>
<meta itemprop="headline " content="Сбербанк Копилка онлайн"><span style="display: none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://i0.wp.com/alzari.ru/wp-content/uploads/2017/02/snippet-ehto-chto-takoe.png">
<meta itemprop="width" content="366"><meta itemprop="height" content="262"></span> </footer>
</article>
<style>
.ads-border {
overflow: hidden;
}
.ads-content {
width: 930px;
display: block;
}
@media(max-width: 1140px) {
.ads-content {
width: 910px;
}
}
@media(max-width: 1018px) {
.ads-content {
width: 970px;
}
}
@media (max-width: 767px) {
.ads-content {
width: 134%;
}
}
@media (max-width: 479px) {
.ads-content {
width: 100%;
height: 490px;
}
}
</style>
<div class="ads-block">
<h4 class="td-related-title"><span class="td-related-left td-cur-simple-item">СХОЖИЕ СТАТЬИ</span></h4>
<div class="ads-border">
<div class="ads-content">
<div id="fofuny1" style="height:90px;width:690px;" align="center"></div>
</div>
</div>
</div>
<style>
#mc-container {
padding: 10px;
}
</style>
<dblock></dblock>
</div>
</div>
<div class="td-pb-span4 td-main-sidebar" role="complementary">
<div class="td-ss-main-sidebar">
<aside class="widget widget_text" id="text-23">
<div class="block-title"><span>Полезное</span></div>
<div class="textwidget" align="center"><div id="fofuny2" style="height:200px;width:300px;" align="center"></div></div>
</aside>
<aside class="widget widget_text" id="text-24">
<div class="block-title"><span>Реклама</span></div>
<div class="textwidget" align="center"><div id="fofuny3" style="height:200px;width:300px;" align="center"></div></div>
</aside>
<aside class="widget widget_text" id="text-25">
<div class="textwidget">
<p style="text-align: center;">
</p>
</div>
</aside>
<aside class="widget rpwe_widget recent-posts-extended" id="rpwe_widget-4">
<div class="block-title"><span>Новое</span></div>
<dblock></dblock>
<div class="rpwe-block ">
<ul class="rpwe-ul">
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/vylil-kofe-na-noutbuk-vosstanovlenie-zalitoi-klaviatury/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/smart-service.ru/_data/article/66/full/8172_zalit_noutbuk.jpg" alt="Восстановление залитой клавиатуры ноутбука" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/vylil-kofe-na-noutbuk-vosstanovlenie-zalitoi-klaviatury/" title="Восстановление залитой клавиатуры ноутбука" rel="bookmark">Восстановление залитой клавиатуры ноутбука</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/nastroiki-bios-detalnaya-instrukciya-v-kartinkah-bazovyi-kod-chto-takoe/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/alexzsoft.ru/wp-content/uploads/2017/04/Parametry.png" alt="Базовый код: что такое BIOS Не заходит в биос на windows 10" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/nastroiki-bios-detalnaya-instrukciya-v-kartinkah-bazovyi-kod-chto-takoe/" title="Базовый код: что такое BIOS Не заходит в биос на windows 10" rel="bookmark">Базовый код: что такое BIOS Не заходит в биос на windows 10</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/oshibka-application-error--chto-delat-oshibka-application-load-error-p-0000065432-chto-delat-proverit/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/tvoykomputer.ru/wp-content/uploads/2017/06/application-load-error-5-0000065434.jpg" alt="Ошибка Application Load Error P:0000065432 – что делать Проверить обновление системы" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/oshibka-application-error--chto-delat-oshibka-application-load-error-p-0000065432-chto-delat-proverit/" title="Ошибка Application Load Error P:0000065432 – что делать Проверить обновление системы" rel="bookmark">Ошибка Application Load Error P:0000065432 – что делать Проверить обновление системы</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/bambukovyi-ostrov-hon-che-luchshie-pyati-i-chetyr-hzv-zdochnye-oteli-nyachanga-s/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/nhatranginfo.ru/wp-content/uploads/IMG_5822-768x512.jpg" alt="Лучшие пяти и четырёхзвёздочные отели Нячанга с частными пляжами Наши отзывы о Винперле в Нячанге" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/bambukovyi-ostrov-hon-che-luchshie-pyati-i-chetyr-hzv-zdochnye-oteli-nyachanga-s/" title="Лучшие пяти и четырёхзвёздочные отели Нячанга с частными пляжами Наши отзывы о Винперле в Нячанге" rel="bookmark">Лучшие пяти и четырёхзвёздочные отели Нячанга с частными пляжами Наши отзывы о Винперле в Нячанге</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/sozdanie-pdf-dokumentov-zpolnyaemyh-pdf-form-s-pdf-maker-pilot-sozdanie-i/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/file-maker.ru/wp-content/uploads/2014/09/uvelichenie-2-1024x747.jpg" alt="Создание и изменение полей формы Как сделать в пдф редактируемые поля" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/sozdanie-pdf-dokumentov-zpolnyaemyh-pdf-form-s-pdf-maker-pilot-sozdanie-i/" title="Создание и изменение полей формы Как сделать в пдф редактируемые поля" rel="bookmark">Создание и изменение полей формы Как сделать в пдф редактируемые поля</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/funkcionalnye-zip--i-rar-arhivatory-dlya-android-vybiraem-horoshii/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/grand-screen.com/blog/wp-content/uploads/2015/08/112.jpg" alt="Выбираем хороший распаковщик файлов" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/funkcionalnye-zip--i-rar-arhivatory-dlya-android-vybiraem-horoshii/" title="Выбираем хороший распаковщик файлов" rel="bookmark">Выбираем хороший распаковщик файлов</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/tatenergosbyt-lichnyi-kabinet-fizicheskogo-lica-lichnyi-kabinet-tatenergosbyt/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/energozhkhsbyt.ru/wp-content/uploads/2018/07/tatenergosbyt-peredat-pokazaniaya.png" alt="Личный кабинет «Татэнергосбыт" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/tatenergosbyt-lichnyi-kabinet-fizicheskogo-lica-lichnyi-kabinet-tatenergosbyt/" title="Личный кабинет «Татэнергосбыт" rel="bookmark">Личный кабинет «Татэнергосбыт</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/referat-ponyatie-i-naznachenie-informacionnoi-sistemy-struktura-i/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/konspekta.net/lektsiiorgimg/baza17/2120344678018.files/image004.gif" alt="Структура и состав информационной системы Задачи и функции ИС" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/referat-ponyatie-i-naznachenie-informacionnoi-sistemy-struktura-i/" title="Структура и состав информационной системы Задачи и функции ИС" rel="bookmark">Структура и состав информационной системы Задачи и функции ИС</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/proverka-vhozhdeniya-podstroki-v-stroku-php-funkcii-raboty-so/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/fb.ru/misc/i/gallery/39768/2303817.jpg" alt="Функции работы со строками в PHP" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/proverka-vhozhdeniya-podstroki-v-stroku-php-funkcii-raboty-so/" title="Функции работы со строками в PHP" rel="bookmark">Функции работы со строками в PHP</a>
</li>
</ul>
</div>
</aside>
</div>
</div>
</div>
</div>
</div>
<div class="td-footer-wrapper td-footer-template-3">
<div class="td-container">
<div class="td-pb-row">
<div class="td-pb-span12">
</div>
</div>
<div class="td-pb-row">
<div class="td-pb-span3 logo-footer">
<div class="td-footer-info">
<div class="footer-logo-wrap"><a href="/"><img class="td-retina-data" src="/logo/logo.png" data-retina="/logo/logo.png" alt="Сайт о компьютерной технике" title="Сайт о компьютерной технике" / loading=lazy></a></div>
<div class="footer-text-wrap"></div>
<div class="footer-social-wrap td-social-style-2"></div>
</div>
<aside class="widget widget_text" id="text-16">
<div class="textwidget">
<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>
<span class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter"></span></div>
</aside>
</div>
<div class="td-pb-span9 footer-discription">
<aside class="widget widget_text" id="text-5">
<div class="textwidget">
<p>
<font size="2" color="grey">
</font>
</p>
© Сайт о компьютерной технике, 2024</div>
</aside>
</div>
</div>
</div>
</div>
<div class="td-sub-footer-container">
<div class="td-container">
<div class="td-pb-row">
<div class="td-pb-span12 td-sub-footer-menu">
<div class="td-sub-footer-main">
<div class="menu-foot-container"><ul id="menu-foot" class="td-subfooter-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu"><a href="/feedback/">Обратная связь</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="/sitemap.xml">Карта сайта</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="">О сайте</a></li>
</ul></div> </div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("span.ancored").replaceWith(function () {
$this = jQuery(this);
href = $this.attr("title");
text = $this.html();
return '<a href="' + href + '">' + text + '</a>';
} )
} )
</script>
<link rel='stylesheet' id='font-awesome-css' href='//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css?ver=4.4.0' type='text/css' media='all' />
<link rel='stylesheet' id='su-content-shortcodes-css' href='/assets/content-shortcodes.css' type='text/css' media='all' />
<link rel='stylesheet' id='su-box-shortcodes-css' href='/assets/box-shortcodes.css' type='text/css' media='all' />
<script type='text/javascript' src='/assets/jquery.form.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = { "recaptcha":{ "messages":{ "empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."} },"cached":"1"} ;
/* ]]> */
</script>
<script type='text/javascript' src='/assets/scripts.js'></script>
<script type='text/javascript' src='/assets/front.min.js'></script>
<script type='text/javascript' src='/assets/imagesloaded.min.js'></script>
<script type='text/javascript' src='/assets/masonry.min.js'></script>
<script type='text/javascript' src='/assets/jquery.masonry.min.js'></script>
<script type='text/javascript' src='/assets/rsvp.js'></script>
<script type='text/javascript' src='/assets/tagdiv_theme.js'></script>
<script type='text/javascript' src='/assets/comment-reply.min.js'></script>
<script type='text/javascript'>
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = { "sidebar" : "td-default", "margin_top" : 25, "margin_bottom" : 320, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-13'] } ;
</script>
<script type='text/javascript' src='/assets/q2w3-fixed-widget.min.js'></script>
<script type='text/javascript' src='/assets/wp-embed.min.js'></script>
<style type='text/css'>
/*** Shortcodes Ultimate - box elements ***/
/* Common styles
---------------------------------------------------------------*/
.su-clearfix:before,
.su-clearfix:after {
display: table;
content: " ";
}
.su-clearfix:after { clear: both; }
/* Tabs + Tab
---------------------------------------------------------------*/
.su-tabs {
margin: 0 0 1.5em 0;
padding: 3px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #eee;
}
.su-tabs-nav span {
display: inline-block;
margin-right: 3px;
padding: 10px 15px;
font-size: 13px;
min-height: 40px;
line-height: 20px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
border-top-right-radius: 3px;
color: #333;
cursor: pointer;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
.su-tabs-nav span:hover { background: #f5f5f5; }
.su-tabs-nav span.su-tabs-current { background: #fff; cursor: default; }
.su-tabs-nav span.su-tabs-disabled {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default;
}
.su-tabs-pane {
padding: 15px;
font-size: 13px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
background: #fff;
color: #333;
}
.su-tabs-vertical:before,
.su-tabs-vertical:after {
content: " ";
display: table;
}
.su-tabs-vertical:after { clear: both; }
.su-tabs-vertical .su-tabs-nav {
float: left;
width: 30%;
}
.su-tabs-vertical .su-tabs-nav span {
display: block;
margin-right: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
}
.su-tabs-vertical .su-tabs-panes {
float: left;
width: 70%;
}
.su-tabs-vertical .su-tabs-pane {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.su-tabs-nav,
.su-tabs-nav span,
.su-tabs-panes,
.su-tabs-pane {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
/* Styles for screens that are less than 768px */
@media only screen and (max-width: 768px) {
.su-tabs-nav span { display: block; }
.su-tabs-vertical .su-tabs-nav {
float: none;
width: auto;
}
.su-tabs-vertical .su-tabs-panes {
float: none;
width: auto;
}
}
/* Spoiler + Accordion
---------------------------------------------------------------*/
.su-spoiler { margin-bottom: 1.5em; }
.su-spoiler .su-spoiler:last-child { margin-bottom: 0; }
.su-accordion { margin-bottom: 1.5em; }
.su-accordion .su-spoiler { margin-bottom: 0.5em; }
.su-spoiler-title {
position: relative;
cursor: pointer;
min-height: 20px;
line-height: 20px;
padding: 7px 7px 7px 34px;
font-weight: bold;
font-size: 13px;
}
.su-spoiler-icon {
position: absolute;
left: 7px;
top: 7px;
display: block;
width: 20px;
height: 20px;
line-height: 21px;
text-align: center;
font-size: 14px;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
.su-spoiler-content {
padding: 14px;
-webkit-transition: padding-top .2s;
-moz-transition: padding-top .2s;
-o-transition: padding-top .2s;
transition: padding-top .2s;
-ie-transition: padding-top .2s;
}
.su-spoiler.su-spoiler-closed > .su-spoiler-content {
height: 0;
margin: 0;
padding: 0;
overflow: hidden;
border: none;
opacity: 0;
}
.su-spoiler-icon-plus .su-spoiler-icon:before { content: "\f068"; }
.su-spoiler-icon-plus.su-spoiler-closed .su-spoiler-icon:before { content: "\f067"; }
.su-spoiler-icon-plus-circle .su-spoiler-icon:before { content: "\f056"; }
.su-spoiler-icon-plus-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f055"; }
.su-spoiler-icon-plus-square-1 .su-spoiler-icon:before { content: "\f146"; }
.su-spoiler-icon-plus-square-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0fe"; }
.su-spoiler-icon-plus-square-2 .su-spoiler-icon:before { content: "\f117"; }
.su-spoiler-icon-plus-square-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f116"; }
.su-spoiler-icon-arrow .su-spoiler-icon:before { content: "\f063"; }
.su-spoiler-icon-arrow.su-spoiler-closed .su-spoiler-icon:before { content: "\f061"; }
.su-spoiler-icon-arrow-circle-1 .su-spoiler-icon:before { content: "\f0ab"; }
.su-spoiler-icon-arrow-circle-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0a9"; }
.su-spoiler-icon-arrow-circle-2 .su-spoiler-icon:before { content: "\f01a"; }
.su-spoiler-icon-arrow-circle-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f18e"; }
.su-spoiler-icon-chevron .su-spoiler-icon:before { content: "\f078"; }
.su-spoiler-icon-chevron.su-spoiler-closed .su-spoiler-icon:before { content: "\f054"; }
.su-spoiler-icon-chevron-circle .su-spoiler-icon:before { content: "\f13a"; }
.su-spoiler-icon-chevron-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f138"; }
.su-spoiler-icon-caret .su-spoiler-icon:before { content: "\f0d7"; }
.su-spoiler-icon-caret.su-spoiler-closed .su-spoiler-icon:before { content: "\f0da"; }
.su-spoiler-icon-caret-square .su-spoiler-icon:before { content: "\f150"; }
.su-spoiler-icon-caret-square.su-spoiler-closed .su-spoiler-icon:before { content: "\f152"; }
.su-spoiler-icon-folder-1 .su-spoiler-icon:before { content: "\f07c"; }
.su-spoiler-icon-folder-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f07b"; }
.su-spoiler-icon-folder-2 .su-spoiler-icon:before { content: "\f115"; }
.su-spoiler-icon-folder-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f114"; }
.su-spoiler-style-default { }
.su-spoiler-style-default > .su-spoiler-title {
padding-left: 27px;
padding-right: 0;
}
.su-spoiler-style-default > .su-spoiler-title > .su-spoiler-icon { left: 0; }
.su-spoiler-style-default > .su-spoiler-content { padding: 1em 0 1em 27px; }
.su-spoiler-style-fancy {
border: 1px solid #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
color: #333;
}
.su-spoiler-style-fancy > .su-spoiler-title {
border-bottom: 1px solid #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #f0f0f0;
font-size: 0.9em;
}
.su-spoiler-style-fancy.su-spoiler-closed > .su-spoiler-title { border: none; }
.su-spoiler-style-fancy > .su-spoiler-content {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.su-spoiler-style-simple {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.su-spoiler-style-simple > .su-spoiler-title {
padding: 5px 10px;
background: #f0f0f0;
color: #333;
font-size: 0.9em;
}
.su-spoiler-style-simple > .su-spoiler-title > .su-spoiler-icon { display: none; }
.su-spoiler-style-simple > .su-spoiler-content {
padding: 1em 10px;
background: #fff;
color: #333;
}
/* Quote
---------------------------------------------------------------*/
.su-quote-style-default {
position: relative;
margin-bottom: 1.5em;
padding: 0.5em 3em;
font-style: italic;
}
/*.su-quote-style-default.su-quote-has-cite { margin-bottom: 3em; } */
.su-quote-style-default:before,
.su-quote-style-default:after {
position: absolute;
display: block;
width: 20px;
height: 20px;
background-image: url('../images/quote.png');
content: '';
}
.su-quote-style-default:before {
top: 0;
left: 0;
background-position: 0 0;
}
.su-quote-style-default:after {
right: 0;
bottom: 0;
background-position: -20px 0;
}
.su-quote-style-default .su-quote-cite {
display: block;
text-align: right;
font-style: normal;
}
.su-quote-style-default .su-quote-cite:before { content: "\2014\0000a0"; }
.su-quote-style-default .su-quote-cite a { text-decoration: underline; }
/* Pullquote
---------------------------------------------------------------*/
.su-pullquote {
display: block;
width: 30%;
padding: 0.5em 1em;
}
.su-pullquote-align-left {
margin: 0.5em 1.5em 1em 0;
padding-left: 0;
float: left;
border-right: 5px solid #eee;
}
.su-pullquote-align-right {
margin: 0.5em 0 1em 1.5em;
padding-right: 0;
float: right;
border-left: 5px solid #eee;
}
/* Row + Column
---------------------------------------------------------------*/
.su-row {
clear: both;
zoom: 1;
margin-bottom: 1.5em;
}
.su-row:before,
.su-row:after {
display: table;
content: "";
}
.su-row:after { clear: both; }
.su-column {
display: block;
margin: 0 4% 0 0;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.su-column-last { margin-right: 0; }
.su-row .su-column { margin: 0 0 0 4%; }
.su-row .su-column.su-column-size-1-1 { margin-left: 0; margin-right: 0; }
.su-row .su-column:first-child { margin-left: 0; }
.su-column-centered {
margin-right: auto !important;
margin-left: auto !important;
float: none !important;
}
.su-column img,
.su-column iframe,
.su-column object,
.su-column embed { max-width: 100%; }
@media only screen {
[class*="su-column"] + [class*="su-column"]:last-child { float: right; }
}
.su-column-size-1-1 { width: 100%; }
.su-column-size-1-2 { width: 48%; }
.su-column-size-1-3 { width: 30.66%; }
.su-column-size-2-3 { width: 65.33%; }
.su-column-size-1-4 { width: 22%; }
.su-column-size-3-4 { width: 74%; }
.su-column-size-1-5 { width: 16.8%; }
.su-column-size-2-5 { width: 37.6%; }
.su-column-size-3-5 { width: 58.4%; }
.su-column-size-4-5 { width: 79.2%; }
.su-column-size-1-6 { width: 13.33%; }
.su-column-size-5-6 { width: 82.66%; }
/* Styles for screens that are less than 768px */
@media only screen and (max-width: 768px) {
.su-column {
width: 100% !important;
margin: 0 0 1.5em 0 !important;
float: none !important;
}
.su-row .su-column:last-child {
margin-bottom: 0 !important;
}
}
/* Service
---------------------------------------------------------------*/
.su-service {
position: relative;
margin: 0 0 1.5em 0;
}
.su-service-title {
display: block;
margin-bottom: 0.5em;
color: #333;
font-weight: bold;
font-size: 1.1em;
}
.su-service-title img {
position: absolute;
top: 0;
left: 0;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.su-service-title i {
position: absolute;
top: 0;
left: 0;
display: block !important;
width: 1em;
height: 1em;
text-align: center;
line-height: 1em;
}
.su-service-content { line-height: 1.4; }
/* Box
---------------------------------------------------------------*/
.su-box {
margin: 0 0 1.5em 0;
border-width: 2px;
border-style: solid;
}
.su-box-title {
display: block;
padding: 0.5em 1em;
font-weight: bold;
font-size: 1.1em;
}
.su-box-content {
background-color: #fff;
color: #444;
padding: 1em;
}
.su-box-style-soft .su-box-title {
background-image: url('../images/styles/style-soft.png');
background-position: 0 0;
background-repeat: repeat-x;
}
.su-box-style-glass .su-box-title {
background-image: url('../images/styles/style-glass.png');
background-position: 0 50%;
background-repeat: repeat-x;
}
.su-box-style-bubbles .su-box-title {
background-image: url('../images/styles/style-bubbles.png');
background-position: 0 50%;
background-repeat: repeat-x;
}
.su-box-style-noise .su-box-title {
background-image: url('../images/styles/style-noise.png');
background-position: 0 0;
background-repeat: repeat-x;
}
/* Note
---------------------------------------------------------------*/
.su-note {
margin: 0 0 1.5em 0;
border-width: 0px;
border-style: solid;
}
.su-note-inner {
padding: 1em;
border-width: 0px;
border-style: solid;
box-shadow: 3px 3px 6px #d0d0d0;
}
/* Expand
---------------------------------------------------------------*/
.su-expand { margin: 0 0 1.5em 0; }
.su-expand-content { overflow: hidden; }
.su-expand-link {
margin-top: 0.5em;
cursor: pointer;
}
.su-expand-link:hover {
opacity: 0.7;
filter: alpha(opacity=70);
}
.su-expand-link a,
.su-expand-link a:hover,
.su-expand-link a:active,
.su-expand-link a:visited,
.su-expand-link a:focus {
display: inline;
text-decoration: none;
background: transparent;
border: none;
}
.su-expand-link-style-default .su-expand-link a,
.su-expand-link-style-default .su-expand-link a:hover { text-decoration: none; }
.su-expand-link-style-underlined .su-expand-link span { text-decoration: underline; }
.su-expand-link-style-dotted .su-expand-link span { border-bottom: 1px dotted #333; }
.su-expand-link-style-dashed .su-expand-link span { border-bottom: 1px dashed #333; }
.su-expand-link-style-button .su-expand-link a {
display: inline-block;
margin-top: 0.2em;
padding: 0.2em 0.4em;
border: 2px solid #333;
}
.su-expand-link-more { display: none; }
.su-expand-link-less { display: block; }
.su-expand-collapsed .su-expand-link-more { display: block; }
.su-expand-collapsed .su-expand-link-less { display: none; }
.su-expand-link i {
display: inline-block;
margin: 0 0.3em 0 0;
vertical-align: middle;
color: inherit;
}
.su-expand-link img {
display: inline-block;
width: 1em;
height: 1em;
margin: 0 0.3em 0 0;
vertical-align: middle;
}
/* Lightbox content
---------------------------------------------------------------*/
.su-lightbox-content {
position: relative;
margin: 0 auto;
}
.mfp-content .su-lightbox-content,
#su-generator .su-lightbox-content { display: block !important; }
.su-lightbox-content-preview {
width: 100%;
min-height: 300px;
background: #444;
overflow: hidden;
}
.su-lightbox-content h1,
.su-lightbox-content h2,
.su-lightbox-content h3,
.su-lightbox-content h4,
.su-lightbox-content h5,
.su-lightbox-content h6 { color: inherit; }
/* Common margin resets for box elements
---------------------------------------------------------------*/
.su-column-inner > *:first-child,
.su-accordion > *:first-child,
.su-spoiler-content > *:first-child,
.su-service-content > *:first-child,
.su-box-content > *:first-child,
.su-note-inner > *:first-child,
.su-expand-content > *:first-child,
.su-lightbox-content > *:first-child { margin-top: 0; }
.su-column-inner > *:last-child,
.su-tabs-pane > *:last-child,
.su-accordion > *:last-child,
.su-spoiler-content > *:last-child,
.su-service-content > *:last-child,
.su-box-content > *:last-child,
.su-note-inner > *:last-child,
.su-expand-content > *:last-child,
.su-lightbox-content > *:last-child { margin-bottom: 0; }
</style>
<script>
(function(){
var html_jquery_obj = jQuery('html');
if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) {
var path = '/assets/style2.css';
jQuery.get(path, function(data) {
var str_split_separator = '#td_css_split_separator';
var arr_splits = data.split(str_split_separator);
var arr_length = arr_splits.length;
if (arr_length > 1) {
var dir_path = '/wp-content/themes/Newspaper';
var splited_css = '';
for (var i = 0; i < arr_length; i++) {
if (i > 0) {
arr_splits[i] = str_split_separator + ' ' + arr_splits[i];
}
//jQuery('head').append('<style>' + arr_splits[i] + '</style>');
var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) {
return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm,'');
} );
splited_css += "<style>" + formated_str + "</style>";
}
var td_theme_css = jQuery('link#td-theme-css');
if (td_theme_css.length) {
td_theme_css.after(splited_css);
}
}
} );
}
} )();
</script>
</body>
</html>
