Содержание

базовые принципы микроразметки и настройка тегов

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

Что такое Open Graph и какая от нее польза

Open Graph – это технология разметки страниц, которая помогает настроить их отображение в социальных сетях при публикации. У хорошего информационного блока (сниппета), который формируется при репосте страницы сайта, есть несколько признаков:

  • заголовок не обрезается;

  • в описании – цепляющий лид или другая важная информация;

  • картинка соответствует требованиям соцсети и тоже не обрезается.

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

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

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

Плюс Open Graph в том, что вы можете настроить отображение превью для разных соцсетей. Размеры картинок, длина заголовка и описания – все это отличается. С Open Graph репосты с сайта будут выглядеть хорошо везде: и на странице VK, и в ленте Twitter.

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Как размечать страницы

Микроразметка Open Graph – это просто набор тегов, которые описывают для разных соцсетей, какой контент взять для репоста и как его отобразить. Из одного тега соцсеть берет заголовок, из другого – картинку для сниппета.

Для разметки страницы нужно в раздел <head> добавить дополнительные теги <meta>. Внутри тегов <meta> указываются атрибуты – property и content. В property прописывается свойство, а в content – сам контент: текст заголовка или описания, ссылка на изображение и другая информация для формирования сниппета. 

Обязательные свойства

У атрибута property есть четыре обязательных свойства. 

  1. og:title – заголовок поста или страницы. Сам текст добавляется в атрибут content.

  2. og:type – тип передаваемого объекта: article, audio, image, video. Полный перечень смотрите в документации.

  3. og:url – канонический URL, который ведет к объекту.

  4. og:image – ссылка на изображение, которое опубликуется при репосте.

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

Дополнительные свойства

Кроме обязательных есть и дополнительные свойства.

  • og:audio – адрес звукового файла указанного объекта.

  • og:video – адрес видеофайла указанного объекта.

  • og:description – описание передаваемого объекта.

  • og:determiner – актуально для постов на английском: можно выбрать артикль перед названием объекта в предложении. Тип enum (a, an, the, «», auto), по умолчанию выбрано «» (нет артикля). 

  • og:locale – свойство для указания локации. Формат language_TERRITORY. По умолчанию: en_US.

  • og:locale:alternate – свойство для добавления альтернативных локалей.

  • og:site_name – название сайта, которое будет отображаться на всех страницах. Отличное решение для популярных проектов, например Кинопоиска или Timeweb.

Из опциональных свойств часто используют og:description и og:site_name. Первое свойство позволяет добавить краткое описание, которое состоит из одного или нескольких предложений. ВКонтакте и на Facebook количество символов в описании сильно ограничено, зато в Telegram сниппет выглядит информативно.

С помощью og:site_name вы можете добавить в сниппет название сайта и несколько слов для описания его предназначения. Но это свойство обрабатывают не все соцсети. Например, на Facebook отобразится только URL сайта. А вот в Telegram в превью ссылки подтягивается все, что вы укажете внутри свойства og:site_name.

У свойств og:image, og:video и og:audio есть дополнительные метаданные, которые вы можете указать. Изучим их на примере og:image:

  • og:image:secure_url – альтернативный адрес, который используется на страницах с HTTPS.

  • og:image:type – например jpeg или png.

  • og:image:width – ширина изображения в пикселях.

  • og:image:height – высота изображения в пикселях.

У свойства og:video доступны такие же дополнительные метаданные: secure_url, type, width и height.

А вот у og:audio дополнительных данных width и height нет, что логично – у звукового объекта не может быть длины и ширины, в отличие от изображения и видео.

Ссылки на дополнительные материалы

Больше подробностей про разные свойства атрибута property – в документации протокола Open Graph. Она очень емкая и практичная, так что изучение не займет много времени.

Документация на русском языке

Документация на английском языке

Также можно посмотреть информацию об использовании Open Graph в справке Яндекс.Вебмастера. Там много сведений из официальной документации протокола, но есть и другие полезные примеры – например, использование OG для разметки видео. Это помогает улучшить индексацию роликов по запросам пользователей поисковой системы Яндекса.

Есть также специальные руководства по настройке разметки Open Graph для отдельных социальных сетей:

  • VK 

  • Facebook

  • Twitter

  • Pinterest

Примеры разметки для разного контента

Это пример минимальной разметки – в ней только базовые свойства:

<html prefix="og: //ogp.
 
 me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="//www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="//ia.media-imdb.com/images/rock.jpg" />
</head>
</html>

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

<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>

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

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

  • vk:image

  • fb:image

  • twitter:image

Например, пользователь делает репост в Twitter. Соцсеть будет учитывать только контент, указанный в свойстве twitter:image. Остальные картинки Twitter проигнорирует.

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

<html prefix="og: http://ogp.me/ns# 
              video: http://ogp.me/ns/video#">
