Ближе к людям, или Что такое Open Graph

60 комментариев

open graphДоброго времени суток, сеньоры и сеньориты! Готова спорить, что многие из вас слышали про разметку Open Graph. Впрочем, я сужу по себе — это я именно «слышала» про Open Graph, будучи уверена, что это что-то из арсенала тру-вебмастеров, нечто замороченное и недоступное для моего пушистого мозга. Вполне возможно, что вы уже давно используете возможности опен-граф разметки для повышения привлекательности своего блога в соцмедиа.

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

Что такое Open Graph

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

Опен граф дает нам возможность управлять внешним видом анонсов статей, которые пользователи отправляют в социальные сети, «лайкая» и «плюсодинкая» наши статьи. За примером далеко ходить не надо. Вот как сейчас выглядит анонс моей статьи (покажу на примере поста про Gigahost), когда вы, друзья, нажимаете на фейсбуковскую кнопку расшаривания: open graph

Согласитесь, как-то не очень (а я бы даже сказала — полная ерунда).

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

Во-вторых, название и краткий текст анонса берутся из названия и мета-тега «дескрипшен» записи. Опять-таки, меня это не устраивает. Название для анонса с соцсети можно было бы подобрать и более кричащее и завлекающее кликнуть по нему. А сам анонс, который берется из дескрипшена, тоже неплохо было бы заменить на нечто более информативное.

Тут вообще-то в чем дело? Анонсы в соцсетях предназначены исключительно для людей, а мы им предлагаем скучные мета-теги, которые изначально писались для разумных без сомнения, но малоэмоциональных роботов ПС (хотя насчет малоэмоциональности Яндекс-бота есть у меня сомнения — подозреваю, что это существо трепетное, мнительное и обидчивое 🙂 ).

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

Мета-теги Open Graph

Для наших целей будем использовать три основных обязательных мета-тега:

  1. og:image — в этом теге прописывается адрес картинки, которую мы хотим видеть в анонсе. Заметьте, что теперь вовсе не обязательно использовать только те иллюстрации, которые мы вставляли в текст записи. Указать можно совершенно любую картинку, которую вы сочтете нужным.
  2. og:title — здесь указывается заголовок вашего анонса. И если на блоге мы пытаемся сделать его максимально информативным, «цепляющим», да еще и с ключевыми словами, то здесь можно дать волю фантазии и «продать» свою запись по полной!
  3. og:description — ну а в этом теге и прописывается, собственно, текст анонса. Обратите внимание на то, что facebook подхватывает около 300 символов, так что больше писать не имеет смысла. Но это явно больше, чем те 160 символов, которые предлагаются нам для обычного дескрипшена (напишете больше — ПС то ли обрежут, то ли вовсе проигнорируют).

Ну  а теперь пару замечаний в завершение.

Во-первых, почему я вообще уделила Open Graph столько внимания? Ответ очевиден: в соцсетях сейчас львиная доля трафика. Мало того, тот же фейсбук является вторым по величине донором трафика — то есть из фейсбука огромное число переходов на другие сайты. Полагаю, хотя специально статистику не искала, что ВКонтакте в России тоже поставляет огромный процент посетителей. Так почему бы этим не пользоваться и не увеличивать привлекательность своего анонса для вконтачившихся и зафейсбученных наших сограждан?

опен граф

Во-вторых, на данный момент протокол Open Graph «понимают» Google+, Facebook и ВКонтакте. Возможно, и другие, но точных данных у меня нет. Впрочем, основная масса юзеров сидят именно в этих социалках.

В-третьих и в-главных, теория — это хорошо, но я ни слова не сказала о том, как же на практике встроить Open Graph протокол на блог WordPress. Дело в том, что я готовлю статью об одном со всех сторон замечательном seo-плагине для WordPress — Seo Ultimate, одной из функций которого как раз и является добавление к записям опен граф мета-тегов.

