#12-Правка черновика

'#99. Черновики : draft';

'Tools_DraftController_actionUpdateHtml';

'#layouts_templates_updateHtml';

Правка кода HTML в тексте

<h2>Что такое Open Graph?</h2>
<p>Open Graph-теги &ndash; это небольшие фрагменты кода, которые я добавляю на страницы сайта, чтобы управлять тем, как контент отображается при его публикации в соцсетях.</p>
<p>Их придумали в Facebook, чтобы стандартизировать процесс извлечения метаданных и их отображения в ленте. Сегодня OG-теги работают не только там, но и в LinkedIn, X (бывший Twitter), Pinterest и других платформах.</p>
<p>Пример: пост с правильно настроенным og:image выглядит заметно привлекательнее, чем публикация без него. Картинка делает его кликабельным, добавляет визуальный акцент и сразу даёт понять, о чём речь.</p>
<p>Все OG-теги размещаются в разделе <code>&lt;head&gt;</code> страницы. Основные: title, image, description, type, locale и site_name. Дальше расскажу, как их настроить и зачем это важно.</p>
<h2>Почему Open Graph-теги так важны?</h2>
<p>Они создают привлекательные и информативные превью страниц, что напрямую влияет на метрики в соцсетях: клики, показы, репосты, реакции.</p>
<p>По исследованию INMA (2024), посты с картинками в Facebook показывают вдвое больше вовлечённости и на 114% больше показов, чем публикации без изображений.</p>
<h3>Дополнительные плюсы OG-тегов:</h3>
<ul>
<li><strong>Больше кликов (CTR):</strong> красивые превью мотивируют переходить по ссылкам.</li>
<li><strong>Рост числа репостов:</strong> контент с оформленным предпросмотром охотнее делятся.</li>
<li><strong>Укрепление бренда:</strong> оформление в едином стиле повышает узнаваемость.</li>
<li><strong>Профессиональный вид:</strong> отсутствие тегов создаёт ощущение заброшенности сайта.</li>
<li><strong>Косвенные плюсы для SEO:</strong> больше переходов, обратных ссылок и взаимодействий.</li>
</ul>
<h2>Open Graph: обязательные и дополнительные теги</h2>
<h3>Обязательные OG-теги</h3>
<ol>
<li><strong>og:title</strong> &ndash; заголовок страницы. Должен совпадать с её содержанием и мотивировать клик.</li>
<li><strong>og:image</strong> &ndash; картинка предпросмотра. Лучше всего 1200&times;630 px, в формате JPG или PNG, связанная с содержанием.</li>
<li><strong>og:url</strong> &ndash; канонический URL страницы. Помогает соцсетям правильно подтягивать метаданные.</li>
<li><strong>og:type</strong> &ndash; тип контента (website, article, video и т. д.). Выбираю основной, чтобы соцсети понимали формат.</li>
</ol>
<h3>Дополнительные OG-теги</h3>
<ul>
<li><strong>og:description</strong> &ndash; краткое описание (до 120 символов). Работает как подзаголовок и мотивирует клик.</li>
<li><strong>og:site_name</strong> &ndash; название сайта или бренда.</li>
<li><strong>og:locale</strong> &ndash; язык и страна (например, ru_RU или en_US).</li>
</ul>
<h2>Как настроить OG-теги</h2>
<h3>WordPress</h3>
<p>Самый простой способ &ndash; установить плагин Yoast SEO (премиум-версия). После активации включаю Open Graph в настройках и задаю теги на каждой странице во вкладке &laquo;Social&raquo;.</p>
<h3>Wix</h3>
<p>Wix автоматически добавляет OG-теги, но их можно кастомизировать. Для этого в настройках SEO выбираю нужную страницу и задаю свои значения для заголовка, описания и изображения.</p>
<h3>Squarespace</h3>
<p>Тоже поддерживает OG по умолчанию. Для кастомизации открываю страницу, захожу в &laquo;Advanced&raquo; и вставляю нужные мета-теги в &laquo;Page Header Code Injection&raquo;.</p>
<h2>Как проверить OG-теги</h2>
<h3>Facebook</h3>
<p>Использую <a href="https://developers.facebook.com/tools/debug/">Sharing Debugger</a>. Вставляю URL, жму &laquo;Debug&raquo; и смотрю, как выглядит предпросмотр. Там же отображаются ошибки.</p>
<h3>LinkedIn</h3>
<p>Для проверки служит <a href="https://www.linkedin.com/post-inspector/">Post Inspector</a>. Вставляю ссылку &ndash; и сразу вижу превью.</p>
<h3>X (Twitter)</h3>
<p>Валидатора больше нет, поэтому проверяю через Tweet Composer: вставляю ссылку и смотрю, как она отобразится в ленте.</p>
<h2>Аудит OG-тегов</h2>
<p>Чтобы проверить, на каких страницах они установлены, провожу аудит сайта. В отчётах ищу раздел &laquo;Open Graph&raquo; &ndash; там видно, какие страницы корректно настроены, а где нужно доработать.</p>

Краткое название: Что такое Open Graph-теги и как ими пользоваться

Полное название Разбираю, что такое Open Graph-теги

Черновик Редактировать название и описание

Название

Стандартный редактор Смотреть

Полное название и описание

Полное название (Заголовок)

Описание

Как правило описание должно иметь около 150 знаков. Оно используется для заполнения мета-тега Description веб-страницы.
Сейчас используется - 0 символов

Описание скопировано!

Описание вставлено!