Что такое description facebook
Что такое разметка Open Graph и как ее внедрить без программиста
«Делай сайты с Open Graph, а без Open Graph — не делай», — возможно, так бы сказал Тони Роббинс о разметке сайта для соцсетей. И мы бы с ним согласились. А все потому, что с Open Graph сайт намного лучше выглядит при расшаривании в соцсетях.
Разбираемся, что это за разметка и как ее самостоятельно настроить.
Что такое разметка Open Graph и как она поможет вашему сайту получать больше трафика
Один из способов получить новых посетителей на сайт — разместить кнопки шеринга. Посетители вашего сайта смогут делать репосты в соцсети, а по ним будут приходить новые посетители.
Все это хорошо, но может не сработать, если публикация с репостом будет непривлекательной:
Чтобы подобного не происходило, как раз нужна разметка Open Graph. Она отвечает за привлекательный вид репостов страниц сайта в соцсетях.
Например, так выглядит репост статьи с разметкой Open Graph в Фейсбуке:
А так выглядит репост этого же материала во ВКонтакте:
Попробуйте репостнуть в Фейсбук или другую соцсеть ссылку на статью без разметки Open Graph, и наглядно увидите, почему все же стоит ее использовать. Ниже — несколько примеров.
Репост в Фейсбук статьи без внедренной разметки:
А так пост будет выглядеть, если Фейсбук не может подтянуть картинку (не находит ее на странице):
В примере ниже — подтянулась картинка из шапки сайта, а в кратком описании — фрагмент текста для формы подписки на рассылку:
Что можно сделать с помощью Open Graph
С помощью разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте материалов с вашего сайта:
Также Open Graph позволяет создать блок рекомендуемого контента в Google AdSense:
Где используется Open Graph
Микроразметка была создана Facebook и изначально использовалась только в этой соцсети. Сегодня поддерживается популярными соцсетями и мессенджерами: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.
Синтаксис разметки Open Graph
Полная документация по разметке Open Graph доступна в нескольких источниках:
Более сжато и доступно информацию о микроразметке можно почитать в справке Яндекс.Вебмастера. Здесь изложена основная информация по разметке (кем разработана, где используется), а также документация по основным тегам, с помощью которых вы можете реализовать разметку на своем сайте.
Также есть руководства по применению Open Graph для отдельных соцсетей:
По сути, микроразметка — это набор мета-тегов, которые передают соцсетям нужную информацию и указывают, какой контент использовать при репосте и как его отображать.
Обязательные свойства
Пройдемся по обязательным свойствам атрибута property, которые должны присутствовать в разметке:
Как быть с размерами картинок
У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:
При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.
Есть еще один вариант — задать один размер картинки для всех соцсетей. Для этого понадобятся теги og:image:width и og:image:height. Укажем с их помощью размер картинки для Фейсбука:
В других соцсетях картинка будет обрезаться в соответствии с параметрами соцсети. И это нужно учитывать — не размещать в «критичных» областях картинки текст или важные части изображения.
На скриншоте ниже в публикации для Фейсбук отобразилась полная картинка:
А при репосте во ВКонтакте картинка обрезалась под параметры соцсети:
Модуль PromoPult для таргетированной рекламы: все соцсети в одном кабинете, минимальные бюджеты, автоматизированное создание креативов, автоматическое управление ставками, 0% комиссии, удобный и гибкий подбор таргетингов.
Опциональные свойства
Помимо обязательных есть опциональные свойства, которые, тем не менее, рекомендуем заполнять:
Вот так description отображается в публикациях в Фейсбуке:
А так — в Телеграме:
А в Телеграме корректно подтягивается содержимое тега og:site_name:
Больше информации об основных и дополнительных мета-тегах разметки — в официальной документации OpenGraph.
Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:
Публикуете много видео? Используйте Open Graph
Видеохостинги и другие сайты, которые публикуют много видео, могут использовать Open Graph для улучшения ранжирования видеороликов в сервисе Яндекс.Видео.
Больше информации об этом — в справке Яндекса.
В разметке Open Graph есть специальные метатеги, с помощью которых можно передать Яндексу подробную информацию о видеоролике:
Как внедрять Open Graph
Вручную
Чтобы добавить разметку вручную в исходном коде страниц сайта, укажите следующую строку в самом начале html-страницы:
С помощью плагинов
Практически для всех популярных CMS есть уже готовые плагины, которые позволяют добавлять разметку быстро и удобно (без необходимости разбираться в коде и синтаксисе разметки).
По ссылкам ниже можно найти плагины для вашей CMS:
А если у вас, например, сайт на Tilda, вам не нужно искать плагин или внедрять разметку вручную. В конструкторе по умолчанию встроена оптимизация под соцсети.
Пример внедрения Open Graph на WordPress
Используем из самых популярных плагинов для Вордпресса — All in One SEO Pack.
Установите плагин (если он у вас еще не установлен), перейдите в раздел «Управление модулями». Найдите модуль «Социальные мета» и активируйте его.
После активации перейдите в модуль «Социальные мета» в меню плагина:
Это общие настройки, которые будут применяться ко всем страницам. Если вы хотите настроить разметку отдельно для какой-нибудь статьи, перейдите на вкладку «Социальные настройки».
Здесь есть поля, которые соответствуют основным мета-тегам OpenGraph (заголовок, описание, изображение и т.д.). Заполните их и сохраните. Также здесь можно воспользоваться отладчиком от Facebook для проверки корректности разметки.
Вот вид размеченной ссылки в ленте Facebook:
Примерно по такому же принципу работают другие плагины.
Как проверить корректность разметки Open Graph
Чтобы убедиться, что разметка реализована корректно, можно воспользоваться одним из инструментов:
Отладчик репостов от Facebook. Указываете URL страницы, которой планируете поделиться, и получаете полное описание свойств с предпросмотром.
Также есть отдельный инструмент для проверки микроразметки для Твиттера.
Контролируйте внешний вид репостов с помощью Open Graph
Репосты в соцсетях (ваши или пользовательские) могут дать дополнительный трафик на сайт. Но помните: в соцсетях важна визуальная привлекательность публикации — только так можно зацепить внимание пользователя при прокрутке ленты.
Если пост выглядит плохо, шансы на это уменьшаются. Поэтому используйте Open Graph и будьте уверены, что ссылки на ваш сайт будут выглядеть привлекательно и кликабельно в любой соцсети.
Дескрипшн: что это такое и для чего нужен, требования и рекомендации, как правильно его писать и как добавить на сайт WordPress
Дескрипшен относится к самым важным инструментам для продвижения любого проекта. Название используется для маленьких описаний, сразу привлекающих внимание посетителей. Потому рекомендуют присматриваться к особенностям составления.
Дескрипшн (Description) что это такое и для чего нужен
Дескрипшн – анонс страницы, включающий всего пару строчек. Результат – отображение в качестве сниппета, идущего после тайтл. Он относится к метаданным, связанным с тем или иным документом. Чистый вид атрибутов считывается только роботами, специальным ПО. Пользователи не видят его полностью.
Только при выполнении всех требований поисковая система учтёт информацию, создавая snippet.
Требования и рекомендации
Google и Яндекс давно выпустили советы для правильной публикации текстов. Но есть и другие правила из личного опыта:
Рекомендации Яндекса и Google
Принципиальные отличия в требованиях к тегу у этих двух поисковых систем отсутствуют. Длина и информативность остаются примерно одинаковыми. Описание может и превышать указанный объём, но тогда системы будут автоматически сокращать текст, используя многоточие.
В общем, основные условия по тегу можно описать следующим образом:
Как правильно писать description
Описания с ошибками составляют и опытные пользователи, не только начинающие авторы. Мало внимания и времени, уделяемых мета-тегу – вот в чём кроется проблема. Можно привести самые распространённые ошибки авторов:
Примеры
Вот правильные тексты, способствующие привлечению дополнительной аудитории для сайтов:
Указанные описания отличаются наличием ключей в первых позициях. По этой причине поисковая выдача лучше. Прочтение не доставляет хлопот, выделяется органичный вид.
Но с теми же запросами описания составляют и неправильно:
Подобные обстоятельства связаны с главной ошибкой – полный отказ от ключевиков, либо проставление их не на главной странице. Оба описания воспримутся поисковыми системами как слишком короткие.
Как добавить мета тег description на сайт WordPress
С самого начала у WordPress отсутствуют инструменты по внесению метаданных. Потребуется поиск, скачивание и запуск дополнительных расширений, выполняющих функцию.
Yoast Seo – один из примеров таких приложений. Это решение проверено годами, постоянно радует пользователей всевозможными дополнениями.
После установки плагина ниже поля для размещения статьи появляются дополнительные четыре строчки. Интересует в данном случае русское обозначение – метаописание, и английская версия – MetaDescription.
Описания сочиняют в сервисе, либо поля заполняют абзацами, подготовленными заранее. Для любых сайтов допустимо разрабатывать дополнения, облегчающие автоматический режим заполнения.
Почему Яндекс и Гугл берет не description, а текст со страницы
Обычно так происходит, если описание, по мнению поисковой системы, не соответствует содержанию страницы. То же правило действует для Яндекса. Текст могут брать из специальных каталогов, если некоторые его куски присутствуют там.
В случае с Google есть два варианта решения проблемы:
При работе с Яндексом самыми важными становятся ключевые слова. Поисковая система отслеживает все страницы, где содержатся ключевые запросы. Поэтому надо грамотно направлять сами куски текста, чтобы Яндекс отслеживал именно их.
Указание на нужный фрагмент будет проще при соблюдении таких требований:
Плагин для WordPress
Есть несколько инструментов, которые помогают решать проблему:
Владелец должен сам решить, какой из вариантов удовлетворяет текущие потребности в большей степени. Лучше выбирать современные программы, которые поддерживают постоянные обновления. Тогда результат работы проще контролировать.
Маркетолог, вебмастер, блогер с 2011 года. Люблю WordPress, Email маркетинг, Camtasia Studio, партнерские программы)) Создаю сайты и лендинги под ключ НЕДОРОГО. Обучаю созданию и продвижению (SEO) сайтов в поисковых системах. Мои контакты >>>
A Description of Facebook
Related
The world’s most popular social networking web site, Facebook enables users to connect with friends and family by sharing status updates, personal photos and other items of interest. Founder Mark Zuckerberg created Facebook in 2004 while a student at Harvard, designing the site as a means for other university students to communicate and to socialize online. The idea quickly spread from there and has become a global phenomenon, with more than 160 million users in the United States alone. Learning to leverage Facebook’s popularity can prove beneficial to your small business.
Pages
After registering for a free Facebook account, you can create your own business page complete with a detailed description, location, operating hours and contact information. While users must adhere to a standard profile template to maintain the site’s uniformity and appearance, Facebook permits personalization through the profile’s large cover image and profile image, enabling you to establish your business branding. Facebook pages are open to the public and can appear in search results of the major search engines.
Likes
After you’ve built your business page, invite friends and existing customers to «Like» your business. Everyone who clicks your page’s «Like» button receives automatic updates each time you post to your company page. Your page is a great place to share news about your business, including upcoming events, special sales or new product releases. All the page’s status updates appear on the news feeds of everyone who liked your business, serving as free advertising to your core customer base. Customers may also share your posts, add comments or contact the page administrator directly through Facebook, enhancing interactivity.
Photo Albums
Sharing photos of your business and your employees helps build a personal relationship with your customers. You may upload photos directly to your Facebook page, organizing pictures into customizable photo albums for easy reference. After uploading the photos, you can add captions and other comments. Visitors can also view the photo albums and comment on individual pictures.
Business Tools
Establishing a Facebook business page grants access to valuable business tools. Facebook’s Insights feature generates real-time user data, analyzing each post made and breaking down its effectiveness within your customer base. Insights reveals your visitors’ age, gender, location and how they came to your page so you can fine tune your marketing strategy and hit your target audience. Facebook also provides business pages with advertising and promotion options, helping give you an edge on the competition.
События пикселя Facebook: подробная инструкция по установке на сайт
Есть разные способы анализа поведения пользователей на сайте: Яндекс.Метрика, Google Analytics и другие. Команда Mello расскажем еще об одном ─ пикселе Facebook, точнее, об одной из его функций ─ отслеживании и фиксации событий, или определенных действия посетителей.
Ваш сайт, например, интернет-магазин посещают разные люди, кто-то приходит и уходит, кто-то откладывает товары в корзину и благополучно о ней забывает, а некоторые становятся покупателями.
Как видите, все совершают разные действия, а значит, и напоминать о себе надо разными способами. Осталось только «отследить» и сгруппировать посетителей сайта по определенным признакам.
В терминологии пикселя Facebook все действия на сайте ─ это события. Вы можете определить для себя, какие события помогут вам создать аудитории, оптимизировать рекламу и, возможно, даже что-то изменить в работе сайта или сотрудников.
Например, большая разница между числом посетителей, которые положили товар в корзину и сделали заказ, может говорить о том, что непонятна процедура заказа или дорогая доставка, или менеджеры упустили покупателя. Вариантов много, но, главное ─ вы о них начнете думать и проверять.
События пикселя Facebook получится настроить только после установки основного кода пикселя Facebook на ваш сайт. О том, как это сделать, читайте в статье.
Ниже приведен пример кода сайта с настроенным событием:
В Facebook есть два вида событий ─ стандартные и специально настроенные.
Стандартные события заранее определены в Facebook, их используют для регистрации конверсий, выполнения оптимизации для конверсий и создания аудиторий.
В таблице перечислены стандартные события пикселя Facebook.
Такие события не входят в список стандартных, поэтому каждому из них можно дать уникальное название, которое будет отражать выполняемое пользователем действие.Специально настроенные события можно использовать для построения пользовательских аудиторий, но нельзя для кампаний с оптимизацией по конверсиям.
Установить события пикселя Facebook можно разными способами:
Все стандартные события отслеживаются с помощью вызова функции пикселя fbq(‘track’) с указанием названия и, при необходимости, объекта JSON в качестве параметров ─ цены, валюты, id товара и т. д. Более подробно про передаваемые параметры написано в справке Facebook под заголовком «Свойства объектов».Например, так выглядит вызов функции, отслеживающий завершенное событие покупки, в качестве параметров заданы валюта и сумма:fbq(‘track’, ‘Purchase’,
Специально настроенные события отслеживаются с помощью вызова функции пикселя fbq(‘trackCustom’) с указанием имени события и, по необходимости, объекта JSON в качестве параметров (цены, валюты, id товара и т.д.).Например, так выглядит вызов функции, отслеживающий отправку формы на сайте:
В этом примере название события в статистике Facebook будет отображено как «OtpavkaForm». Для более удобного анализа информации лучше указывать все названия максимально понятно.После вызова кода события автоматически будут отслеживаться в Events Manager.
Функции fbq(‘track’) или fbq(‘trackCustom’) можно вызывать в любом месте на сайте между открывающим и закрывающим тегами при загрузке страницы или при выполнении пользователем какого-либо действия, например, нажатия кнопки.
Для начала определим с какой целью и за каким событием будем наблюдать на сайте.
Например, нам надо отследить добавление товара в корзину по нажатию кнопки. Для этого подходят стандартные события Facebook.Переходим к таблице стандартных событий, представленной выше, и ищем нужное действие, в нашем примере это «Добавление в корзину».
Видим, что код данного действия имеет вид fbq(‘track’, ‘AddToCart’).
Ниже показано, как добавить код вызова функции fbq(‘track’, ‘AddToCart’) по нажатию кнопки в код сайта.
Напомним, что перед работой с событиями на сайте уже должен быть установлен код пикселя Facebook. За основу установки события возьмем всё то же отслеживание добавления товара в корзину (AddToCart), рассмотрим простую настройку и установку события через GTM.
1. Для начала определим кнопку и ее параметры для отправки события в Facebook. Для этого переходим на сайт, находим нужную нам кнопку и кликаем по ней правой кнопкой мыши, после чего выбираем «Просмотреть код».
2. Смотрим параметры кнопки, в данном случае это название класса AddToCard и текст «В корзину».
3. Далее идем в Google Tag Manager в раздел «Переменные» и нажимаем кнопку «Настроить». В конфигурациях выбираем «Click Classes» и «Click Text».
4. После этого переходим в раздел «Триггеры» и нажимаем кнопку «Создать».
5. Выбираем настройки триггера «Все клики».
6. Выполняем следующие настройки на основе параметров кнопки:
7. Осталось создать Тег. Переходим в раздел «Теги» и нажимаем кнопку «Создать».
8. Далее нажимаем «Конфигурация тега» и выбираем из предложенного списка «Пользовательский HTML».
9. В поле для вставки вставляем наш код, который нужно обернуть в тег
10. После этого нам нужно выбрать триггер срабатывания кода, который мы создали ранее.
11. Теперь удостоверимся в правильности настройки нашего события и для начала проверим работу тега.
Для этого в интерфейсе Google Tag Manager переходим в «предварительный режим» и отправляемся на свой сайт.
На сайте нажимаем кнопку «В корзину» и видим срабатывание тега в нижней части экрана:
12. Также, правильность срабатывания, в «предварительном режиме», можно проверить и с помощью расширения “Facebook Pixel Helper”, где по нажатию кнопки в интерфейсе отобразиться название нашего события. Больше расширений в помощь специалисту по контекстной и таргетированной рекламе
13. Все готово, нажимаем кнопку «Оправить» в правом верхнем углу.
Скриншот новой версии FacebookЧтобы детально посмотреть события в старой версии Facebook, необходимо перейти в Events Manager и нажать на наш установленный ранее пиксель.
Скриншот старой версии Facebook
Помимо работы с кодом, можно использовать инструмент Facebook, который позволит добавить события и параметры этого события в веб-интерфейсе вашего сайта.
Переходим в Events Manager → «Источники данных» и выбираем нужный нам пиксель, после чего нажимаем кнопку «Добавить событие».
Выбираем «Установить код вручную» и пропускаем все пункты кнопкой «Продолжить» до того, как Facebook предложит «Запустить инструмент настройки событий».
Нажимаем на эту кнопку. После чего появится окошко для ввода URL вашего сайта, заполняем его, дальше ─ «Открыть сайт».
Порядок действий в старой версии
На странице с подробной информацией и статистикой выбранного пикселя также отображены настроенные нами события. В правом верхнем углу находим и нажимаем кнопку «Настроить», из выпадающего списка выбираем «Настроить новые события».
После чего появится окошко с настройкой события, а котором сразу выбираем «Использовать инструмент настройки событий Facebook».
В поле «URL сайта» вводим адрес нашего сайта и нажимаем кнопку «Открыть сайт».
После перехода на сайт, в левом верхнем углу мы увидим окошко «Инструмент настройки событий Facebook».
На определенных страницах можно увидеть не только уже настроенные события на данной странице, но и рекомендуемые к установке. Например, на скриншоте ниже страница, на которой Facebook заметил кнопку «Оформление заказа» и предложил установить на нее событие.
Нажимаем «Проверка», кнопка на сайте выделилась, можно выбрать категорию самого события, это «Покупка» и передаваемые значения. Если все устраивает, подтверждаем выбор.
Кнопка стала зеленой, следовательно событие на ее срабатывание уже настроено и отслеживается в интерфейсе Facebook в Events Manager.
Функциональность «Инструмента настройки событий Facebook» позволяет настроить отслеживание кнопки вручную.
Так вы с легкостью можете настроить любую кнопку на вашем сайте. После выбора «Отслеживать новую кнопку» на сайте появятся всевозможные выделения, которые может фиксировать Facebook. Выбирайте нужные и завершайте настройку так же, как рассказано выше.Еще одна полезная функция в настройке событий ─ это «Отслеживать URL».
Например, очень просто можно фиксировать завершение заказа, если после его оформления пользователь попадает на страницу с благодарностью (site.ru/thank-you например). Заполнив все необходимые поля и подтвердив завершение настройки вы очень быстро настроите нужное вам событие.
Специально настроенные конверсии позволяют создавать правила для параметров ваших событий и страниц вашего сайта. Благодаря этому вы можете измерять более конкретные действия клиентов. Например, можно отфильтровать все события покупок, чтобы сосчитать, сколько пар женских туфель дороже 1000 рублей было куплено. Используя эти конверсии, также можно оптимизировать показ рекламы.Максимальное количество специально настроенных конверсий в рекламном аккаунте — 100.
Оптимизация показа рекламы по конверсиям для специально настроенных событийFacebook позволяет создавать компанию с оптимизацией по конверсиям только для стандартных событий и для специально настроенных конверсий, для специально настроенных событий такой возможности нет. Поэтому для того чтобы проводить оптимизацию по специально настроенным событиям, сначала нужно на основе таких событий создать конверсию и уже на ее основе оптимизировать показ рекламы.Как это сделать? Для начала переходим в Events Manager и идем на вкладку «Специально настроенные конверсии».
Обязательно указываем название конверсии и источник данных, если у вас их несколько, в нашем случае это один-единственный пиксель Facebook. Из выпадающего списка «Событие конверсии» выбираем нужное нам специально настроенное событие. После чего нажимаем кнопку «Создать».
Теперь, выбирая оптимизацию показа рекламы по конверсиям, мы сможем использовать созданную конверсию на основе специально настроенного события.
Настройка стандартных событий без дополнительного кода
Если на сайте есть базовый код пикселя Facebook, вы можете использовать правила для URL, чтобы регистрировать стандартные события, не добавляя дополнительный код.
Например, это пригодится, когда на вашем сайте есть отдельная страница с благодарностью, и для быстрой фиксации переходов на эту страницу можно создать специально настроенную конверсию.
В окошке создания конверсии для «Событие конверсии» выбираем «Весь трафик для URL» и в правилах ниже указываем название нашей страницы с благодарностью после чего нажимаем кнопку «Создать».
Добавление правила к стандартным событиям, специально настроенным событиям и событиям «Весь трафик для URL», помогает более подробно анализировать действия клиентов. Например, если у вас настроена передача дополнительных параметров по событиям, можно создать правило для подсчета покупателей товаров определенной категории и стоимости.
Как настроить условия для фиксации добавления товара определенной категории дороже 1000 рублей.
При создании специально настроенной конверсии в «Событие конверсии» выбираем любое нужное нам для отслеживания событие, в нашем случае ─ это «Добавление товара в корзину», в котором настроена передача параметров. Пример кода по одному из товаров при добавлении в корзину:
Затем в правилах выбираем «URL» → «Содержит» и в поле для ввода вставляем часть URL страницы, категорию которой нам необходимо отслеживать.
Например, страница имеет вид site.ru/divani/3464, где site.ru — основной адрес страницы, divani — категория продаваемых товаров «Диваны» и 3464 ─ id определенного товара. Нам интересна будет именно категория divani.
Примечание: не все страницы имеют вид, описанный в примере.
Нажимаем «+» напротив правила для добавления еще одного. Выбираем категорию «Event Parameters» для создания правила из параметров, далее ─ «value» (стоимость товара) и выставляем «больше, чем» 1000. Кнопка «Создать».
Передавайте деловым партнерам данные по отдельным специально настроенным конверсиям, а не источники данных целиком.
В заключение хотелось бы описание некоторые проблемы, с которыми может столкнуться пользователь, при настройке событий:
1. Если вы используете инструмент настройки событий Facebook, работающий как всплывающее окно, он может не отображаться из-за блокировки всплывающих окон в вашем браузере. Для корректной работы инструмента стоит отключить блокировку.
2. В настоящее время Facebook не разрешает использовать инструмент настройки событий компаниям с такими видами деятельности, как инвестиционный банкинг и брокерские услуги, страхование, финансовые услуги, банковское обслуживание юридических и физических лиц, кредитование (включая ипотечное), взаимокредитование (кредитные союзы), фармацевтическая промышленность и здравоохранение. Компании, работающие в этих секторах, могут использовать ручные настройки событий.
3. Настраивать кнопки в инструменте настройки событий можно при условии, что:
Более расширенное описание возможных проблем описано в справке Facebook — Устранение неполадок c инструментом Facebook для настройки событий на сайтах.
Автор статьи: специалист по контекстной рекламе в Mello, Андрей Моисеев.