Как добавить социальные мета-теги на свой сайт
- Что такое социальный метатег и почему это важно?
- Что такое мета-теги OG и как их добавить?
- Что такое карты Twitter и как их добавить через социальные метатеги?
- Заключительные советы по оптимизации вашего изображения для социальных метатегов
Если у вас есть построил бизнес-сайт или есть создал стратегию веб-контента для вашего блога социальные сети могут быть мощным инструментом, позволяющим обеспечить доступ вашего контента к новым читателям и использовать его для привлечения потенциальных клиентов. Но многие владельцы веб-сайтов не получают всего возможного от обмена вирусным контентом, потому что они не играют активной роли в представлении своего контента, когда кто-то пишет в Твиттере ссылку на свой веб-сайт или публикует сообщение в блоге на Facebook.
Хорошая новость заключается в том, что легко добавить социальные метатеги на ваш сайт, и это позволяет вам иметь большой контроль над тем, как выглядит ваш контент, когда он публикуется в социальных сетях. Это может помочь увеличить интерес, который получает ваш контент, когда им делятся. Эти метатеги легко использовать, и даже владельцы сайтов, не имеющие опыта программирования, могут это сделать.
В этой статье я расскажу вам, как добавить собственные мета-теги OT и мета-теги Twitter-карты на ваш сайт с примерами того, как ваш контент будет выглядеть с этими дополнениями и без них (это поможет продемонстрировать, какое влияние они могут оказать иметь.
Что такое социальный метатег и почему это важно?
Мета-теги определяются школами W3C в качестве тегов, которые предоставляют информацию о документе HTML (веб-страница). Они не видны пользователям и не отображаются где-либо на вашей веб-странице, но их можно обрабатывать на компьютере.
Некоторыми примерами общих мета-тегов являются мета-тег, мета-описание и многое другое. Они используются, чтобы помочь уточнить содержание страницы для поисковых систем, и Правильная оптимизация ваших метатегов может помочь с SEO на странице ,
Необязательные теги, которые обычно не включаются в веб-страницы HTML по умолчанию, являются мета-тегами социальных сетей, которые используются веб-мастерами для указания соответствующего заголовка, описания и изображения, которые следует использовать при публикации контента в социальных сетях.
Вот пример нескольких идентичных твитов, в которых я делюсь ссылкой на страницу на ardorlitmag.com , Первый твит произошел до того, как я добавил социальные метатеги на страницу:
И вот идентичный твит, в котором я поделился той же ссылкой. Единственное отличие заключалось в том, что я добавил социальные метатеги в раздел <head> страницы:
Как видите, в видимости есть огромная разница. Любая доля второй страницы в Facebook или Twitter будет иметь видное изображение (выбранное мной), название (написанное мной) и описание (написанное мной). Это может привести к гораздо большему охвату каждой доли вашего контента.
Итак, теперь, когда вы знаете, что может сделать добавление социальных метатегов к содержанию вашего сайта, давайте быстро рассмотрим, что вам нужно сделать, чтобы добавить их на свой сайт.
Что такое мета-теги OG и как их добавить?
Мета-теги OG - это наиболее часто используемые социальные мета-теги. Добавление этих метатегов, которые используют Протокол открытого графика будет указывать контент, на который вы хотите ссылаться и который будет использоваться платформами социальных сетей для повышения доли вашего контента.
Метатеги Open Graph должны быть добавлены на ваши веб-страницы и в сообщения в блогах в любом месте заголовка вашей страницы (между <head> и </ head>. На самом деле в разделе head ваших страниц нет неправильного размещения, но я хотел бы добавить их ниже заголовка и описания страницы, так как я считаю, что это наиболее естественное размещение.
Основные метаданные, которые я бы порекомендовал вам добавить на все ваши веб-страницы, включают:
- og: title - заголовок вашего объекта, который должен отображаться при публикации. Это может отличаться от мета-заголовка вашей страницы, который оптимизирован для поисковых систем. Здесь вы можете указать подходящий заголовок, предназначенный для привлечения внимания людей и создания кликов.
- og: description - это базовое описание вашего объекта, которое должно отображаться при его публикации. Опять же, это не обязательно должно соответствовать мета-описанию, которое вы написали для целей SEO, содержание og: description должно дополнять ваш заголовок и должно быть тщательно написано, чтобы максимизировать социальные клики.
- og: image - это будет URL-адрес изображения, который соответствует теме / содержанию вашей страницы. Это будет файл изображения, который используется, когда ваш контент публикуется на Facebook или других социальных сетях. Это изображение не обязательно должно отображаться в содержимом страницы (хотя это возможно). Этот факт хорош, потому что он позволяет вам ссылаться на файл изображения, который имеет большой размер и соответствующий размер для социального обмена.
- og: url - это канонический URL вашего объекта. Это будет URL, который используется в качестве его постоянного идентификатора, и когда вы поделитесь ссылкой на страницу, любой, кто щелкнет отображаемый объект расширенного открытого графика, будет перенаправлен на этот URL.
Вот пример того, как эти метатеги OG могут выглядеть в HTML-коде вашей страницы после реализации:
<Голова>
<title> Ваша поисковая система оптимизировала мета-заголовок </ title>
<meta name = "description" content = "Это ваше мета-описание, оптимизированное для поисковых систем." />
<meta property = "og: url" content = "http://www.YourSite.com/YourPage.html" />
<meta property = "og: type" content = "website" />
<meta property = "og: image" content = "http://www.YourSite.com/Your-Image.jpg" />
<meta property = "og: title" content = "Введите свой заголовок здесь" />
<meta property = "og: description" content = "Введите свое описание здесь" />
....
</ HEAD>
Конечно, есть много более структурированных свойств, которые считаются необязательными метаданными, которые вы можете добавить в протокол OG. Существует много полезной информации о том, что это за свойства и как их добавить на официальный сайт , Если вы добавите теги выше, вам будет достаточно воспользоваться тегами, когда ссылки на ваш контент будут опубликованы в социальных сетях.
Что такое карты Twitter и как их добавить через социальные метатеги?
В этом посте вы уже видели пример использования Twitter-карт, расширяющих твит, и вы можете прочитать о них подробнее на Сайт разработчика Twitter , Короче говоря, карты Twitter - это способ разметки мультимедийных данных, таких как фотографии и видео, для повышения доли вашего контента и привлечения дополнительного трафика на ваш сайт.
В настоящее время существует четыре типа карт Twitter, которые вы можете легко добавить на свой веб-сайт, и вам следует выбрать наиболее подходящий тип карты для каждой страницы, в зависимости от ваших целей. четыре популярных типа карт Twitter являются:
- Сводная карта. Этот тип твиттер-карты содержит такие данные, как уникальный заголовок, миниатюра и атрибуция аккаунта Twitter. Учить больше
- Сводная карта с большим изображением: этот тип твиттер-карты похож на общую обобщенную карту выше - основное отличие состоит в том, что изображение показывается гораздо более заметно. Это тип карты Твиттера, который используется в качестве примера в начале твита в этом посте, и это то, что я рекомендую для большинства страниц. Учить больше
- Карта приложения: это карта, предназначенная для подробного описания мобильного приложения, и на ней имеется ссылка для загрузки вашего приложения. Это отличный выбор - использовать эту карту на странице, которой вы делитесь, и использовать ее в качестве «закрепленного твита», поскольку это может реально помочь увеличить количество загрузок приложений, которые вы получаете от пользователей Twitter. Учить больше
- Карта игрока: это карта, предназначенная для предоставления видео, аудио или других мультимедийных файлов, встроенных в твит. Учить больше
Добавляя метатеги Twitter-карты на страницу, вы можете сделать это аналогично мета-тегам OG, упомянутым выше. Я обычно рекомендую добавлять оба, сначала с мета-тегами OG, а затем с мета-тегами Twitter Card. Вот пример того, как вы могли бы реализовать оба в разделе <head> вашей веб-страницы:
<Голова>
<title> Ваша поисковая система оптимизировала мета-заголовок </ title>
<meta name = "description" content = "Это ваше мета-описание, оптимизированное для поисковых систем." />
<meta property = "og: url" content = "http://www.YourSite.com/YourPage.html" />
<meta property = "og: type" content = "website" />
<meta property = "og: image" content = "http://www.YourSite.com/Your-Image.jpg" />
<meta property = "og: title" content = "Введите свой заголовок здесь" />
<meta property = "og: description" content = "Введите свое описание здесь" />
<meta name = "twitter: card" content = "summary_large_image">
<meta name = "twitter: site" content = "@ YourSite'sTwitterHandle">
<meta name = "twitter: creator" content = "@ YourSite'sTwitterHandle">
<meta name = "twitter: title" content = "Введите свой заголовок здесь">
<meta name = "twitter: description" content = "Введите описание здесь">
<meta name = "twitter: image" content = "http://www.YourSite.com/Your-Image.jpg">
....
</ HEAD>
После того как вы добавили мета-теги Twitter-карты и опубликовали свою страницу, вы можете проверить их с помощью Инструмент проверки карт Twitter , чтобы просмотреть, как будет выглядеть карта при обмене ссылкой, и убедиться, что все работает так, как вы надеялись.
Заключительные советы по оптимизации вашего изображения для социальных метатегов
Два заключительных момента, о которых я хотел бы упомянуть: какие общие проблемы решаются у людей, когда они делятся ссылками на Facebook, а пост не отображается так, как им нравится, или так, как они указали в своих метатегах Open Graph Protocol.
Во-первых , если вы видите изображение, которое находится на маленькой стороне и не занимает всю ширину фида Facebook, это может быть связано с тем, что ваше изображение слишком маленькое или соотношение сторон не совсем правильное. Я бы рекомендовал использовать в качестве файла og: image более крупное изображение (но не больше 5 МБ). Это гарантирует, что ваше изображение будет занимать всю ширину фида Facebook, LinkedIn и т. Д., Где оно будет опубликовано. Как правило, если ваше изображение имеет ширину менее 400 пикселей, оно может казаться небольшим в расширенной карте ссылок, которая создается при публикации.
А во-вторых , если у вас возникли проблемы при публикации страницы в Facebook, вы можете использовать OG DeBugger Tool от Facebook для устранения неполадок. Одна из распространенных проблем заключается в том, что вы обновили метатеги OG на своей странице, но старая версия все еще появляется, когда вы делитесь ссылкой на Facebook. Чтобы это исправить, вам просто нужно получить URL страницы, используя De-Bugger Facebook. Это очистит кэшированную версию данных OG, связанных с вашей страницей, и должна устранить проблему или, по крайней мере, выявить проблему, если она не связана с кэшированием.
Удачи, и я надеюсь, что вы нашли эту статью полезной!
Похожие
SEO Каноникализация - почему это важно... что произойдет, если ссылка на ваш сайт отображает контент, который отображает другой сайт? Проще говоря, что происходит, когда два URL (Uniform Resource Locator) отображают одинаковое содержимое? Что такое канонический тег? Канонический тег (тег HTML-ссылки с атрибутом rel = canonical) по сути является маркером между дублированным контентом и предпочтительным Что такое социальные сигналы? SEO
Несмотря на все эти разговоры о наличии стратегии поисковой оптимизации (SEO) для присутствия вашего бизнеса в Интернете, очень важной частью является знание компонентов SEO. Google использует более 200 факторов для ранжирования сайта, и алгоритмы поисковых систем постоянно обновляются и меняются, поэтому для того, чтобы соответствовать лучшим практикам SEO, требуются усилия! Недавним событием в мире поисковых систем стала его связь с социальными сетями. Еще пару лет назад социальные сети Что такое Саргассово море?
... и, найденной в Саргассовом море, обеспечивают убежище и среду обитания для многих животных. Фото предоставлено Университетом Южного Миссисипи. Саргассово море - это обширный участок океана, названный в честь рода свободно плавающих водорослей под названием Саргассум . В то время как существует много различных типов водорослей, плавающих в океане по всему миру, Саргассово море уникально тем, что в нем обитают виды саргассов, которые являются «холопелагами» - это означает, что Почему SEO
... какой продукт я предлагаю». Или, скорее: «Какими словами я соблазняю (!) Моих клиентов и выделяюсь лучше?» Эта история не только для слов, которые вы используете на своем сайте. Технология также играет важную роль в этом. Посмотрите на это с точки зрения клиента: Есть ли четкая навигация на сайте? У сайта хороший дизайн? Достаточно ли быстро загружается сайт? Но не забудьте принять во внимание поисковые системы: Что такое HTTP / 2 и что это значит для SEO?
... такое HTTP / 2? HTTP / 2 - это очень необходимое обновление протокола HTTP, основанное на собственном протоколе Google SPDY, который был создан для ускорения обмена данными между браузерами и серверами. Результаты оказались настолько многообещающими, что Целевая группа по инженерным вопросам интернета (IETF) также использовала SPDY в качестве основы для HTTP / 2. Новый протокол является заменой действующего протокола HTTP / 1.1, который сегодня поддерживает весь интернет-трафик. Метатеги: что они такое и почему они так важны
... чтобы иметь возможность их размещать. Сегодня есть куча инструментов SEO это позволяет нам включать метатеги, даже не открывая исходный код страницы. Хотите знать как? Двумя Как сделать метатеги
Как создать метатег - Здравствуйте, друг Неттер, увидимся снова со мной в статье о том, как создать прибыльный сайт. В предыдущей статье я обсуждал, как исследовать ключевые слова с помощью Google Planner, который могут прочитать мои друзья. здесь. Для создания веб-сайта мы не должны быть небрежными, потому что нам нужно подготовить »Как сделать SEO свой сайт для Сингапура
... и SEO с 2004 года и является одним из ведущих Тренинг по поисковому маркетингу образование в Сингапуре, гарантирующее малому и среднему бизнесу понимание важности SEO. Эта статья является частью его SEO в 2011 году. Что Что такое Колибри Google, а что нет?
... как сегодня, так и в будущем. «Новое» часто пугает людей, и это объявление заставляло оптимизаторов со всего мира отчаянно пытаться раскрыть больше деталей, чтобы информировать клиентов, стоит ли им ожидать попадания трафика от другого, казалось бы, безвредного животного. Несмотря на то, что было выпущено много информации, и тема освещалась бесчисленное количество раз, все еще существует путаница относительно того, что такое Колибри, а что нет, и я здесь, чтобы ответить на некоторые Советы по оптимизации интернет-магазинаИнтернет-магазин Raz!
Большинство интернет-магазинов, занимающих лучшие позиции в поисковых системах, как правило, хорошо заботятся об URL-адресах своих страниц. Этот термин означает расположение веб-страницы или файла в Интернете (например, URL-адрес Google - http://google.com). Содержание URL должно содержать ключевые слова для вашего интернет магазин поисковая оптимизация . Таким образом, пользователям будет легче распознавать контент, который Как улучшить SEO WordPress сайт
... что функции не являются полными, поэтому я пытаюсь использовать WordPress на своем собственном хостинге. В самом деле, после того, как я попробовал это, это было совсем по-другому между бесплатным и тем, кто заплатил ... он. Not, не WordPress, который платит, но хостинг платит. На английском я говорю сам хостинг или хостинг сам. так что мы можем максимизировать и настроить WordPress так, как нам нравится. Так что для тех, кто хочет знать, как улучшить SEO WordPress сайты так много посетителей,
Комментарии
Вы понимаете, что такое SEO, и почему это важно для вашего сайта?Вы понимаете, что такое SEO, и почему это важно для вашего сайта? Вам понравился контент? Если вам интересно, вы найдете много других подобных здесь в нашем блоге. Поскольку мы говорим об оптимизации, я предлагаю вам проверить в этом, который дает вам безошибочные советы по оптимизации изображений для блогов , Любой может показать вам, что такое SEO, как оно работает и что вы должны учитывать; Однако, как применить это к реальному миру?
Любой может показать вам, что такое SEO, как оно работает и что вы должны учитывать; Однако, как применить это к реальному миру? Для начала любая стратегия SEO требует предварительного анализа сети, чтобы узнать, с чего мы начали. С другой стороны, анализ результатов, отслеживание, выявление областей для улучшения и подготовка отчетов, которые вы можете сравнивать месяц за месяцем, - это важные аспекты, которые вы должны знать, как это сделать, если вы хотите, чтобы ваш бизнес развивался. Что вы думаете о том, как узнать, как установить, как настроить и как использовать Yoast SEO для оптимизации ваших сообщений?
Что вы думаете о том, как узнать, как установить, как настроить и как использовать Yoast SEO для оптимизации ваших сообщений? Обязательно прокомментируйте ниже и ознакомьтесь с содержанием, которое мы подготовили для вас! Нужно оптимизировать ваш сайт для SEO? Познакомьтесь с Oblige - агентство Создание сайта и Цифровой маркетинг , Другие По общему признанию, система аукциона немного более сложна чем это - чтобы узнать больше о том, как это работает, читайте КПП 101 - Что такое КПП?
Что вы думаете о том, как узнать, как установить, как настроить и как использовать Yoast SEO для оптимизации ваших сообщений? Обязательно прокомментируйте ниже и ознакомьтесь с содержанием, которое мы подготовили для вас! Нужно оптимизировать ваш сайт для SEO? Познакомьтесь с Oblige - агентство Создание сайта и Цифровой маркетинг , Другие Пока все хорошо, но, прежде чем приступить к оптимизации URL-адресов, вы действительно знаете, что это такое и как они работают?
Пока все хорошо, но, прежде чем приступить к оптимизации URL-адресов, вы действительно знаете, что это такое и как они работают? Что такое URL? Создание краткой версии Википедии: URL-адрес - это текстовая версия, которая заменяет IP-адреса таким образом, чтобы ее можно было читать как людям, так и компьютерам для связи с серверами. В 1995 году Тим Бернерс-Ли, отец Всемирной паутины, внедрил стандарт, который впоследствии будет называться Что ж, если вы не настроили свой сайт оптимально до входа в поисковые системы и не использовали метатеги, как бы вы оказались в интернет-лабиринте?
Что ж, если вы не настроили свой сайт оптимально до входа в поисковые системы и не использовали метатеги, как бы вы оказались в интернет-лабиринте? Ваш сайт уже оптимизирован для входа в поисковые системы? Время перемен! Почему K-pop - это K-pop, потому что это музыка, исполняемая (в основном) корейскими артистами, но как насчет этого?
K-pop - это K-pop, потому что это музыка, исполняемая (в основном) корейскими артистами, но как насчет этого? С «Идолом», заглавным треком из « BOVES YOURSELF» от BTS : «Ответ», BTS дает своего рода ответ. Хотя назвать «идол» традиционной корейской музыкой было бы неестественно , в ней достаточно широко используется chuimsae [추임새], что означает использование дополнительного восклицания между текстами, чтобы привлечь внимание аудитории. (Некоторыми примерами И как узнать, как это работает - на самом деле - ваш сайт для мобильных устройств?
И как узнать, как это работает - на самом деле - ваш сайт для мобильных устройств? Введите этот инструмент: Тест мобильной оптимизации , И он должен не только хорошо работать, но и быстро. Чтобы проверить скорость, вы можете сделать это в этот другой инструмент , 6 # У вас Это еще один миф или это происходит на самом деле, и как это влияет на рейтинг и трафик?
Это еще один миф или это происходит на самом деле, и как это влияет на рейтинг и трафик? Я постараюсь дать ответы на вышеуказанные вопросы, используя блог, который вы сейчас читаете, в качестве примера, а также приведу примеры естественных ссылок. Что такое естественное построение ссылок? Естественное построение ссылок - именно то, что предполагает название обратные ссылки которые создаются естественным Когда это сделано для вас, бесплатный трафик на ваш сайт и не платите за Объявления Google , Представьте, что это происходит с несколькими вашими конкурентными ключевыми словами?
Это еще один миф или это происходит на самом деле, и как это влияет на рейтинг и трафик? Я постараюсь дать ответы на вышеуказанные вопросы, используя блог, который вы сейчас читаете, в качестве примера, а также приведу примеры естественных ссылок. Что такое естественное построение ссылок? Естественное построение ссылок - именно то, что предполагает название обратные ссылки которые создаются естественным Что такое SEO и как оно может помочь вам повысить свой рейтинг?
Что такое SEO и как оно может помочь вам повысить свой рейтинг? Поисковые системы, такие как Google, Yahoo, Bing и другие, «перемещаются» по сети за информацией, основанной на словах, которую пользователи вводят в строку поиска. Поисковая система определяет, какие сайты являются наиболее актуальными, и предоставляет список результатов. SEO «оптимизирует» способность вашего сайта, чтобы быть в этих результатах. Поисковые системы учитывают несколько факторов, и алгоритмы
Что такое социальный метатег и почему это важно?
Что такое мета-теги OG и как их добавить?
Что такое карты Twitter и как их добавить через социальные метатеги?
Что такое социальный метатег и почему это важно?
Что такое мета-теги OG и как их добавить?
Что такое карты Twitter и как их добавить через социальные метатеги?
О произойдет, если ссылка на ваш сайт отображает контент, который отображает другой сайт?
Проще говоря, что происходит, когда два URL (Uniform Resource Locator) отображают одинаковое содержимое?
Что такое канонический тег?
Или, скорее: «Какими словами я соблазняю (!) Моих клиентов и выделяюсь лучше?