Главная » Языки программирования

Why You Are Here?

На чтение 8 мин
Содержание
  1. Важные мета-теги для социальных сетей
  2. Продвижение в Facebook и Twitter
  3. Мета-теги
  4. Html image in a meta tag
  5. Html image in a meta tag
  6. How do I set og:image so it takes image from page?
  7. How to get meta image from html source code?
  8. How to use the 'og' (Open Graph) meta tag for Facebook share

Важные мета-теги для социальных сетей

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

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

Продвижение в Facebook и Twitter

Facebook предлагает разработчикам различные параметры настройки того, как будут выглядеть веб-страницы в новостной ленте пользователей социальной сети. Все сайты по умолчанию относятся к типу контента под названием “ Веб-ресурс ”, и именно его мы используем в примере.

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

Продвижение в Facebook и Twitter

Twitter также предлагает несколько способов форматирования веб-страниц, но сегодня мы рассмотрим пример, схожий с приведенным выше примером для Facebook . Такой формат в Twitter называется « Summary Card with Large Image »:

Продвижение в Facebook и Twitter - 2

В каждом примере имеется несколько атрибутов:

Мета-теги

Каким образом разместить эти атрибуты? Например, при помощи мета тегов для HTML сайта . При публикации ссылки на ресурс Facebook и Twitter извлекают связанную веб-страницу и считывают ее meta-теги , что позволяет отображать соответствующую информацию.

Facebook использует meta-теги , используя протокол Open Graph . Это система классификации веб-страниц, которая на данный момент охватывает meta-теги, определенные в HTML5 . Полный список доступных тегов можно просмотреть на сайте Open Graph . Но в работе пригодится всего четыре тега:

Как Facebook , так и Twitter дают рекомендации относительно использования упомянутых выше тегов. Учтите, что Facebook ссылается на публикуемую веб-страницу при помощи термина « объект » ( object ):

Facebook Twitter
Title (Заголовок). Заголовок или название объекта. Продуманный заголовок для связанного контента (максимально 70 символов).
Description (Описание). Краткое описание или содержание объекта (2-4 предложения). Описание, которое несет в себе всю необходимую информацию. Не следует использовать одинаковые заголовки и описания для нескольких страниц (длина до 200 символов).
Image (Картинка). URL картинки объекта. Картинка должна быть как минимум 600 на 315 пикселей в размере, но лучше использовать 1200 на 630 и выше (объемом до 5Мб). Что касается соотношения сторон, то старайтесь укладываться в 1.91:1, чтобы избежать обрезки Ссылка на картинку, прикрепленную к контенту. Не следует использовать случайные картинки типа логотипа сайта, фотографию автора или другие картинки, которые встречаются на других ресурсах. Картинка должна иметь минимум 280 пикселей в ширину и 150 – в высоту. Вес картинки не должен превышать 1 Мб.
URL Канонический URL страницы. Ссылка должна быть прямой, без дополнительных параметров, переменных, данных идентификации пользователей и т. д.
Читайте также:  Шифр кузнечик на python

Совмещаем теги

Ничего страшного, если вы задействуете лишние мета теги для сайта интернет магазина. Избыток информации еще никому не вредил, разве что это может негативно сказаться на весе HTML-документа . Но для нашей цели и исключительно ради краткости мы можем руководствоваться тем, что Twitter позволяет заменять мета-теги Open Graph на собственные. К тому же за исключением необходимости определить формат отображения нам не понадобятся уникальные мета-теги Twitter . В результате мы получаем следующий код, который стоит рассматривать как самый минимум с точки зрения тегов, необходимых для того, чтобы репост сайта выглядел достойно:

Универсальные рекомендации для использования картинок: старайтесь, чтобы размер картинок был не менее 1200 на 630 пикселей при соотношении сторон 1.91:1, но при этом не забывайте про ограничение Twitter в 1Мб.

Валидация тегов

Если у вас возникли сомнения относительно комбинирования мета тега description для сайта c другими тегами, то всегда можно воспользоваться специальными инструментами Facebook Sharing Debugger и Twitter Card Validator . Оба средства умеют извлекать любые веб-страницы с публичных серверов, используя релевантные мета-теги, и демонстрировать вам, как они будут смотреться при распространении в социальных сетях. Кроме этого они выводят список ошибок и дают советы. Как мы поступим с нашим примером? С Twitter , кажется, проблем не возникло, а вот проверка Facebook выдала предупреждение:

Валидация тегов <meta data-lazy-src=

Если вы не планируете пользоваться этими инструментами аналитики, то можно опустить эти мета теги для сайта , и это никак не скажется на отображении публикуемой веб-страницы в хронике Facebook или ленте Twitter .

Что мы упустили?

В документации Facebook есть еще одна рекомендация о дополнительном мета-теге. Он отвечает за название сайта:

Twitter рекомендует использовать другой мета-тег, но он также не обязателен:

Он позволяет указывать альтернативное описание картинки для людей с плохим зрением.

Что у нас получилось

И на этом, пожалуй, все. Стоит отметить, что в документации Facebook и Twitter есть множество других мета тегов для HTML сайта , которые можно использовать для распространения контента другого типа. Но я считаю, что приведенного ниже кода будет вполне достаточно:

Html image in a meta tag

Image number one | image number two For more information you can read all about how Facebook uses these meta tags in their documentation.

Html image in a meta tag

I’m using discord, and I saw a lot of people do that thing (the big square in the image). I tried to do that in html with meta tag , but it came out with the result (image number 2). I really want to know how to do this, can someone please help me?

Image number one | image number two

And there is the code I use for doing this:

          Why You Are Here?

The image I’m trying to use is my discord banner.

It was 4 months ago, and I forgot to write here that I found a solution a week after asking here!

The solution is simple, using other meta tags , not the regular. The twitter meta tags.

Replace there the title, description, and the image link.

Html — Image social meta tags, Social networks do a pretty good job extracting title and description from websites when URL is shared, but for images it is still necessary to create custom meta tags: property="og:image&quot

Читайте также:  Определения html тегов атрибутов

How do I set og:image so it takes image from page?

I am using mediawiki 1.19 and I’ve added facebook ‘like’. When I click like the image posted is the site logo. How do I take the image from the page. I’ve run the site through http://developers.facebook.com/tools/debug and it seems og:image is set to the site logo. How do I change this meta property ? My site is thepetwiki.com Thanks

You are going to gave to add some custom og:tags to the HTML markup of your page and specify the image that you want to use.

Take a look at the example from the Facebook documentation —

As you can see the og:image parameter is specified here and that allows Facebook to correctly display the meta data associated with that URL.

You might not need all of the og:tags specified here, title , url , image and description should be fine for just a LIKE button.

You are already aware of the debugger tool — it will help you debug your LIKE button and og:tags . Make some changes in your HTML markup and each time you’ll have to send your URL though the debugger to refresh Facebook’s cached version of your URL.

A quick Google search gave me this mediawiki extension that looks like it could help you —

OpenGraph meta p rovides Open Graph Protocol metadata for articles on the wiki for 3rd parties like Facebook to extract.

see post http://www.mediawiki.org/wiki/Extension_talk:Facebook#OpenGraph_image_problems. The open graph coding is all part of the Facebook extension.

Html image in a meta tag, I’m using discord, and I saw a lot of people do that thing (the big square in the image). I tried to do that in html with meta tag, but it came out with the result (image number 2). I really want to know how to do this, can someone please help me? Image number one | image number two. And there is the code I …

How to get meta image from html source code?

i have html data in console . how will i find meta tag og image from this html source code the below code is in form of string 

   <script type="application/ld+json"> </code></pre>
<p>If you've got this markup as a string, you'll need to parse it as an HTML document. <br />To do **** the DOMParser API.</p>
<p>From then, you can use normal DOM methods to go to your element and get its attribute value :</p>
<pre><code>var markup = `function envFlush(a)if(window.requireLazy)else<window.Env=window.Env||<>;b(window.Env);>>envFlush(); __DEV__=0;CavalryLogger=false;<noscript></noscript><title - Log In or Sign Up`;var doc = new DOMParser().parseFromString(markup, 'text/html'); var meta = doc.querySelector('meta[property="og:image"]'); var value = meta && meta.getAttribute('content');console.log(value);

You need to add name attribute to your meta tag and then:

$("meta[name=og-image]").attr("content")

How do I set og:image so it takes image from page?, It seems can add a new meta tag but I can't override the original propert=og:image, so the posted image on 'facebook like' is still the logo – LTech May 20, 2012 at 9:51 Code sampleFeedback

How to use the 'og' (Open Graph) meta tag for Facebook share

Facebook fetches all pictures from my site.

I want to share only one picture which is on that page.

I heard about the og meta tag, but I don't know how to put it.

Fill the content =" . " according to the content of your page.

For more information, visit 18 Meta Tags Every Webpage Should Have in 2013 .

Facebook uses what's called the Open Graph Protocol to decide what things to display when you share a link. The OGP looks at your page and tries to decide what content to show. We can lend a hand and actually tell Facebook what to take from our page.

The way we do that is with og:meta tags.

The tags look something like this -

You'll need to place these or similar meta tags in the of your HTML file. Don't forget to substitute the values for your own!

For more information you can read all about how Facebook uses these meta tags in their documentation. Here is one of the tutorials from there - https://developers.facebook.com/docs/opengraph/tutorial/

Facebook gives us a great little tool to help us when dealing with these meta tags - you can use the Debugger to see how Facebook sees your URL, and it'll even tell you if there are problems with it.

One thing to note here is that every time you make a change to the meta tags, you'll need to feed the URL through the Debugger again so that Facebook will clear all the data that is cached on their servers about your URL.

I built a tool for meta generation. It pre-configures entries for Facebook, Google+ and Twitter, and you can use it free here: http://www.groovymeta.com

To answer the question a bit more, OG tags (Open Graph) tags work similarly to meta tags, and should be placed in the HEAD section of your HTML file. See Facebook's best practises for more information on how to use OG tags effectively.

Jquery - how to get meta image from html source code, If you've got this markup as a string, you'll need to parse it as an HTML document. To do so, use the DOMParser API . From then, you can use normal DOM methods to go to your element and get its attribute value :

Источник

Оцените статью