Впрочем, для тех, кто не хочет ради одной, пусть и замечательной возможности, переходить на open graphдругой сео-плагин, есть простое решение — плагин Open Graph. Он добавит соответствующие поля на страницу редактирования записей. Полагаю, с его установкой вы справитесь самостоятельно. Ну а вопросы — по традиции в комментарии.

Вот так вот, друзья мои… «Мир интереснее, чем нам кажется»… Засим изволю откланяться.

Была с вами, как обычно, всегда ваша пушисто-печальная Web-Кошка. До новых взаимно-приятных встреч на моем Авторском блоге!

60 коммент.
  1. По счастливой случайности до этой статьи не знал о такой разметке. 🙂
    Интересное решение, но думаю, что малоэффективное. В последние пару месяцев трафик из соц.сетей на моем блоге вырос в несколько раз. Но это не результат клацанья по кнопкам соц.сетей, а ручное добавление анонсов на их страницы. Тут, наверное, еще зависит от тематики, мне, например, завлекающий заголовок будет трудно придумать.

    • Василий, конечно, вручную добавлять анонсы — оно завсегда лучше :). Как раз и сам анонс можно нормальный написать, и картинку добавить и т.д.
      Но когда запись репостят другие люди, особенно если таких репостов набирается много, то хочется как-то управлять их внешним видом. «Бог в мелочах», не так ли?

  2. Лариса, увидел у вас, что поиск Яндекса можно сделать под цвет сайта. Наверное, все-таки сделаю. Заколебал он своими причудами. Предпоследнюю статью уже неделю не хочет индексировать, хотя приходило сообщение, что поисковые базы были обновлены. Написал про малоизвестную программу, трафика с этой статьи практически не будет, а тут еще Яндексу что-то не нравится. А его поведение мне уже не нравится, сколько еще времени он будет ее индексировать. Если правда, то, что наличие поиска Яндекса ускоряет индексацию, то тогда его нужно ставить.

    • В сочетании с пингер-плагином от Яндекса я у себя эффект заметила. Уж в любом случае хуже не будет… Хотя да, бывают такие случаи, когда статья упорно, несмотря ни на что, не индексируется очень долго. Даже не представляю, с чем это может быть связано.
      А внешний вид настраивается очень тонко, вот здесь я рассказывала и показывала весь процесс — /bazovy-e-znaniya/yandex-poisk-dlya-saita-ya-pinger-plagin.html

    • Быстробот Яндекса — это очень странная субстанция =) Как будто бы и не бот вовсе. Или у них там стоят определенные фильтры на контент. Вот например, моя статья про облако от мэйл до сих пор не проиндексировалась, две недели уже прошло (видимо не хотят они статью про прямого конкурента индексировать). Зато последняя статья влетела в индекс очень быстро. Да, поиск и пингер определенно помогает, но не во всех случаях. Так что, лучше не тратить себе нервы по этому поводу. Все равно силком в индекс статью не отправить.

      Что касается Open Graph, раньше слышал о нем вскользь, но как-то не обращал внимания. А ведь «вещица-то» полезная. Особенно в ФБ анонсы коряво выгружаются.

      • Последнюю недавнюю статью уже и Гугл и Мэйл.ру проиндексировали, а Яндекс не спешит. До этого вроде бы нормально индексировал.

        • У меня также с предпоследней статьей.

          • Сейчас я узнал еще о многих интересных вещах. Из индекса выпали еще две недавние статьи. Моя статья про Облако Mail.ru была проиндексирована и находилась в выдаче. Сегодня посмотрел, оказалось, что статья с сегодняшнего дня была удалена с выдачи. Выяснил, что уже неделю по этому запросу каждый день на сайт в среднем приходило более 50 посетителей. Это значит, что статья была на самых верхних позициях по этому запросу. Еще вчера она была там, а сегодня ее вообще нет в индексе. Яндекс не понизил, например, а вообще исключил ее из индекса. Как это понимать?

          • Василий, так и у меня проблемы тоже именно с этой статьей =))

          • Ладно бы просто не индексировали, а то ведь уже проиндексированную статью выкинули. Обидно то, что статья, оказывается, была в лидерах выдачи.

          • Через три дня, сегодня, Яндекс вернул статью про Облако Mail.ru в индекс. До этого она была на 2 месте в Топе, очевидно, вслед за самой Mail.ru. Теперь эта статья уже на 6 месте, трафик стал меньше в несколько раз (радует, что он вообще появился).
            Вот такие фокусы выкидывает Яндекс, хотя он мой друг. Половина всего трафика оттуда.

          • Василий, у меня тоже эта статья наконец-то «влетела» в индекс. Позиция пока не снимал. В гугле с нее идет траф.

            Что касается трафика вообще, у меня пропорции примерно 20-25 на 80-75. Большее — это естественно, Гугл. С Яндексом все сложнее.

    • Простите за дилетантский вопрос. А как вы узнаёте о том, проиндексировал ли Яндекс какую-либо или, например, последнюю вашу статью?

      • Самый простой способ — это вставить ссылку на ту страницу в поисковую строку Яндекса. Если Яндекс покажет эту страницу в результате выдачи, то тогда вы будете знать, что она проиндексирована.
        Еще об индексации можно узнать в Вебмастере Яндекса. Там нужно будет зарегистрировать свой сайт, и тогда можно получать по нему различную информацию. Есть расширение для браузера RDS bar, с его помощью тоже можно узнать, была страница проиндексирована или нет.

  3. Александр Викторович

    Добрый день Лариса. Каждый раз нахожу что то новенькое. Об этом пинге услышал первый раз. Анонсы в соц сети отправляю и автоматически (если можно) и вручную, так что, нужно попробовать. Говорят, что на индексацию в Яндексе положительно влияют анонсы в твитере. А вообще Яндекс все индексирует гораздо медленнее. Например Гугл про индексировал у, меня 70 картинок, а Яндекс 0. Вот такая разница. Спасибо, за подсказку.

    • Единственное, что приходит в голову, если говорить об индексации Яндексом, — что ему элементарно не хватает мощностей.
      И кстати, у меня тоже нет ни одной картинки в индексе Яндекса, что по меньшей мере странно… Ладно, пусть неуникальные картинки не индексируются, я согласна. Но у меня-то большинство моих собственных уник. скринов…
      И немножко поправлю, Александр Викторович, Open Graph — не пинг-сервис, а именно протокол передачи данных с соц.сети. И тут дело не столько в быстрой индексации, сколько в повышении кликабельности анонса статьи во френд-лентах, то есть в увеличении числа переходов на блог.

      • Я думаю, что картинки не индексируются не из-за уникальности. Наверное, что-то другое не нравится Яндексу.
        У меня практически нет уникальных картинок, а картинок на сайте огромное количество (приближается к двум тысячам). Поисковики их индексируют, правда, не знаю как быстро они это делают. знаю, что с картинок по несколько человек в день заходят на сайт, а ведь это всего лишь скриншоты программ. 🙂

        • У меня картинки в яндекс попали, меньшее число, чем в Гугл, конечно, но попали. А переходов с них совсем мало. Конечно, если картинок будет не одна тысяча, да и сайт в топе по многим позициям, тогда и с картинок будет неплохой трафик. Так что, забывать про картинки не стоит с самого начала =) Главное не переусердствовать с альтами и тайтлами, а то санкции можно получить, как недавно случилось у КтоНаНовенького

          • Разве санкции к нему применили только из-за картинок? Когда они сняли с его сайта рекламу Яндекс.Директ, то он не смог даже узнать причину этого даже через директора Профит-Партнера.

          • Ну ему в целом сказали, что за переоптимизацию. И про картинки, в частности, ему тоже указали.

          • А что там можно переоптимизировать? Имя, альт, описание. Что там такого можно сделать?

          • Переоптимизация — это у него в целом по блогу. А в изображениях, слишком много прямых вхождений по ключам.

      • Александр Викторович

        По поводу протокола я понял его назначение, просто немного не так выразился. А с фотками думаю наладится, у меня много своих фото и использую фото товара от партнера (это законно), проверял их на уникальность, все уникальные. Любое изображение элементарно делается уникальным с помощью графического редактора.

      • Об индексации картинок Яндексом. Я часто проверяю свой блог у cy-pr.com . Там Google индексирует, например, 547 картинок, а Яндекс — 0. Но когда я нажимаю на этот 0, то выводится несколько сотен моих картинок. Правда, только сегодня поле нажатия на тот 0, я увидел всего лишь 4 моих картинки.

        • Сергей, а ведь верно! Я тоже всегда судила по этому нулю в cy-pr.com, а на самом деле сейчас благодаря Вам узнала, что у меня 34 картинки в индексе. Спасибо большое 🙂 !

          • Это «Спасибо» надо адресовать Елене Олейниковой. Это её подсказка.

        • Давно нигде не встречала Елену, к сожалению…

          • На моём блоге есть её комментарий к моей последней записи «Лес осенний» и, соответственно, адрес её блога.

  4. А мне лениво заполнять мета-теги для ПС, не то что всякую ересь писать еще и под соц. сети. Хотя в нескольких последних статьях я долго продумывал описания и показать их не стыдно. Но все равно мне пока трафик с контакта только снится.
    А вот яндекс пинг действительно крутая вещь. Новые статьи индексируются в течение максимум часа. Даже гугл теперь отстает. Но думаю это пока. Через месяц эффект пройдет. Мне кажется это уловка яндекса ставить свои коды на сайты. А может я не прав. Но от многих слышу, что вначале плагин работает, а со временем начинает глючить.

    • Привет! 🙂 Никогда не слышала о глюках этого плагина. Просто всему есть предел, а со временем скорость индексации растет и сама по себе.
      А уловка — ну да, только она как палка о двух концах: кто же будет держать у себя плагин, который не работает. Вот поэтому, чтобы коды и плагин не сносили, Яндекс и индексирует статьи получше. Впрочем, это только ИМХО.
      Единственный глюк с Пингером, который я встретила — вовсе не глюк оказался))) После смены хостинга плагин вообще перестал работать, но оказывается, при смене IP сайта нужно заново получать ключ для этого плагина.

      • Глюк — это может я не очень корректно выразился, но многие почувствовали его избирательность. У меня тоже все с ним в порядке пока что (пошел стучать по дереву)…

      • О, точно, Лариса. А я про это бы даже и не подумал =) Кстати, ты сегодня будешь в скайпе? А то я «переезжать» сегодня буду, наверное 🙂

  5. Я то хоть и помещаю ссылки на свои записи на блоге в социальные сети нажатием на кнопки, только они висят там сотнями безответными. Хотя в тех сетях у меня много друзей и даже родственников. Но никто моими записями-роликами не интересуется. Попробую Open Graph. Не заработка ради, а интереса для. Спасибо, Лариса, за информацию.

  6. Лариса, наконец-то я добралась до твоего блога, чтобы сказать спасибо за эту статью. До сих пор меня бесило, что соц.сети цепляют любую картинку из поста, в MODX этот вопрос я давно решила, теперь знаю, что делать и в WP.

    • Оля, очень приятно знать, что статья действительно принесла пользу 🙂 .

  7. Web Кошке ссылочка на котят с космического сайта
    http://forum.plesetzk.ru/viewtopic.php?f=7&p=217375#p217375

    • Сергей, и очередное спасибо! Котята, как обычно, очаровательны! Спасибо и за то, что не забываете про меня)))

  8. Спасибо, плагин интересный. Но трафик из соцсетей на мои сайты идёт небольшой, от 1 до 10 посещений в сутки. Имеет ли смысл его ставить пока не решила.

    • Татьяна, здравствуйте! Так и смысл плагина как раз в том, чтобы попытаться увеличить трафик с соцсетей за счет более привлекательного представления там своего контента.

  9. у вас картинка при постинге в социалки берется кошка…. а она к другому посту относиться…. так и должно быть?

    • Подловили)) Я на этом блоге никакие open-grapf теги не указываю, да и тайтлы даже не всегда пишу — а UpToLike иногда ведет себя непредсказуемо и выдергивает картинки на свое усмотрение. Вообще при расшаривании есть возможность пролистать картинки при желании, а так я благодарна за любое нажатие «поделиться».

      • понятно, я на своем самописе http://aforizmus.com/ обязательно буду настраивать…. почитал на хабре толковую статью про социальный трафик…

        • Сссылочку скиньте, если не трудно) Я тоже почитаю.

          • Тонкости SMO. Не удивляйтесь что у вас нет социального траффика habrahabr.ru/post/222245

            и действительно, отправляется в сети мрак… если не настроено )

          • Классная статья (хабр). На самом деле все так. И даже AIOSP не корректно с OG работает. Если уж все по хорошему делать, то, наверное, только ручками.

        • Гм… А в чем выгода самописа?

          • эээ самопис это сайт который с ноля пишешь сам, выгод море:
            1. делаешь именно то, что тебе нужно;
            2. не ограничен ничем (в движке только то, что позволяет движок)

            у движков масса недостатков — тяжелые, ограниченные, дырявые и всего один плюс — можно быстро сделать сайт/блог

          • конечно и на ВП можно сделать конфетку… но мне как программеру приятней трудиться над своим а не большим напильником потеть с чужим движком )

          • В принципе, согласна — если сайт небольшой и сам программер, то почему нет. Просто буквально вчера общалась с человеком, их компании сделали свою цмску за безумные деньги, сайт предполагался статический. Сейчас они решили блог сделать там, изменения внести — а разрабов и след простыл… просят на адекватный популярный движок переносить…

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

  11. Лариса привет! ) Ничего, что я сразу на «ты»? Сайт твой знаю давно, а вот обращаюсь только сейчас и на это есть причины. Я вообще, когда попала на эту статью с поиска, чуть ума от радости не лишилась. )) Объясню…

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

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

    Мне подсказали, что нужна разметка Open Graph. Собственно, вопрос-просьба. Лариса, а как правильно вписать эту разметку в код и куда именно? Можно подробную инструкцию, так как я профан в этих кодах. (

    • Привет))
      Если используешь All-in-One Seo Pack, то загляни на его вкладку «Социальные сети» — это на странице редактирования статьи, а не в настройках. Там можно указать картинку, которая отправится в соцсети с анонсом.

  12. Установила пока плагин. Я правильно понимаю, что он не настраивается? Тогда он для анонса берет самый первый абзац.

  13. У меня All In One SEO Pack Версия 2.2.5.1 Честно говоря ни на странице редактирования, ни в самих настройках плагина я ничего для соц сетей не нашла.

  14. хм, Ларис, кажется чет нашла… Другие модули называется. Там есть модуль Соц.мета. Вот его и нужно активировать да? А он не помешает ничему?

    • Вот, оно) Не успела я написать)
      Да, его активируй, тогда при написании статьи появится в плагине вкладка social setting, а там можно выбрать нужную картинку. Ничему не помешает.

  15. Вот не пойми как выделить теrст и вставить его в WordPress

  16. Ответе мне правда очень интересно нигде нет такой информации

  17. Лариса, огромное спасибо за вашу статью, мучилась бы я еще очень долго, если бы не Вы.
    Установила данный плагин, только вот настроить не могу( знаний не хватает. Проблема на сайте остается, выкладывает в пост что попало. http://www.mydelf.com

  18. Здравствуйте! Помогите пожалуйста. При нажатии на кнопку репост в facebook или vkontakte, подтягивает не ту картинку? Заранее спасибо)))

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *