- Открыть График
- Карты Твиттера
- Открыть График
- Карты Твиттера
- Открыть График
- Карты Твиттера
- В заключение
Наша коммерческая группа Artmisto.net
Добавив несколько простых социальных мета-тегов на ваш сайт или блог, вы можете улучшить отображение своего контента в социальных сетях, таких как Facebook, Twitter, LinkedIn и Google+. Это улучшает видимость и увеличивает трафик, делая ваши обновления более привлекательными как для кликов, так и для общего доступа.
В конце концов, когда вы используете правильное изображение, описательный текст и т. Д. Для спонсируемого обновления в социальных сетях, вы можете улучшить взаимодействие (включая переходы по ссылкам) часто на 100 процентов.
Тот же принцип применяется к обычным обновлениям - обычные, ежедневные, обычные обновления социальных сетей - и социальные мета-теги - это то, как вы контролируете именно то, что отображается, включая:
- Название
- Описание
- Изображение
вам нужно добавить социальные мета-теги.
В качестве быстрого примера того, как это может измениться, вот что будет показано в Twitter для кого-то, кто поделился URL-адресом блога (http://blog.vwriter.com), прежде чем я использовал правильные теги:
Без правильных социальных метатегов вот так будет выглядеть блог в Twitter
(Обратите внимание, я использую Twitter Валидатор карт инструмент для этих примеров - больше информации об использовании этого ниже).
Как видите, не слишком привлекательно для тех, кто хочет поделиться или щелкнуть, верно?
И вот как это выглядит после того, как я добавил несколько специальных метатегов:
Как только правильные теги были добавлены, происходит значительное улучшение
Как вы можете видеть, есть большая, большая разница. Это привлечет больше акций, больше кликов, больше вовлеченности в целом.
Стоит делать? Абсолютно. И хорошая новость заключается в том, что это основополагающий шаг для вашего сайта и / или блога (оба мы рассмотрим в этом окончательном руководстве). Позаботьтесь об этом один раз, и тогда вам действительно не придется думать об этом снова.
Как я покажу вам ниже, это также относительно быстро и просто сделать.
И да и нет.
Там нет прямой выгоды для вашего рейтинга в поиске.
Но есть косвенное преимущество, которым можно пользоваться.
Если ваш контент стал более общедоступным и активным в результате использования этих тегов, вы с большей вероятностью будете привлекать ссылки с других веб-сайтов к своему контенту.
Например:
- Больше людей увидят и узнают о вашем контенте.
- В вашем списке будет больше людей для общения и информирования о вашем контенте (т.е. через преобразование доли вашего трафика в электронную почту ).
- Повышенный уровень обмена информацией укрепит авторитет и доверие к вашему контенту и будет стимулировать создание ссылок.
Эти естественные ссылки на ваш контент укрепляют ваш авторитет и повышают рейтинг.
Существует два основных типа тегов, которые необходимы для максимизации результатов в социальных сетях:
- Открытые графические теги
- Теги Twitter-карты
Я расскажу оба из них ниже с точки зрения того, как на самом деле установить и использовать их, но вот краткий обзор того, что эти теги на самом деле и как они работают.
Оба типа являются метатегами , которые отображаются в разделе <head> исходного кода HTML на разных веб-страницах вашего сайта. Мета-теги существуют для того, чтобы сообщить программным роботам или «ботам» больше информации о странице, что в противном случае им пришлось бы попытаться найти что-то другое.
Возможно, вы более знакомы с тем, как мета-описание и ключевые слова на вашем сайте помогают поисковым системам понять, о чем идет речь на конкретной странице (хотя и с гораздо меньшей важностью, чем в прошлые времена).
Мета-тег описания также помогает определить (хотя и не полностью контролировать) то, что на самом деле отображается при поиске вашей страницы. Использование правильного текста может помочь привлечь клики, а более высокий рейтинг кликов может улучшить ваш рейтинг.
Пример, показывающий, как мета-тег описания помогает определить, что отображается для веб-страницы в поисковых системах
Социальные метатеги работают аналогичным образом для социальных сайтов. Когда социальное обновление содержит ссылку на страницу на вашем сайте, социальные боты просматривают ваш сайт, чтобы определить, какую информацию отображать.
Если они найдут метатеги социальных сетей, они будут использовать содержащуюся в них информацию, как показано ниже. В противном случае, они делают лучшее предположение о том, что отображать, что обычно не оптимально.
Социальные мета-теги на вашей странице точно определяют, как будет выглядеть социальное обновление. В этом примере показаны теги Open Graph, используемые Facebook и другими социальными сайтами, которые дополнительно рассматриваются ниже.
Открыть График
Протокол Open Graph был создан Facebook и определяет теги, которые вы можете использовать на веб-странице, которые затем могут быть прочитаны социальными платформами. Теги определяют, что будет показано пользователям в соответствующем социальном обновлении.
Открытые графические теги распознаются facebook , а также большинство других социальных сетей, таких как LinkedIn и Google+. Twitter также использует теги Open Graph, если нет эквивалентных тегов Twitter Card (см. Ниже).
Типичный тег Open Graph выглядит следующим образом:
<meta property = "og: title" content = "Общее руководство по мета-тегам в социальных сетях: открытые графики и твиттер-карты" />
Это тег og: title , определяющий, что будет отображаться как заголовок в социальном обновлении.
Полный список тегов Open Graph, которые вы можете использовать, выглядит следующим образом (если вы думаете, что это начинает выглядеть сложным, проще, чем вы думаете, добавить эти теги, как я покажу вам ниже - просто придерживайтесь его сейчас !):
- og: locale Необязательно, по умолчанию используется en_US, что подходит для большинства английских веб-сайтов, будь то внутри или за пределами США.
- og: type Это необязательно - если он не указан, по умолчанию используется веб-сайт. Другой вариант - статья , которую вы должны использовать, например, для сообщений в блоге (см. Раздел ниже о добавлении таких тегов в блог).
- og: title Заголовок страницы или статьи.
- og: description Описание страницы или статьи, должно отличаться от og: title
- og: image Полный URL для изображения, которое вы хотите показать. Так что http://yoursite.com/image.jpg , а не /image.jpg.
- og: url Полный URL-адрес веб-страницы, к которой вы добавили тег, без каких-либо параметров после ссылки. Так что http://yoursite.com/page.html , а не /page.html или, например, с отображением параметров, http://yoursite.com/page.html?category=2
- og: site_name Название вашего сайта. Это не означает, что ваше доменное имя, хотя оба могут быть одинаковыми. Как пример, Facebook, а не facebook.com.
Ниже приведены подробные инструкции по их добавлению на ваш сайт, а также пример для подражания.
Карты Твиттера
Карты Твиттера означают, что когда кто-то пишет в Твиттере ссылку на ваш контент, другой контент автоматически присоединяется к твиту (например, фотографии, видео и другие медиа). Это делает твит гораздо более увлекательным, чем могло бы быть в противном случае.
Как владелец контента, вы имеете полный контроль над тем, что Твиттер-карта на самом деле показывает.
В качестве примера того, как это работает на практике, SlideShare внедряет карты Twitter на своем сайте. Итак, когда вы создать SlideShare и Tweet об этом, а не основной Tweet, как это:
Это то, что вы бы увидели в твиттере, ссылающемся на SlideShare, если бы они не использовали карты Twitter
Вы действительно видите медиа - то есть презентацию SlideShare - прикрепленную к самому твиту:
[SlideShare] Интернет-контент работает круглосуточно, чтобы привлечь людей в ваш бизнес: о чем писать. https://t.co/SIlJOPH2IP
- vWriter.com (@vwriterit) 29 января 2016 г.
(Если в нечетном случае SlideShare не появляется, попробуйте перезагрузить эту страницу).
Это не отличается на вашем собственном сайте. Например, вот твит предыдущий пост в блоге к нему прикреплена карточка Twitter с изображением избранного сообщения и резюме:
Легко начать пользоваться SlideShare на регулярной основе. #Онлайн маркетинг https://t.co/7MpGN0JNgY
- vWriter.com (@vwriterit) 27 января 2016 г.
Реализация Twitter-карт на вашем собственном сайте, о которых я расскажу более подробно ниже, включает использование тегов, очень похожих на теги Open Graph выше. Вот один из таких примеров:
<meta name = "twitter: title" content = "Как использовать ваше сообщение в блоге в качестве презентации SlideShare (и получить больше видимости, авторитета и трафика в Интернете!) - Блог vWriter" />
Это, конечно, тег twitter: title , похожий на тег Open Graph og: title выше.
Вот полный список тегов Twitter Card, которые вам нужно использовать:
- twitter: card Определяет тип карты использовать. Вот варианты выбора (фактическое значение для установки в метатеге выделено курсивом, хотя дополнительная информация приведена ниже):
- Сводная карта ( контент ) - показывает маленькое изображение с кратким текстом
- Сводная карта с большим изображением ( summary_large_image ) - как в примере Tweet выше, показывает увеличенное, более заметное изображение вместе с текстом резюме
- Карта приложения ( приложение ) - актуально только если вы разработчик мобильных приложений
- Карта игрока ( проигрыватель ) - разрешает видеоклипы, аудиопотоки и другие медиафайлы, как в примере с SlideShare выше
- twitter: title Название страницы или статьи, как в og: title выше.
- twitter: description Описание страницы или статьи, эквивалентно og: описание выше.
- twitter: site Ваше имя пользователя в Twitter, например, для этого сайта это @vwriterit
- twitter: image Полная ссылка на изображение, которое вы хотите использовать для страницы, эквивалентно og: image . Не должно быть общего или обще-сайтного изображения, но должно относиться к рассматриваемой странице.
- twitter: creator При желании вы можете установить это как имя пользователя Твиттера создателя контента. Относится только к твиттеру : карта имеет значение summary_large_image.
Так как же вы на самом деле добавляете все эти теги на свой сайт для реализации карт Open Graph и Twitter?
Это то, что я расскажу дальше:
- Сначала я покажу вам, как добавить социальные метатеги на сайт, отличный от Wordpress.
- Затем я расскажу о добавлении их в ваш блог WordPress с помощью специальных плагинов.
- В последнем разделе я покажу вам, как использовать специальные инструменты онлайн-проверки для проверки правильности установки тегов.
Добавление тегов к сайтам, отличным от Wordpress, означает простую ручную настройку кода на ваших страницах. По этой причине это более техническая и трудоемкая работа, чем для сайтов, работающих на WordPress.
Прежде чем продолжить, проверьте, какие теги у вас уже могут быть, посмотрев исходный код вашего сайта и выполнив поиск, например, og: type и twitter: card. Если у вас уже есть некоторые или все из них, проверьте, появляется ли информация для социальных обновлений, как вы этого хотите (см. Последний раздел ниже о проверке тегов).
Открыть График
Следующие теги Open Graph необходимо добавить в раздел <head> каждой страницы вашего сайта. Это шаблон, из которого вы можете скопировать, а затем настроить его с вашей собственной информацией.
См. Выше для получения дополнительной информации об информации, которую должен содержать каждый тег.
<meta property = "og: locale" content = "en_US" />
<meta property = "og: type" content = "article" />
<meta property = "og: title" content = "Название вашего контента здесь" />
<meta property = "og: description" content = "Описание вашего контента здесь" />
<meta property = "og: url" content = "http://www.yoursite.com/yourcontent.html" />
<meta property = "og: site_name" content = "Название вашего сайта" />
<meta property = "og: image" content = "http://www.yoursite.com/yourimage.jpg" />
После добавления на страницу см. Раздел ниже о том, как проверить правильность добавления тегов.
Карты Твиттера
Аналогичным образом, вот шаблон, который вы можете использовать для тегов Twitter Card. Опять же, то, что установить в качестве значения каждого тега (т. Е. Бит контента ), описано выше.
<meta name = "twitter: card" content = "summary_large_image" />
<meta name = "twitter: title" content = "Название вашего контента здесь" />
<meta name = "twitter: description" content = "Описание вашего контента здесь" />
<meta name = "twitter: site" content = "@yourusername" />
<meta name = "twitter: image" content = "http://www.yoursite.com/yourimage.jpg" />
<meta name = "twitter: creator" content = "@yourusername" />
Обратите внимание, что последний тег имеет значение только в том случае, если для twitter: card установлено значение summary_large_image, как указано выше.
См. Последний раздел ниже, чтобы проверить, правильно ли реализованы карты Twitter.
Благодаря определенным плагинам WordPress добавление социальных мета-тегов в блог становится намного проще и в значительной степени позаботится о вас.
Тем не менее, это все еще требует осторожности. Разные плагины могут создавать теги, и даже ваша тема WordPress может делать это, поэтому первым шагом должна быть проверка исходного кода вашего блога, чтобы точно узнать, что отображается. Например, вы не хотите, чтобы теги Open Graph добавлялись несколько раз.
Хотя таких плагинов много, я считаю, что лучшим плагином для добавления метатегов в социальные сети является Yoast ,
После того, как вы установили плагин - или, возможно, он у вас уже есть - вот как вы его настроили для создания тегов:
Перейдите в социальные настройки для плагина.
- Нажмите на вкладку Facebook
- Нажмите, чтобы добавить метаданные Open Graph - это автоматически создаст теги Open Graph, необходимые для всех ваших сообщений и страниц.
Отметьте опцию, чтобы добавить метаданные Open Graph
- При желании установите заголовок, описание и изображение для главной страницы вашего блога с помощью настроек Frontpage:
- URL-адрес изображения: установите этот параметр, чтобы избежать использования изображения из недавнего сообщения в блоге при публикации ссылки на ваш блог. Например, это изображение, которое я использую:
Изображение, которое я установил в тегах Open Graph на главной странице этого блога
- Название и описание : установите их, только если вы хотите, чтобы информация отличалась от той, которую вы уже указали в качестве Название блога и мета-описание ( Титулы и Метас в Йоасте )
- URL-адрес изображения: установите этот параметр, чтобы избежать использования изображения из недавнего сообщения в блоге при публикации ссылки на ваш блог. Например, это изображение, которое я использую:
- В разделе « Настройки по умолчанию» установите URL-адрес изображения таким же, как и URL-адрес изображения выше - это означает, что будет использоваться подходящее изображение, даже если конкретный пост или страница не содержит изображений
- Нажмите Сохранить изменения
- Настройка вашего блога для использования тегов Twitter Card еще проще:
- Нажмите вкладку Twitter
- Установите флажок « Добавить метаданные карты Twitter» и выберите тип карты, которую вы хотите использовать.
- Нажмите Сохранить изменения
Добавить Twitter-карты в свой блог легко с помощью плагина Yoast
вам нужно добавить социальные мета-теги.
Дважды проверьте, что ваши социальные мета-теги отображаются именно так, как вы хотите. Для этого доступны следующие инструменты проверки и для Open Graph, и для карт Twitter.
Не забудьте проверить больше, чем просто одну страницу. Например, проверьте домашнюю страницу вашего блога вместе с отдельным постом.
Открыть График
Инструмент проверки открытого графика Facebook позволяет вам увидеть, как будет выглядеть страница при публикации на основе предоставленных вами тегов.
- Проверьте наличие ошибок и исправьте их. Например, при проверке тегов в этом блоге я обнаружил, что в моих сообщениях было установлено более одного og: url , что было вызвано тем, что Yoast и моя тема создавали теги Open Graph.
Примите к сведению любые ошибки, чтобы вы могли затем пойти и исправить их
Карты Твиттера
Используйте инструмент проверки карт Twitter, чтобы проверить, правильно ли вы внедрили карты Twitter.
- Обратите внимание, что это говорит о белых списках, но это автоматически. Если вы видите какие-либо ошибки, связанные с белым списком, внимательно проверьте свои теги, чтобы убедиться, что они правильные и что данная страница полностью доступна для просмотра в Твиттере.
В заключение
Теперь у вас есть все, что вам нужно знать, чтобы использовать все преимущества социальных метатегов для своего сайта, оптимизировать общие ресурсы, переходы по ссылкам и многое другое.
Сделать это очень просто и получить шпаргалку для добавления социальных метатегов - это дает вам:
- Все нужные вам теги готовы скопировать и вставить.
- Простые определения каждого тега, чтобы вы точно знали, как настроить свой собственный сайт.
- Ссылки на нужные вам инструменты проверки.
Похожие
Open Graph Drupal: окончательное руководство по Drupal 8... графика , Настройка метаданных в Drupal 8 с модулями Metatag и Token К счастью, Drupal не нужно вставлять пальцы в код для настройки этих тегов. Для их установки достаточно загрузить модуль Metatag с зависимостью Token и настроить поля сайта, которые будут привязаны к типам данных. Настройка метаданных Open Graph на Drupal: тематическое исследование Возьмите пример туристического сайта Sophie's Travels. Этот сайт, для общения по своим Почему местные ритейлеры должны использовать разметку Open Graph
В ноябре прошлого года Крис Шерман выделил результаты исследования Forrester в своей статье Forrester Rates Лучшие крупные маркетинговые агентства , Как отметил Крис, отчет Forrester задал и ответил на этот вопрос: «С какими самыми большими проблемами в области поискового маркетинга вы ожидаете столкнуться в ближайшие два года?» Сегодня я убежден, что выводы Полное руководство по социальным медиа SEO для бизнеса
Когда дело доходит до развития вашего бизнеса, большинство компаний понимают, что поисковая оптимизация - это необходимость маркетинга. Гораздо реже признают повышающий потенциал социальных сетей. И то, что слишком часто упускается из виду, это удивительная сверхдержава, которая является SEO в социальных сетях. Во время встреч с клиентами по веб-дизайну я часто слышу: «Мы не занимаемся социальными сетями, мы не видим смысла». Это мышление должно измениться! Социальные медиа обязательно Многое изменилось с тех пор, как Google выпустил руководство по SEO. Несмотря на то, что он был опублико...
Многое изменилось с тех пор, как Google выпустил руководство по SEO. Несмотря на то, что он был опубликован всего семь лет назад, это по сути эон онлайн. SEO Starter Guide долгое время было популярным ресурсом для поисковой оптимизации. Что такое базовый план SEO?
Это вопрос, который нам задают довольно регулярно. Перспективы и клиенты хотят знать, какую базовую SEO (поисковую оптимизацию) они должны делать или должны были сделать для своего сайта. Существует базовый набор SEO задач, которые необходимо выполнить. Кое-что из того, что может сделать большинство наших клиентов, и что-то, что мы обычно должны делать. Поисковая оптимизация (SEO) стала проще
Для Обычного Джо SEO может также означать Slippery Edible Octopus, как Search Engine Optimization - это широко расценивается как «темное искусство», таинственный, сложный процесс, который могут понять только гении и компьютерные гики. Хотя это правда, что есть некоторые сложные и специализированные элементы, используемые веб-гуру, есть много простых вещей, которые может создать средний Джо, чтобы повлиять на онлайн-рейтинг. SEO для изображений: полное руководство (с контрольным списком)
Изображения важны для SEO. Недавнее исследование, в котором подробно проанализирован 1 миллион результатов поиска Google, пришло к выводу, что веб-страницы с хотя бы одним изображением имеют лучший рейтинг, чем контент без изображений. Из этого Руководства по SEO для изображений вы узнаете, как оптимизировать ваши изображения для большей наглядности в поисковых системах. Руководство по чистоте URL для SEO и юзабилити
Чистый URL - это тот, который легко читается и не содержит никаких строк запроса или параметров URL. Посмотрите на URL ниже: http://example.com/services/index.jsp?category=legal&id=patents Этот URL-адрес не так просто описать заголовок или содержимое страницы. Эти биты текста: index.jsp? Category = и & id = , являются параметрами URL, которые дают нечистый вид вашему URL. Вот еще одна версия того же URL: http://example.com/services/legal/patents Если вы не можете подготовиться, то вы готовы потерпеть неудачу (Бенджамин Франклин) Поисковая оп...
Если вы не можете подготовиться, то вы готовы потерпеть неудачу (Бенджамин Франклин) Поисковая оптимизация (SEO) и хороший веб-дизайн SEO Tips - руководство по перекрестным ссылкам
Cross Linking - стратегия, которая может пригодиться для получения высокого рейтинга в поисковых системах, используя несколько принадлежащих вам доменов. Поисковые системы ценят эти ссылки, как и с соответствующих сайтов, со связанным контентом - и у вас есть шанс получить более высокий рейтинг. Как это устроено- Создание одностраничного приложения без фреймворка
Идея одностраничных приложений (SPA) состоит в том, чтобы создать плавный просмотр, подобный тому, который есть в нативных настольных приложениях. Весь необходимый код для страницы загружается только один раз, и ее содержимое динамически изменяется с помощью JavaScript. Если все сделано правильно, страница не должна перезагружаться, если пользователь не обновляет ее вручную. Существует множество платформ для одностраничных приложений. Сначала мы имели
Комментарии
Почему бы не привлечь Агентство социальных сетей, которое не только получает результаты, но и делает это за треть стоимости найма штатного менеджера по социальным сетям?Почему бы не привлечь Агентство социальных сетей, которое не только получает результаты, но и делает это за треть стоимости найма штатного менеджера по социальным сетям? Просто нажмите «Заказать звонок», чтобы поговорить с одним из наших дружных сотрудников. Понравилось это руководство?
Понравилось это руководство? Не забудьте поделиться этим! Аутсорсинг или заключение договоров?
Аутсорсинг или заключение договоров? Многие компании сталкиваются с вопросом о том, могут ли они лучше привлекать сторонних специалистов к поисковой оптимизации или выполнять их лучше со стороны внутреннего специалиста. На практике это в основном зависит от размера компании и степени, в которой внимание уделяется SEO. В настоящее время вы можете сделать это по очень привлекательной цене аутсорсинг социальных сетей План выполнения и график на ходу?
План выполнения и график на ходу? 7. Подпишитесь на Top Guns Интернет-маркетинг - быстро развивающаяся отрасль. Правила рейтинга Google постоянно меняются, и вам нужно либо идти в ногу, либо рискнуть отстать. SEO аккаунт-менеджеры растут и процветают, имея жажду знаний. Всегда проверять последние новости и тенденции имеет решающее значение. Это действительно сводится к тому, чтобы быть по-настоящему увлеченным тем, что вы делаете. Желание знать, как
Как видите, не слишком привлекательно для тех, кто хочет поделиться или щелкнуть, верно?
Стоит делать?
Html?
Так как же вы на самом деле добавляете все эти теги на свой сайт для реализации карт Open Graph и Twitter?
Что такое базовый план SEO?
Jsp?
Jsp?
Почему бы не привлечь Агентство социальных сетей, которое не только получает результаты, но и делает это за треть стоимости найма штатного менеджера по социальным сетям?
Понравилось это руководство?
Понравилось это руководство?