<head>
  <meta property="og:title" content="Разметка для названия видео, до 1000 символов"/> 
  <meta property="og:url" content="https://адрес_страницы_с_видео"/> 
  <meta property="og:video" content="https://путь_к_проигрывателю_или_видеофайлу/"/> 
  <meta property="og:description" content="Описание видео от 150 до 1000 сиволов"/> 
  <meta property="video:duration" content="Продолжительность видео в секундах"/>
  <meta property="og:image" content="http://картинка_для_заставки_видео.
 
 png"/>
  <meta property="ya:ovs:upload_date" content="Дата добавления видео"/>
  <meta property="ya:ovs:adult" content="True, если это контент для взрослых, и False, если нет"/>
  <meta property="og:type" content="Категория видео"/>
  <meta property="og:video:type" content="Доступные кодеки для данного формата видео"/>
</head>

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

<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />

Как внедрить Open Graph на сайте

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

  1. В самом начале страницы располагается префикс <html prefix=»og: http://ogp.me/ns#»>, который указывает на использование протокола Open Graph.

  2. Затем в <head> прописываются метатеги с нужными атрибутами и свойствами.

Чтобы сэкономить время, можно не прописывать все метатеги вручную, а использовать генераторы. Например, есть сервис The Ultimate Open Graph Generator. Вам нужно выбрать тип объекта, а затем добавить основные данные: заголовок, URL, изображение. В ответ вы получите код, который необходимо вставить на страницу сайта.

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

  • WordPress

  • Joomla

  • Битрикс

  • Opencart

  • Drupal

  • Magento

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

Если хотите посмотреть, как конкуренты делают разметку, используйте парсер. Он проверит страницу по указанной вами ссылке и выдаст все используемые на ней атрибуты и свойства Open Graph.

Чтобы проверить корректность разметки, используйте валидаторы. Ссылки на некоторые инструменты есть в документации Open Graph.  Можно также использовать валидатор в Яндекс.Вебмастере или сервис Open Graph Check. Они проверяют страницы по указанным адресам и показывают, есть ли ошибки в разметке.

что это и как добавить

Для продвижения сайта в социальных сетях существует специальная разметка Open Graph, которая отвечает за репосты страниц сайта. В этой инструкции мы разберём что это такое, зачем она нужна и как её добавить на сайт.

Содержание:

  • Что такое Open Graph
  • Зачем нужен Open Graph
  • Синтаксис разметки
  • Теги Open Graph
  • Пример разметки Open Graph
  • Как добавить разметку Open Graph на сайт
    • Вручную
    • Плагины для CMS
    • Генератор мета-тегов
  • Как проверить разметку Open Graph
  • Заключение

Что такое Open Graph

Open Graph — это микроразметка, которая изменяет вид репоста с сайта в соцсети и мессенджеры — к нему прикрепляются изображение и текстовый сниппет.  На данный момент Open Graph используют Facebook, Вконтакте, Яндекс, Telegram, Twitter и другие.

Пример разметки главной страницы

Зачем нужен Open Graph

  1. Пользователь увидит релевантный текст и нужное изображение, которое настроит вебмастер.
  2. Сниппет публикации будет выглядеть как полноценный пост, который можно разместить в социальных сетях не добавляя дополнительно картинку и текст.
  3. Превью страницы выглядит привлекательнее и увеличивает кликабельность (CTR) сниппета, вследствие чего и растёт посещаемость сайта.

Синтаксис разметки

Официальная документация по микроразметке доступна в русской и английской версии. Также можно прочитать краткое руководство в Яндекс.Справке.

Кроме того, есть отдельные документы для соц. сетей:

  1. Facebook
  2. Twitter
  3. Pinterest

Теги Open Graph

Разметка Open Graph передаётся с помощью мета-тегов, указанных в HTML-коде страницы между тегами <head> и </head>.

  • og:title – заголовок публикации.
  • og:description – краткое описание публикации для анонса.
  • og:type – тип страницы (статья, видео, товар и другие).
  • og:image – ссылка на изображение в анонсе.
  • og:url – адрес страницы, на которую будут переходить пользователи, кликнув на репост.

Полный список тегов доступен на сайте Open Graph.

Пример разметки Open Graph

<meta property=»og:type» content=»article»>

<meta property=»og:site_name» content=»SEO чеклист – пошаговый план по продвижению сайта»>

<meta property=»og:title» content=»Микроразметка Open Graph»>

<meta property=»og:description» content=»Разметка Open Graph для социальных сетей и мессенджеров: что это такое и как добавить на сайт?»>

<meta property=»og:url» content=»https://seochecklist.pro/tasks/nalichie-open-graph»>

<meta property=»og:locale» content=»ru_RU»>

<meta property=»og:image» content=»https://seochecklist. pro/images/logo.svg»>

<meta property=»og:image:width» content=»591″>

<meta property=»og:image:height» content=»166″>

Как добавить разметку Open Graph на сайт

Внедрить Open Graph можно с помощью специальных плагинов для CMS, генератора мета-тегов или вручную.

Вручную

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

<html prefix=»og: http://ogp.me/ns#»>

Далее необходимо добавить мета-теги между тегами <head> и </head>.

Плагины для CMS

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

Плагины Open Graph для WordPress

Плагины для самых популярных CMS:

  • WordPress
  • Битрикс
  • Opencart
  • Joomla
  • Drupal

Внимание! Для сайтов на конструкторе Tilda, оптимизация под социальные сети уже встроена.

