- Что такое открытый график?
- Помогает ли Open Graph повысить ваш рейтинг в поисковых системах?
- Ссылка на мой веб-сайт в любом случае является общей, так зачем же все эти проблемы?
- Хорошо, я реализую теги для социальных сетей. Но как они выглядят?
- ог: название
- ог: Тип
- OG: изображение
- OG: URL
- OG: описание
- Другие теги Open Graph
- Итак, как же на самом деле выглядит весь этот гигантский джамбо?
- Карты Твиттера
- твиттер: карта
- твиттер: URL
- твиттер: название
- твиттер: описание
- твиттер: Изображение
- А как насчет Pinterest Open Graph AKA Rich Pins?
- Как реализовать теги Open Graph и Twitter Card
- Добавление социальных мета-тегов в <head> вашего сайта
- Реализуйте Open Graph простым способом
- Отладка мета-тегов Open Graph для социальных сетей
- Последнее замечание о предварительном кэшировании изображений
- Заключение
Социальные сети могут стать основным источником трафика на ваш сайт, поэтому в ваших интересах оптимизировать свое присутствие на них, включая, как вы уже догадались, теги Open Graph.
Вы наполнили свою биографию полными ключевых слов, и вы используете все правильные хэштеги в своих сообщениях - но знаете ли вы, как выглядит сообщение, когда другие люди делятся страницей с вашего сайта в своих профилях?
Мы не можем контролировать то, что незнакомцы пишут о нашем контенте, или заставлять их прикреплять привлекательное изображение, чтобы повысить рейтинг кликов - так что сообщение может, без нашего ведома, в конечном итоге искать нужную помощь:
Введите Open Graph.
Что такое открытый график?
Open Graph - это протокол это позволяет любой веб-странице стать богатым объектом в социальном графе.
В принципе, вы можете сказать, социальные медиа В таких сетях, как Facebook, Twitter, Pinterest, LinkedIn и Google+, какую информацию следует отображать, когда вы или кто-либо другой делятся ссылкой с вашего сайта.
Подобно тому, как поисковые системы посещают ваш сайт и ищут данные, необходимые для отображения вашего сайта в результатах поиска, социальные сети делают то же самое, ища свои собственные теги (это может быть Open Graph, Schema.org или просто неудобно, Twitter Cards) для «социального графа».
Сам социальный график - это способ определения «вещей» в цифровом пространстве, и он может состоять из таких мест, как кинотеатры и магазины, медиа, такие как видео и фильмы, свойства, такие как веб-сайты и статьи, и такие люди, как телеведущие и кинозвезды.
Данные Open Graph передают эти детали в социальный граф о том, что это за объект, и как он должен быть представлен. Например, вы можете указать, какое изображение или видео будет отображаться, название и описание, которое должно быть показано, и даже местоположение или язык.
Помогает ли Open Graph повысить ваш рейтинг в поисковых системах?
Теги Open Graph были созданы специально для социальных сетей, поэтому поисковые системы знают, что их игнорируют.
Тем не менее, в связи с тем, что контент социальных сетей все чаще попадает в результаты поиска, ваши метатеги Open Graph не должны находиться на расстоянии миллиона миль от ваших метатегов SEO.
Хотя в настоящее время нет прямой SEO-выгоды от реализации тегов Open Graph, могут быть и другие косвенные преимущества.
Если ваш контент становится более привлекательным в новостных лентах социальных сетей, то понятно, что все больше людей увидят его, нажмут и поделятся им *.
В результате ваш контент может конвертировать количество посетителей в потенциальных клиентов по электронной почте или новых подписчиков в социальных сетях, что даст вам больше людей для обмена будущим контентом.
Расширение обмена также повышает вероятность того, что ваш контент попадет на новых веб-мастеров и привлечет обратные ссылки за свой счет, естественно повысив ваш рейтинг.
* Имейте в виду, что никакая оптимизация не может компенсировать скучный контент - взгляните на наше руководство по разработке содержание идеи, которые придерживаются здесь 😉
Ссылка на мой веб-сайт в любом случае является общей, так зачем же все эти проблемы?
Когда вы делитесь контентом со своего сайта в социальной сети, его сканер будет очищать HTML-код URL-адреса общего доступа.
Тем не менее, если там нет данных Open Graph, скребок должен угадать, какой контент важен, а иногда они могут быть довольно неточны:
Как вы можете видеть в посте выше, Facebook пришлось угадывать, что было важно, и в итоге получился слишком длинный заголовок, описание «по умолчанию» и плохо обрезанное изображение.
Неудивительно, что публикация не получила участия, и она не бросается в глаза, когда пользователи прокручивают свои каналы.
Все еще не убежден? Облегчив поиск информации и гарантируя правильное ее представление в социальных сетях, ваш веб-сайт может значительно увеличить рейтинг кликов при передаче URL-адресов с вашего сайта.
Если учесть, что Tumblr увеличил свой трафик на Facebook 250% после реализации Open Graph и что Нил Патель увеличил его на 174% Вы можете увидеть, что стоит потратить время на оптимизацию этих тегов.
Хорошо, я реализую теги для социальных сетей. Но как они выглядят?
Четыре обязательных свойства для каждой страницы:
ог: название
Подобно обычному тегу заголовка HTML, где вы указываете поисковым системам заголовок SEO вашей страницы, og: title - это заголовок вашего объекта, как он должен отображаться в социальном графе.
Ваш заголовок og: должен быть четким, без указания бренда или упоминания самого домена, не более 95 символов.
Пример: <meta property = ”og: title” content = ”6 признаков идеи контента, которая придерживается” />
ог: Тип
По сути, это то, чем является ваш объект; статью, видео, сообщение в блоге, даже рецепт - вы можете найти полный список здесь , В зависимости от типа, который вы укажете, могут также потребоваться другие свойства.
Пример: <meta property = ”og: type” content = ”website” />
OG: изображение
Здесь вы указываете URL-адрес изображения, чтобы изображение всегда отображалось вместе с контентом, которым вы делитесь в социальной сети.
Это отличает ваши сообщения от обновлений статуса, которые содержат только текст в загруженных людских временах.
Пример: <meta property = ”og: image” content = ”http://www.aira.net/2015/wp-content/uploads/2016/11/how-to-make-content-ideas-stick.jpg” />
Facebook рекомендует использовать изображения размером не менее 1200 x 630 пикселей и не более 8 МБ, и по крайней мере вы должны использовать изображения размером 600 x 315 пикселей:
Абсолютный минимальный размер, который вы получите, составляет 200 х 200 пикселей. Если ваше изображение меньше, чем 600 x 315 px, оно все равно будет отображаться, только намного меньше:
OG: URL
Это URL вашего поста, страницы или объекта (в социальной сети отображается только домен, поэтому не беспокойтесь, когда полный URL не появится).
Этот тег может показаться неуместным, но его важно заполнить, потому что иногда у вас может быть несколько URL для одного и того же контента.
Используйте этот тег для чистого URL-адреса, который не содержит идентификаторов сеансов или параметров, чтобы гарантировать, что все общие ресурсы относятся к одному URL-адресу, а не к нескольким URL-адресам.
Пример: <meta property = ”og: url” content = ”http://www.aira.net/6-traits-content-idea-sticks/” />
OG: описание
Также не забудьте добавить описание. Этот тег не является обязательным, но он сообщает пользователям социальных сетей больше о вашей странице или публикации, чтобы поощрить клик.
Попробуйте написать что-то около двух предложений и сделать его действительно релевантным содержанию страницы или поста.
Пример: <meta property = ”og: description” content = ”Хотите получить тонны трафика и ссылок? Все, что вам нужно сделать, это «создать отличный контент», но чтобы контент был великолепным, его нужно придерживаться ». />
Другие теги Open Graph
Существуют и другие расширенные теги OG в социальных сетях, которые могут иметь отношение к вашему контенту, например, название вашего сайта:
Пример: <meta property = ”og: site_name” content = ”Aira Digital” />
Есть также fb: admins, которая связывает ваш сайт с вашей фан-страницей в Facebook для получения еще большего количества данных в Facebook Insights:
Пример: <meta property = ”fb: admins” content = ”500013011 ″ />
Вы даже можете указать Open Graph, есть ли в статье переводы, есть ли автор или издатель, и даже указать информацию о таких вещах, как видео, включая даты выхода, продолжительность, актеров и режиссера.
Итак, как же на самом деле выглядит весь этот гигантский джамбо?
Вот отличный пример кода Open Graph из поста и его перевода в пост на Facebook:
<meta property = ”og: locale” content = ”en_US” />
<meta property = ”og: type” content = ”article” />
<meta property = ”og: title” content = ”Стиви Уандер Только что выиграл 2016 с этим веселым козырем” |>
<meta property = ”og: description” content = ”Легендарный певец и исполнитель Стиви Уандер призвал избирателей остановить Дональда Трампа как можно лучше». />
<meta property = ”og: url” content = ”http://usuncut.com/politics/stevie-wonder-just-won-2016-hilarious-trump-take/» />
<meta property = ”og: site_name” content = ”US Uncut” />
<meta property = ”article: tag” content = ”Дональд Трамп” />
<meta property = ”article: tag” content = ”Хиллари Клинтон” />
<meta property = ”article: tag” content = ”Стиви Уандер” />
<meta property = ”article: section” content = ”Политика” />
<meta property = ”article: publ_time” content = »2016-11-08T01: 00: 12 + 00: 00 ″ />
<meta property = ”og: image” content = ”http://usuncut.com/wp-content/uploads/2016/11/stevietrump.png» />
<meta property = ”og: image: width” content = ”968 ″ />
<meta property = ”og: image: height” content = ”504 ″ />
Для получения дополнительной информации вы можете увидеть все, что вы можете сделать с тегами Open Graph на Открытый протокол протокола Graph так же как Руководство по тегам Open Graph в Facebook ,
Карты Твиттера
Карты Twitter в основном выполняют те же функции, что и теги Open Graph, за исключением того, что на них смотрит только Twitter.
Для стандартных статей и постов в Твиттере вы можете выбрать один из двух типов карт, которые вы можете установить на своем веб-сайте; Сводные карты и Сводная карта с большим изображением, а также другие типы Twitter-карт для других типов контента ,
Сводные карты просто дают вам название, описание, миниатюру и атрибуцию аккаунта Twitter:
В то время как карта большого изображения дает вам название, описание, атрибуцию учетной записи и - как вы уже догадались - большое изображение вместо миниатюры:
Вы даже можете вникнуть в производительность ваших карт Twitter, используя Аналитика Twitter-карты ,
Если Twitter не может найти теги Twitter Card, он будет использовать теги Open Graph, так что вы можете пропустить их настройку, если ваши теги Open Graph установлены правильно.
Вот теги, которые вам нужно знать для Twitter Cards:
твиттер: карта
Метатег twitter: card совпадает с меткой og: type, где вы указываете содержание. Вы можете выбрать из фотографий (для изображений), проигрывателя (для видео) и резюме (для всего остального). Твиттер по умолчанию сводится, если вы не предоставите определение.
Пример: <meta name = ”twitter: card” content = ”summary”>
твиттер: URL
Как и в случае с Facebook, предоставление этого тега гарантирует, что один URL-адрес получает все твиты, а не разделяет их по нескольким URL-адресам.
Пример: <meta name = ”twitter: url” content = ”http://www.bluejeanswhiteteeblog.com/my-wedding/no-poo-bridal-hair/»>
твиттер: название
Как и в случае с заголовком Open Graph, это должно быть убедительное резюме вашего контента, которое не заполнено ключевыми словами и состоит из примерно 70 символов.
Пример: <meta name = ”twitter: title” content = ”My no 'poo bridal hair”>
твиттер: описание
Опять же, создайте убедительное предложение длиной до 200 символов, которое побуждает людей переходить на ваш сайт.
Пример: <meta name = ”twitter: description” content = ”Можете ли вы перейти от тролля к Золушке, если вы не используете шампунь? Взгляните на некоторые из моих свадебных фотографий без шампуня.>
твиттер: Изображение
Неудивительно, что твиты с изображениями намного лучше выделяются в каналах людей. Убедитесь, что ваши изображения имеют размер файла менее 1 МБ и не менее 60 на 60 пикселей; Twitter автоматически изменяет размеры изображений размером более 120 на 120 пикселей.
Пример: <meta name = ”twitter: image” content = ”http://www.bluejeanswhiteteeblog.com/wp-content/uploads/2016/11/No-poo-bridal-hair.jpg»>
После того, как вы отметили свою первую страницу или сообщение, вам нужно вставить ссылку в Валидатор карточек Twitter чтобы получить первоначальное одобрение вашего сайта:
После этого вы можете использовать его, когда захотите, чтобы проверить, правильно ли отображаются теги вашей карты Twitter.
А как насчет Pinterest Open Graph AKA Rich Pins?
Pinterest предлагает шесть типов разметки Open Graph, известной как Rich Pins, которые позволяют вам действительно точно определить, что представляет собой контент, которым вы делитесь с вашим сайтом: приложения, продукты, рецепты, фильмы, статьи и места. Узнайте больше о типах булавок и их использовании на Pinterest Вот ,
Вот пример Movie Pin, который включает данные для рейтинга фильма, возрастных ограничений, режиссера и главных актеров:
Как правило, Pinterest поддерживает Open Graph и Schema.org для разметки ваших страниц, но вы можете прочитать больше о других форматах, которые социальная сеть поддерживает для каждого типа Pin. Вот ,
Итак, вам нужно подготовить свой сайт с соответствующими метатегами, протестировать его, запустив один из ваших URL-адресов записей с метатегами на нем через Валидатор Rich Pins инструмент, исправить все проблемы, которые помечены, а затем использовать инструмент, чтобы подать заявку на Rich Pins.
Все это звучит очень просто, но первоначальная настройка Pinterest Open Graph Rich Pins может быть немного хитрой (я, возможно, немного заплакала), поэтому, если вы не обладаете техническими мыслями, обязательно обратитесь за помощью к разработчику.
После того, как вы приступите к работе, вы можете использовать инструмент проверки в качестве отладчика, когда вам это нужно.
Как реализовать теги Open Graph и Twitter Card
Есть несколько способов добавить теги Open Graph и Twitter Card на ваш сайт:
- Добавляя метатеги в часть <head> кода вашего сайта.
- С помощью плагина через системы CMS, такие как WordPress или Joomla.
Прежде чем приступить к реализации чего-либо, вы можете проверить, есть ли какие-либо теги на вашем сайте, уже выполнив поиск по некоторым тегам, таким как 'og: type' или 'twitter: card' в вашем исходном коде, или с помощью инструментов отладки социальных сетей ( мы посмотрим на них чуть позже).
Добавление социальных мета-тегов в <head> вашего сайта
Чтобы добавить Open Graph на ваш сайт, вам нужно добавить метатеги в <head> часть кода вашего сайта с информацией, которую вы хотите отображать на сайтах социальных сетей.
Если вам нужны только теги Open Graph для небольшого количества страниц, Мега Тэги это удобный инструмент, который вы можете использовать для создания точных мета-тегов в социальных сетях для Twitter, Facebook, Pinterest, LinkedIn и других.
Однако, если вы хотите реализовать теги Open Graph в масштабе и готовы использовать те же данные, которые вы использовали для заголовков страниц, метаописаний и т. Д., Вы можете поместить немного кода в свой файл functions.php, чтобы включить эти атрибуты автоматически через ваш сайт.
Вот пример Функция WordPress для тегов Open Graph который я отредактировал, чтобы сгенерировать код ниже (я знаю, что пропустил твиттер: изображение, но, эй, моя карта проверена с использованием тега og: image, так что, учитывая, что это на тренировочном сайте, я пока буду ленивым и оставь это)
Реализуйте Open Graph простым способом
Если вы не можете получить доступ к теме вашего сайта или хотите получить больший контроль над отдельными страницами, вы всегда можете пойти дальше и установить плагин, который сделает все немного проще.
Существует множество плагинов, расширений и дополнений для тегов OG в социальных сетях для WordPress, Joomla, Drupal, Magento, Zen Cart и osCommerce.
Раньше мне нравилось использовать NextGen Facebook Pro (NGFB) для моего старого сайта WordPress, который имел действительно удобный интерфейс и давал вам огромный контроль над вашими тегами. С тех пор его заменили WPSSO Core , который использует ваш существующий контент для создания мета-тегов и разметки схемы для Open Graph, Google Knowledge Graph, Pinterest Rich Pins, Twitter Cards и т. д., которые вы все равно можете редактировать при необходимости. Она включает в себя разметку для изображений, видео, продукты электронной коммерции, авторов и издателей, совокупные рейтинги и обзоры, рецепты, события и многое другое.
Затем вы выбираете изображение, которое хотите использовать. Вы можете выбрать только одно изображение для каждой социальной сети, чтобы вы могли выбрать размер и оптимизировать его для нескольких сайтов, которые мне действительно нравятся. Руководство эксперта по социальным медиа за это.
Затем плагин генерирует предварительный просмотр того, как будет выглядеть ваше сообщение на Facebook:
Просто, правда?
Однако стоит также отметить, что существует ряд плагинов, которые автоматически добавляют теги Open Graph на ваш сайт, поэтому вам может даже не понадобиться искать плагин, если ваши требования менее сложны.
Например, если вы активировали модуль общего доступа или публикации в Jetpack плагин автоматически добавит метатеги Open Graph на каждую из ваших страниц:
Если вы уже используете другой плагин для обработки метатегов Open Graph на своем сайте, Jetpack даже автоматически деактивирует их метатеги Open Graph, чтобы избежать создания дубликатов.
Однако, если вы пошли по пути добавления этих тегов в вашу тему и не хотите деактивировать функции общего доступа или публикации, вы можете просто добавить следующий код в файл functions.php своей темы, чтобы деактивировать Openpack Jetpack. Графические метатеги:
add_filter ('jetpack_enable_open_graph', '__return_false');
Yoast также может использоваться для добавления тегов Open Graph. Плагин позволяет включать и выключать их в настройках SEO > Социальные сети > Facebook « Добавить метаданные Open Graph » и Twitter « Добавить метаданные Twitter-карты »:
Вы также можете подтвердить подтверждение своего веб-сайта в Pinterest и добавить свою страницу Google+ в раздел «Социальные сети»; хотя, с Google+ скоро на пенсию , вы можете пойти дальше и пропустить этот шаг.
Отладка мета-тегов Open Graph для социальных сетей
Прежде чем делиться информацией с социальными сетями, вы должны проверить свои теги, используя основные средства отладки социальных сетей и средства проверки Open Graph, которые мы уже рассмотрели:
Эти отладчики позволяют предварительно просмотреть сообщение и сообщить о любых ошибках и предложениях для тегов Open Graph.
Некоторые плагины, такие как NGFB, позволяют вам делать это на вашей платформе CMS:
Стоит иметь в виду, что Facebook очищает вашу веб-страницу только один раз, поэтому, если вам пришлось вносить изменения в старые данные Open Graph, вам нужно вручную попросить Facebook снова очистить ваш контент, что вы можете сделать с помощью их отладчика. ,
Если вы используете сокращение Bitly, Facebook понимает, что эта ссылка перенаправляет на вашу страницу, поэтому вы можете и должны использовать версию Bitly, когда просите их очистить ваш сайт.
Последнее замечание о предварительном кэшировании изображений
Facebook должен увидеть изображение хотя бы один раз, прежде чем его можно будет отобразить, поэтому первый пользователь, который поделится URL-адресом Facebook, не увидит обработанное изображение.
Вы можете избежать этого, запустив URL-адрес через отладчик Facebook для предварительной выборки метатегов для страницы, а также можете указать размеры изображения с помощью тегов og: image: width и og: image: height, чтобы сканер мог отобразить изображение сразу.
Заключение
Open Graph - это собственный зверь, и это лишь некоторые из основ, которые вам понадобятся, чтобы начать работу по оптимизации своего сайта для социальных сетей.
После того, как вы установили свои теги, появятся более продвинутые теги Open Graph для социальных сетей, с которыми вы можете играть, а также новые способы продвижения вашего бизнеса через социальные сети.
Социальные сети перестали быть просто бесплатной платформой для стажера компании и стали надежными рекламными опциями, которые заслуживают вашего внимания. Разделы магазина а также Проверять, выписываться на Facebook и Pinterest, позволяя пользователям делать покупки напрямую, используя Покупаемые булавки ,
Что такое открытый график?Помогает ли Open Graph повысить ваш рейтинг в поисковых системах?
Ссылка на мой веб-сайт в любом случае является общей, так зачем же все эти проблемы?
Но как они выглядят?
Что такое открытый график?
Помогает ли Open Graph повысить ваш рейтинг в поисковых системах?
Все еще не убежден?
Но как они выглядят?
Итак, как же на самом деле выглядит весь этот гигантский джамбо?