Генератор мета-тегов

Составить разметку можно с помощью Генератора мета-тегов Open Graph. Заполните все необходимые поля и вставьте готовый код на сайт.

Как проверить разметку Open Graph

Проверить разметку можно вручную или с помощью специальных сервисов:

  1. Валидатор микроразметки в Яндекс.Вебмастер
  2. Отладчик репостов от Facebook
  3. Card Validator в Twitter

Заключение

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

Как добавить метатеги Facebook Open Graph в темы WordPress

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

Но как убедиться, что используются правильные изображения – изображения , которые вам нужны?

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

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

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

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

Этот язык называется Open Graph.

В этой статье я расскажу о различных способах настройки Open Graph на вашем сайте WordPress.

Мы рассмотрим:

  • Что такое протокол Open Graph?
  • Базовые теги, доступные для WordPress Open Graph
  • Другие теги Open Graph, доступные для описания контента вашего веб-сайта
  • Установка тегов Open Graph вручную
  • Настройка WordPress Open Graph с помощью плагина
  • Важность тегов WordPress OG

Что такое протокол Open Graph?

Протокол Open Graph — это способ объяснить все характеристики объекта, т. е. пост на вашем сайте, чтобы сделать его богаче в разрезе социальных сетей.

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

Например, если вы не укажете заголовок открытого графа для своего поста, социальные сети должны будут угадать его по тегу </code> вашего HTML.</p><p> Поиск заголовка сообщения довольно тривиален, так как люди обычно используют название сообщения в <code><title> </code> поста, но соцсеть все равно угадывает ваш замысел.</p><p> Еще более практичный пример того, как Open Graph полезен для вас, как пользователя WordPress, — это изображение, которое будет отображаться, когда ваша статья публикуется в социальных сетях.</p><p> Если вы не укажете изображение Open Graph, Facebook и другие социальные сети попытаются угадать, какое изображение им следует использовать в качестве предварительного просмотра вашей статьи.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/1.bp.blogspot.com/_cHDk9JlHv4Y/TLR0iFAaPkI/AAAAAAAAAA4/zN5PGw6QPKk/s1600/Money+Market+Graph1.jpg' /><noscript><img loading='lazy' src='/800/600/https/1.bp.blogspot.com/_cHDk9JlHv4Y/TLR0iFAaPkI/AAAAAAAAAA4/zN5PGw6QPKk/s1600/Money+Market+Graph1.jpg' /></noscript></p><p> Вы, вероятно, захотите использовать вступительное изображение своего блога, чтобы поделиться им после того, как вы так усердно работали над его дизайном.</p><p> Однако довольно часто допускаются ошибки при подборе изображения для предварительного просмотра.</p><p> Например, может быть подхвачен логотип вашего сайта или другое изображение в статье, которое не предназначалось для предварительного просмотра статьи.</p><p> Еще хуже было бы, если бы изображение рекламы было выбрано в качестве предварительного просмотра статьи.</p><p> Именно здесь Open Graph может иметь решающее значение.</p><h3><span class="ez-toc-section" id="_WordPress_Open_Graph"> Основные теги, доступные для WordPress Open Graph </span></h3><p> Мы уже видели несколько быстрых примеров тегов Open Graph. Давайте обсудим еще несколько примеров тегов, которые мы можем использовать с нашим WordPress Open Graph.</p><p> Это имя, которое используется для публикации сообщения:</p><pre> og:title </pre><p> Изображение для предварительного просмотра вашего сообщения является важным тегом, обеспечивающим успех ваших кампаний в социальных сетях:</p><pre> og:image </pre><p> This Open Тег Graph будет описывать фактический URL-адрес для посещения при нажатии на ссылку:</p><pre> og:url </pre><p> Описание также хорошо видно, поэтому очень важно настроить его, чтобы побудить людей посетить ваш сайт.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/raw.githubusercontent.com/elliotboyd/obsidian-traffic-lights/master/dark.png' /><noscript><img loading='lazy' src='/800/600/https/raw.githubusercontent.com/elliotboyd/obsidian-traffic-lights/master/dark.png' /></noscript></p><p> Многие люди на самом деле используют содержимое мета-описания здесь, которое много раз также оптимизировалось для повышения рейтинга кликов:</p><pre> og:description </pre><p> Чтобы наглядно объяснить эти теги, вот пример того, как наши теги WordPress Open Graph переводятся при публикации публикации в Facebook:</p> Пример публикации WPMU DEV при публикации в Facebook.<p> Тег типа Open Graph описывает, является ли объект, которым вы делитесь, статьей, видео, музыкой, книгой, профилем пользователя или веб-сайтом.</p><p> Существуют дополнительные теги, которые можно использовать для описания каждого конкретного типа. Вы можете ознакомиться с подробными тегами, которые можно использовать в разделе типов Open Graph.</p><p> <code> og:type </code></p><h3><span class="ez-toc-section" id="_Open_Graph-10"> Другие теги Open Graph, доступные для описания содержимого вашего веб-сайта </span></h3><p> Помимо перечисленных выше основных тегов, существует ряд дополнительных тегов Open Graph, которые можно использовать на вашем веб-сайте WordPress для дальнейшего описания содержимого.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/xkomo.com/wp-content/uploads/2019/02/Review-Rank-Math-SEO-Freemium-Plugin-Titles-dan-Meta-Settings.jpg' /><noscript><img loading='lazy' src='/800/600/https/xkomo.com/wp-content/uploads/2019/02/Review-Rank-Math-SEO-Freemium-Plugin-Titles-dan-Meta-Settings.jpg' /></noscript></p><p> Большинство тегов Open Graph WordPress являются необязательными, однако есть много контента, который будет лучше включен, если эти теги заполнены правильно:</p><p> <code> og:audio </code></p><p> и</p><p> <code> og:video </code></p><p> Если есть какое-либо аудио или видео, которое может дополнить этот контент, этот тег OG можно использовать для описания его URL-адреса:</p><p> <code> og:site_name </code></p><p> частей контента может захотеть использовать этот тег, чтобы обозначить, что контент, которым делятся, является частью более крупного фирменного сайта.</p><h4><span class="ez-toc-section" id="i-13"> Дополнительные теги в определенных тегах ОГ </span></h4><p> Некоторые теги, описанные выше, также могут содержать дополнительные описательные теги.</p><p> В качестве примера возьмем og <code> :image </code>. Между прочим, og <code> : </code> video имеет точно такие же свойства, как og <code> :image </code> .</p><p> Все перечисленное ниже является дополнительными свойствами, которые можно описать с помощью соответствующих тегов Open Graph:</p><ul><li> <code> og:image:url </code> — идентично <code> og:image </code> и может использоваться взаимозаменяемо.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/blog.terminusdb.com/hubfs/Imported_Blog_Media/1*FAK8MU1sYf6yrVpVmNQDzA-1.png' /><noscript><img loading='lazy' src='/800/600/https/blog.terminusdb.com/hubfs/Imported_Blog_Media/1*FAK8MU1sYf6yrVpVmNQDzA-1.png' /></noscript></li><li> <code> og:image:secure_url </code> — это URL-адрес, который следует использовать, если веб-сайт доступен через HTTPS</li><li> <code> og:image:type </code> — этот тег описывает тип MIME этого изображения.</li><li> <code> og:image:width </code> и <code> og:image:height </code> — эти теги описывают размеры изображения</li></ul><p> Ниже приведен полный пример использования тега <code> og:image </code>:</p><pre> <meta property="og:image" content="http://wpmudev.com/blog/image1.jpg" /> <code> < meta property="og:image:secure_url" content="https://wpmudev.com/blog/image1.jpg" /> </code> <code> <meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:width" content="400" /> </code> <code> <meta property="og:image :height" content="300" /> </code> </pre><p> Другие структурированные свойства включают:</p><ul><li> <code> music.song </code></li><li> <code> музыкальный.альбом </code></li><li> <code> музыка.плейлист </code></li><li> <code> музыка.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/slideplayer.com/slide/7406582/24/images/4/Example+Line+Graph+Days.jpg' /><noscript><img loading='lazy' src='/800/600/https/slideplayer.com/slide/7406582/24/images/4/Example+Line+Graph+Days.jpg' /></noscript> радиостанция </code></li><li> <code> видео.фильм </code></li><li> <code> видео.эпизод </code></li><li> <code> видео.tv_show </code></li></ul><p> Все они имеют собственные теги, которые используются для предоставления дополнительных сведений об объекте.</p><p> Но как реализовать теги Open Graph в WordPress?</p><p> Есть несколько возможных способов.</p><h3><span class="ez-toc-section" id="_Open_Graph-11"> Установка тегов Open Graph вручную </span></h3><p> Чуть выше в этой статье я упоминал, что вы сможете извлечь большую часть информации, необходимой для тегов OG, из существующего контента WordPress.</p><p> Внеся некоторые изменения в файл </em> functions.php </em> вашего сайта, вы будете считывать данные из своего контента и выводить их в виде тегов OG.</p><p> Загрузка сути 193ef27b4f318eca74b9926b7c53027e</p><p> Это необходимо для того, чтобы социальные сети, использующие ваш контент, действительно знали, что для описания вашего контента WordPress используются теги Open Graph.</p><p> Ниже приведены конкретные части вашего контента WordPress и построение из них тегов OG:</p><p> Loading gist 327abbaef714a8f1d678eed33d336ca8</p><p> Вам потребуется настроить несколько тегов выше, например, заменить og <code> :site_name </code> на фактическое имя вашего сайта.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/on.notist.cloud/slides/deck5522/large-15.jpg' /><noscript><img loading='lazy' src='/800/600/https/on.notist.cloud/slides/deck5522/large-15.jpg' /></noscript></p><p> Вам также потребуется найти свой идентификатор администратора Facebook и заменить его значением тега контента fb <code> :admins </code>.</p><h3><span class="ez-toc-section" id="_WordPress_Open_Graph-2"> Настройка WordPress Open Graph с помощью плагина </span></h3><p> Чтобы воспользоваться преимуществами использования Open Graph, вам необходимо настроить свой веб-сайт WordPress таким образом, чтобы эта информация по мере необходимости извлекалась из вашего контента и добавлялась к любому контенту WordPress.</p><p> Если ваши основные кампании в социальных сетях будут развернуты через Facebook, одним из вариантов является установка плагина, такого как Open Graph и Twitter Card Tags.</p><p> Этот плагин вставляет теги Facebook Open Graph в ваш блог/веб-сайт WordPress, помогая улучшить результаты обмена на Facebook.</p><p> Open Graph Protocol Framework — еще один отличный вариант. Его очень просто настроить и запустить, и он не требует создания какого-либо приложения Facebook, что является плюсом.</p><p> Вы также не можете пройти мимо нашего собственного SmartCrawl, который поставляется с поддержкой открытого графа.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/www.frontiersin.org/files/Articles/406976/fict-05-00032-HTML-r1/image_m/fict-05-00032-g005.jpg' /><noscript><img loading='lazy' src='/800/600/https/www.frontiersin.org/files/Articles/406976/fict-05-00032-HTML-r1/image_m/fict-05-00032-g005.jpg' /></noscript> Социальная интеграция SC дает вам все инструменты, необходимые для того, чтобы получить признание и в полной мере воспользоваться вирусным контентом.</p><h4><span class="ez-toc-section" id="_Ultimate_Facebook_Open_Graph"> Плагин Ultimate Facebook: не только теги Open Graph </span></h4> Наш плагин Ultimate Facebook предоставляет простой способ добавления тегов Open Graph на ваш сайт WordPress.<p> Большая часть этого поста посвящена социальным сетям.</p><p> Посмотрим правде в глаза, хотя в большинстве случаев Facebook по-прежнему является королем социальных сетей (за ним следует Instagram, но они все равно попадают под один и тот же зонтик).</p><p> Время жизни твита в Твиттере очень короткое, измеряется минутами или даже секундами. И да, у LinkedIn есть свои сильные стороны и группы.</p><p> Но Facebook, несмотря на несколько предсказаний о его безвременной кончине, по-прежнему остается самым загруженным сообществом. Мы говорим о миллиардах активных пользователей. Если у вас есть деньги, потратьте их на Facebook 😉 Вы сделаете себе одолжение.</p><p> Почему я так подлизываюсь к Facebook? К сожалению, я не акционер и не имею никакого отношения к Цукербергу.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/delaemsait.info/wp-content/uploads/2019/01/Open-Graph-Protocol-e1547788745653.png' /><noscript><img loading='lazy' src='/800/600/https/delaemsait.info/wp-content/uploads/2019/01/Open-Graph-Protocol-e1547788745653.png' /></noscript></p><p> Есть очень простая, но очень веская причина.</p><p> Один из способов сделать ваш веб-сайт более успешным — создать заинтересованное сообщество. Тесно интегрируя свой веб-сайт с Facebook, вы увеличиваете популярность социальной сети.</p><p> Вы будете постепенно привлекать сообщество Facebook на свой веб-сайт и поддерживать их связь с вашим брендом через Facebook.</p><p> Делая свой веб-сайт и Facebook практически бесшовными, вы взаимодействуете со своим сообществом на их собственных условиях.</p><p> Итак, как вы собираетесь объединить свой веб-сайт и Facebook?</p><p> Войдите в подключаемый модуль Ultimate Facebook.</p><p> <em> ( <strong> ПРИМЕЧАНИЕ: </strong> Как вы хорошо знаете, мы недавно удалили большинство наших устаревших плагинов. Однако вы все еще можете найти их все на GitHub, и время от времени мы возвращаемся к одному из них, если они помогают решить конкретную проблему.) </em></p><p> Хотя я не буду вдаваться в подробности описания всего набора функций этого плагина, важно выделить несколько его преимуществ.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/www.karlancer.com/blog/wp-content/uploads/2020/08/SharedLink.png' /><noscript><img loading='lazy' src='/800/600/https/www.karlancer.com/blog/wp-content/uploads/2020/08/SharedLink.png' /></noscript></p><h5><span class="ez-toc-section" id="1_WordPress_Open_Graph"> 1. Вы получаете все необходимые теги WordPress Open Graph </span></h5><p> Мы искали способы создания тегов WordPress Open Graph с помощью плагинов.</p><p> Это еще один из простых способов, о которых уже говорилось. У него также есть специфическая функция, которая лучше, чем у остальных плагинов, которые я тестировал.</p><p> Я упомянул, что существует довольно много тегов Open Graph, которые используются не на каждом сайте, поскольку они предназначены для очень специфических типов контента.</p><p> Ultimate Facebook позволяет вручную вставлять дополнительные заголовки Open Graph.</p> Поддержка Facebook Open Graph.<h5><span class="ez-toc-section" id="2"> 2. Устраните регистрационный барьер с вашего сайта </span></h5><p> Вероятно, вы хотите, чтобы ваши пользователи регистрировались на вашем сайте, чтобы получить больше преимуществ для них.</p><p> Тем не менее, нравится вам это или нет, регистрация — это барьер.</p><p> Если бы вы избавились от барьера, ваш рост был бы намного быстрее. С Ultimate Facebook и Connect пользователи смогут зарегистрироваться на вашем сайте, используя свою учетную запись Facebook.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/4.bp.blogspot.com/-hYOjRXfFDFM/WbWC0G5pQnI/AAAAAAAAAZI/azg9dxHRuY8h4RdbXd2UqOAqRxKwnQh-wCLcBGAs/s1600/Open-Graph-Meta-Tags-Generator.png' /><noscript><img loading='lazy' src='/800/600/https/4.bp.blogspot.com/-hYOjRXfFDFM/WbWC0G5pQnI/AAAAAAAAAZI/azg9dxHRuY8h4RdbXd2UqOAqRxKwnQh-wCLcBGAs/s1600/Open-Graph-Meta-Tags-Generator.png' /></noscript></p><p> Это означает, что регистрация становится простым процессом в один клик.</p> Разрешение регистрации на вашем сайте WordPress через Facebook<h5><span class="ez-toc-section" id="3_Facebook_WordPress"> 3. Настройка комментариев Facebook на WordPress </span></h5><p> Решение о том, использовать ли собственные комментарии WordPress или выбирать между системами комментариев WordPress, — это решение, к которому нельзя относиться слишком легкомысленно.</p><p> Реальность такова, что если вы хотите переключиться между системами комментариев, есть вероятность, что вы потеряете некоторую информацию при передаче.</p><p> Комментарии в Facebook — лучший из миров. Это отличный способ интеграции Facebook с вашим сайтом.</p><p> Это также предоставляет дополнительные функции, которых нет в собственной системе комментариев WordPress, такие как лайки комментариев и отображение комментариев по комментариям или популярности.</p><p> Конечно, тот факт, что пользователям не нужно регистрироваться, чтобы оставлять комментарии, устраняет еще один барьер взаимодействия.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/www.bravonet.my/wp-content/uploads/2018/10/og-meta-tags.png' /><noscript><img loading='lazy' src='/800/600/https/www.bravonet.my/wp-content/uploads/2018/10/og-meta-tags.png' /></noscript></p><p> И еще один бонус: использование комментариев Facebook делает ваш сайт менее подверженным спаму в комментариях. Настоящие профили пользователей Facebook вряд ли будут использоваться для рассылки спама на другие веб-сайты, поскольку это окажет негативное влияние на их профиль.</p><h5><span class="ez-toc-section" id="4_Facebook"> 4. Автоматическая публикация статей и обновлений в ваших учетных записях Facebook </span></h5><p> Автоматическая публикация ваших статей на Facebook значительно упрощает возвращение аудитории на ваш веб-сайт.</p><h3><span class="ez-toc-section" id="_WordPress_OG"> Важность тегов WordPress OG </span></h3><p> Теги Open Graph необходимы для вашего веб-сайта WordPress, если вы хотите полностью контролировать то, как ваш контент публикуется в социальных сетях.</p><p> Это, безусловно, стоит сделать, потому что это не только поможет вам выделиться из толпы и привлечь больше кликов и просмотров, но и поможет поисковым системам лучше отображать ваш контент.</p><h2><span class="ez-toc-section" id="Open_Graph_Meta_Tags_Step-by-Step"> Open Graph Meta Tags Step-by-Step [Полное руководство] </span></h2><p> Социальные сети — это огромное поле возможностей для интернет-магазинов представить свой бренд более широкой аудитории.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/metatags.co/assets/img/og-tags.png' /><noscript><img loading='lazy' src='/800/600/https/metatags.co/assets/img/og-tags.png' /></noscript> Однако замечали ли вы, что Facebook и другие платформы не всегда извлекают релевантный контент из ссылок, которыми вы делитесь?</p><p> Сообщения в социальных сетях могут выглядеть непоследовательными и даже странными, что не только отпугивает людей от нажатия, но и вообще не привлекает их внимания.</p><p> Таким образом, публикация ваших продуктов и других страниц веб-сайта в социальных сетях приносит вам пользу только в одном случае — <strong> вы выделяете свои посты </strong> . И для этой цели вы должны изучить метатеги Open Graph.</p><p> Последние новости от Magento 2 совета</p><p> В этом руководстве вы узнаете все, что вам нужно, чтобы сделать ваши сообщения в социальных сетях более интерактивными и делиться ими с тегами open graph.</p><p> Содержание поста [скрыть]</p><ol><li> Что такое метатеги Open Graph и что они делают?</li><li> Критические теги Open Graph: определение</li><li> Как добавить метатеги Open Graph на веб-сайт Magento?</li><li> Проверка тегов Open Graph</li><li> Рекомендации по использованию тегов Open Graph</li></ol><h3><span class="ez-toc-section" id="_Open_Graph-12"> Что такое метатеги Open Graph и что они делают? </span></h3><p> Метатеги Open Graph <strong>, также известные как теги социальных сетей, представляют собой небольшие фрагменты кода </strong>, которые являются частью протокола Facebook Open Graph, также распознаваемого Twitter и LinkedIn.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/creative-grupp.ru/upload/iblock/276/2766eab15e3387ee0ab981ed65c35f85.png' /><noscript><img loading='lazy' src='/800/600/https/creative-grupp.ru/upload/iblock/276/2766eab15e3387ee0ab981ed65c35f85.png' /></noscript> <strong> Они определяют, как URL-адреса вашего сайта отображаются в социальных сетях </strong> и других мессенджерах.</p><p> Теги OG обычно обозначаются цифрой <strong> og: мета-свойство </strong> найдено в разделе<head> веб-страницы.</p><p></p><p> Первый вопрос — <em> без них можно? </em></p><p> Конечно.</p><p> Facebook извлечет содержимое вашего веб-сайта из данных, доступных на странице. Однако, скорее всего, это будет не то, что вы ожидаете.</p><p> Метатеги Open Graph значительно улучшают работу. Просто взгляните на этот пример.</p><table><tbody><tr><td></td><td></td></tr><tr><td> <em> Пост в Facebook без тегов open graph </em></td><td> <em> Пост в Facebook с тегами Open Graph </em></td></tr></tbody></table><p>  </p><p> <em> W </em> <em> на какую публикацию вы бы предпочли кликнуть, когда она появится в вашей ленте? </em></p><p> Теги OG делают ваши сообщения в социальных сетях более привлекательными, интерактивными и общедоступными. Это приводит к увеличению посещаемости веб-сайта и, соответственно, повышает узнаваемость бренда.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/chiefcontent.com/wp-content/uploads/2020/06/5d1bf56a1bc2e26c22f86942f21c07fd-3.png' /><noscript><img loading='lazy' src='/800/600/https/chiefcontent.com/wp-content/uploads/2020/06/5d1bf56a1bc2e26c22f86942f21c07fd-3.png' /></noscript></p><p> Кроме того, описания и заголовки по умолчанию не так хороши для социальных сетей, как для поисковых систем. Так что вы должны быть творческими.</p><p> Теперь давайте рассмотрим наиболее важные теги Open Graph, которые вам нужны.</p><h3><span class="ez-toc-section" id="_Open_Graph-13"> Критические теги Open Graph: определение </span></h3><p> Facebook определяет до 17 тегов Open Graph, но на самом деле вам нужно всего несколько, чтобы создавать привлекающие внимание сообщения.</p><p> Есть такие:</p><p> <strong> og:title </strong>  — это базовый тег, определяющий заголовок страницы.</p><p><meta property="og:title" content="Fusion Backpack, о котором вы пожалеете"></p><p> <strong> og:url </strong>  — определяет постоянный канонический URL общей страницы без параметров.</p><p><meta property="og:url" content="https://og.demo.magefan.top/fusion-backpack.html"></p><p> <strong> og:description </strong>  — содержит описание общей страницы, которая отличается от og:title.</p><p><meta property="og:description" content="Устали от бесполезных, некачественных и неудобных рюкзаков? Попробуйте этот, и вы не пожалеете!"></p><p> <strong> og:image </strong>  — URL изображения, связанного с общей страницей.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i0.wp.com/www.cagriozkaya.com.tr/wp-content/uploads/2022/03/what-is-open-graph.png?fit=1015%2C471&ssl=1' /><noscript><img loading='lazy' src='/800/600/https/i0.wp.com/www.cagriozkaya.com.tr/wp-content/uploads/2022/03/what-is-open-graph.png?fit=1015%2C471&ssl=1' /></noscript></p><p><meta property="og:image" content="https://og.demo.magefan.top/media/catalog/product/b/a/backpack-featured-image.png"></p><p> Это особенно важно, так как это основной привлекающий внимание элемент в ваших сообщениях. Поэтому обязательно соблюдайте требования Facebook к изображениям, чтобы дополнительно установить <strong> og:image height </strong> и <strong> og:image width </strong>.</p><p> <em> Готовы применить их? </em></p><h3><span class="ez-toc-section" id="_Open_Graph_-_Magento"> Как добавить метатеги Open Graph на веб-сайт Magento? </span></h3><p> Как мы уже указали, <strong> тега открытого графа помещаются в тег<head> в верхней части страницы </strong> . Таким образом, вы должны добавить их на страницы своего сайта вручную.</p><p> Это включает в себя некоторый технический опыт. В противном случае вы можете просто попросить своего разработчика добавить теги Open Graph.</p><p> В любом случае, это утомительный и трудоемкий процесс, так как вам придется вызывать разработчика каждый раз, когда вам нужно обновить теги Open Graph для любой из страниц.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/kaydee.net/blog/wp-content/uploads/2020/06/open-graph-image.jpg' /><noscript><img loading='lazy' src='/800/600/https/kaydee.net/blog/wp-content/uploads/2020/06/open-graph-image.jpg' /></noscript></p><p> В качестве альтернативы вы можете интегрировать расширение Magento 2 Facebook Open Graph Tags и легко управлять тегами OG из администратора.</p><p> Вы можете добавить <strong> OG Title </strong> , <strong> OG Description </strong> и <strong> OG Image </strong> для самых популярных страниц, таких как продукты и сообщения в блогах.</p><p></p><p> Для остальных страниц можно просто установить значения ОГ по умолчанию.</p><p></p><p> Да, это так просто.</p><p> Но тем не менее управление метатегами open graph на этом не заканчивается.</p><h3><span class="ez-toc-section" id="_Open_Graph-14"> Проверка тегов Open Graph </span></h3><p> После добавления тегов Open Graph на страницы вашего веб-сайта вы должны убедиться, что они выведены правильно.</p><p> Другими словами, вы должны проверить теги OG, чтобы увидеть, как они отображаются при публикации в социальных сетях.</p><p> Поскольку теги Open Graph являются родной функцией Facebook, вы можете начать с Facebook Sharing Debugger. Однако у Twitter и LinkedIn тоже есть свои валидаторы.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.ytimg.com/vi/_kefCoPGAXE/maxresdefault.jpg' /><noscript><img loading='lazy' src='/800/600/https/i.ytimg.com/vi/_kefCoPGAXE/maxresdefault.jpg' /></noscript></p><p> Facebook Sharing Debugger соберет данные с вашего веб-сайта, чтобы сообщить вам, как сообщение будет выглядеть в социальных сетях.</p><p></p><p> Если данные неверны, очистите кеш Facebook и посмотрите, обновляются ли результаты.</p><p> Иногда бывает даже так, что заголовок и описание правильные, но изображение не меняется. Это может быть из-за цепочки перенаправления, отсутствия мета-свойства или кеша. Вам нужно изучить причины, по которым ссылки для обмена не показывают изображения на Facebook, чтобы устранить проблемы.</p><h3><span class="ez-toc-section" id="_Open_Graph-15"> Рекомендации по использованию тегов Open Graph </span></h3><p> Если вы проверяете теги Open Graph и данные очищаются правильно, вы все равно можете быть недовольны результатом: это либо искаженное изображение, либо обрезанный заголовок и описание.</p><p> <em> Можете рассказать? </em></p><p> Это может быть связано с тем, что вы не соблюдаете рекомендации по тегам OG, чтобы обеспечить точность и привлекательность контента.</p><p> Итак, вот краткий обзор того, на что следует обратить внимание при добавлении метатегов open graph на свой веб-сайт:</p><ul><li> <strong> Используйте только канонические URL-адреса </strong> для свойства og:url.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/kandra.pro/wp-content/uploads/2019/09/Open-Graphs-01-02.png' /><noscript><img loading='lazy' src='/800/600/https/kandra.pro/wp-content/uploads/2019/09/Open-Graphs-01-02.png' /></noscript><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></div><div class="post-sharrre group"><div id="twitter" data-url="https://ylianova.ru/raznoe-2/tegi-open-graph-bazovye-printsipy-mikrorazmetki-i-nastrojka-tegov.html" data-text="Теги open graph: базовые принципы микроразметки и настройка тегов" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/raznoe-2/tegi-open-graph-bazovye-printsipy-mikrorazmetki-i-nastrojka-tegov.html" data-text="Теги open graph: базовые принципы микроразметки и настройка тегов" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/raznoe-2/tegi-open-graph-bazovye-printsipy-mikrorazmetki-i-nastrojka-tegov.html" data-text="Теги open graph: базовые принципы микроразметки и настройка тегов" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/raznoe-2/tegi-open-graph-bazovye-printsipy-mikrorazmetki-i-nastrojka-tegov.html" data-text="Теги open graph: базовые принципы микроразметки и настройка тегов" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/raznoe-2/diagnostika-kompyutera-onlajn-7-onlajn-instrumentov-dlya-proverki-rabotosposobnosti-kompyutera.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Диагностика компьютера онлайн: 7 онлайн-инструментов для проверки работоспособности компьютера</span></a></li><li class="previous"><a href="https://ylianova.ru/raznoe-2/kak-nastroit-stranitsu-v-instagrame-rukovodstvo-po-sozdaniyu-i-prodvizheniyu-akkaunta-v-instagram.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Как настроить страницу в инстаграме: Руководство по созданию и продвижению аккаунта в Instagram</span></a></li></ul><section id="comments" class="themeform"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/tegi-open-graph-bazovye-printsipy-mikrorazmetki-i-nastrojka-tegov.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='42634' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></section></div></section><div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a><div class="sidebar-content"><div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/"><div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" /></div></form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3><ul><li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a></li><li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a></li><li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li class="cat-item cat-item-20"><a href="https://ylianova.ru/category/linux">Linux</a></li><li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li class="cat-item cat-item-19"><a href="https://ylianova.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a></li><li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li><li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://ylianova.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a></li><li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a></li></ul></div></div></div></div></div><footer id="footer"><section id="footer-bottom"><div class="container"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a><div class="pad group"><div class="grid one-half"><div id="copyright"><p>Блог сумасшедшего сисадмина © 2025. Все права защищены.</p></div><div id="credit"><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div><div class="grid one-half last"></div></div></div></section></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://ylianova.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!--[if lt IE 9]> <script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script> <![endif]--> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?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();</script> <!-- /noptimize --> <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_3c7e1ad70b03c3bc154c57040c2f07b4.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="b24b87b5e427d5286fe0afd6-|49" defer></script>