Вопрос по facebook – Facebook Ссылка Изображение

95

Когда кто-то публикует ссылку на Facebook, скрипт обычно сканирует эту ссылку на любые изображения и отображает миниатюру рядом с сообщением. Хотя для определенных URL-адресов (включая мой) FB, похоже, ничего не получает, несмотря на то, что они представляют собой несколько изображений на этой странице.

Я прочитал, что FB предпочитает & quot; image_src & quot; тег rel для изображения, которое пользователь желает указать, но это не создает этот эскиз для моего сайта.

Мой URL-адрес отправляется непосредственно в DNS и не пересылается, поэтому я не думаю, что это может быть проблемой.

Кто-нибудь знает, почему FB не может создавать эскизы с моего сайта?

Здесь вы можете увидеть, как это работает! Я строю это с помощью PHP + JQuery. Исходный код доступен для скачивания. Надеюсь, ты повеселишься!lab.leocardz.com/facebook-link-preview-php--jquery Leonardo Cardoso
и если вы хотите сделать то же самое в Google Plus, вот лучшая ссылка, которую я мог найти:stackoverflow.com/questions/7985398/… cregox
Было бы полезно, если бы вы дали нам ссылку на свой сайт (или другой, который не работает) - это может вызвать некоторые идеи. Nick Fortescue
возможный дубликатHow does Facebook Sharer select Images? dcorking

Ваш Ответ

12   ответов
2

Является ли HTML-код сайта действительным? Запустите это черезслужба проверки w3c.

11

Используйте письмо из Facebook, доступное здесь.http://developers.facebook.com/tools/lint/

Это проверит вашу ссылку и повторно загрузит любые изображения. это также очищает любой старый кеш.

Или попробуйте это,https://developers.facebook.com/tools/debug

Спасибо, работал на меня!
-1

Если вы использовали какой-либо плагин для seo, то сначала проверьте настройки плагина seo. Затем найдите параметр Noindex, если Enable Media for Noindex, а затем отключите его.

2

На самом деле, если вы уже пытались связать эту страницу в Facebook, ДО ДОБАВЛЕНИЯ & quot; image_src & quot; По ссылке Facebook будет продолжать использовать старую кэшированную копию и даже не видеть ваши изменения. Попробуйте изменить URL, удалив или добавив «www», или продублируйте свою страницу, чтобы протестировать ее.

11

Чтобы изменить заголовок, описание и изображение, нам нужно добавить несколько метатегов под заголовком.

ШАГ 1 : Добавьте метатеги под заголовком

<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

СЛЕДУЮЩИЙ ШАГ : Нажмите на ссылку ниже https://developers.facebook.com/tools/debug

Добавьте свой URL в текстовое поле (например,http://www.test.com/) где вы упомянули теги. Нажмите на кнопку отладки.

Это сделано.

Вы можете проверить здесьhttps://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

В приведенном выше URL, u = ссылка на ваш сайт

НАСЛАЖДАТЬСЯ !!!!

Пожалуйста, не публикуйте один и тот же ответ на несколько вопросов: он либо не подходит всем, либо вопросы являются дубликатами, которые следует пометить / закрыть как таковые.
Привет Клеопатра, я думал опубликовать ответ, чтобы помочь другим. Я думаю, что ваша точка зрения полностью верна. Я позабочусь об этом. Спасибо друг
@ Gaurav123 тестовая ссылка не работает. Тем не менее, я проверил это, отправив сообщения в Facebook. Большое спасибо за очень полезный ответ!
119

Самый простой способ - просто тег ссылки:

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

Но есть и другие вещи, которые вы можете добавить на свой сайт, чтобы сделать его более удобным для социальных сетей:

Open Graph Tags

Теги Open Graph - это теги, которые вы добавляете в<head> вашего сайта, чтобы описать сущность вашей страницы, будь то группа, ресторан, блог или что-то еще.

Тег Open Graph выглядит следующим образом:

<meta property="og:tag name" content="tag value"/> 

Если вы используете теги Open Graph, необходимы следующие шесть:

  • og:title - The title of the entity.
  • og:type - The type of entity. You must select a type from the list of Open Graph types.
  • og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
  • og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
  • og:site_name - A human-readable name for your site, e.g., "IMDb".
  • fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.

Дополнительную информацию о тегах Open Graph и подробную информацию об администрировании вашей страницы можно найти в документации по протоколу Open Graph.

http://developers.facebook.com/docs/reference/plugins/like

This имеет список типов и т. д., а также имеет другую полезную информацию.
Просто чтобы вы знали, единственный способ добавить изображение в пост при использовании AppLinks (applinks.org) в приложении facebook использовать ссылку & lt; ссылку & gt; тегом, используя & lt; meta & gt; тег с og: изображение не будет работать.
я добавил теги og в свой код, и когда я тестировал его с помощью инструмента отладчика объектов og в facebook, он показывает мне правильную информацию, сохраненную в тегах og, но когда я пытаюсь связать страницу со своей учетной записью fb, он показывает только кэшированная копия. Сколько времени fb хранит кэшированную копию? Есть ли другой способ очистить кэшированную копию?
Я получил эту ошибку от инструмента lint.All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification., Просто к вашему сведению
1

Я заметил, что Facebook не берет миниатюры с веб-сайтов, если они начинаются с https, возможно, это ваш случай?

0

Старый вопрос, но недавно у меня возникла такая же проблема: миниатюрные изображения из моей ссылки не отображаются в обновлениях статуса на Facebook. Я пишу для многих клиентов, и это относительно новое.

Кажется, FB больше не нравится длинные URL-адреса & # x2014; Если вы используете сокращение URL, такое как goo.gl или bitly.com, миниатюра из вашей ссылки / сообщения появится в вашем обновлении FB.

1

была та же проблема и выяснил, что мой тег закрытия головы был в неправильном месте

6
61

Я знаю, что этот вопрос старый, но недавно я столкнулся с точно такой же проблемой и обдумывал ее пару недель. Многочисленные поиски в Google обнаружили много полезной информации, но большинство из них было сосредоточено на тегах Open Graph, которыми я не интересовался. Оказывается, у моего сайта было много проблем, но вот некоторые из основ.

  1. As EightyEight said, make sure your HTML is valid - and the same goes for your javascript and server-side code (PHP, ASP, etc.). I had a small PHP error in a piece of code that was executing as a separate call to the server from the main page. Due to a number of bizarre coincidences, that code was generating a 500 error - but ONLY for IE6 and strict parsing engines like the W3C validator and the Facebook page crawler. The problem didn't appear in modern browsers (Chrome 4, FF 3.5, IE 8, etc) so I didn't see it right away, but older/stricter clients were showing the 500 every time and that was the main reason FB wasn't crawling our page (when everything else seemed to be correct).

  2. Regarding Randy's response, he's correct that Facebook will keep an old cached copy of your page long after you've updated it. FB claims it's only held for 24 hours, but I experienced much longer times than that. FORTUNATELY, FB has released their "URL Linter" tool that will show you a preview of how your page will appear when being shared on FB, and it will force FB to instantly update its cache of your page. This was a lifesaving tool. You can find it at http://developers.facebook.com/tools/lint/

  3. Regarding the URL Linter tool, be aware that each variation of a URL is cached separately on Facebook, so "www.example.com" is not the same as "example.com". Also, unique capitalization is stored as well, so "ExampleOne.com" is not the same as "exampleone.com". (This led to a lot of confusion between my client and myself when it appeared to me that the cache had been updated just fine and the client claimed they weren't seeing the updates. Turns out I was looking at exampleone.com and had used Linter to update the cache, but they were looking at exampleOne.com which I hadn't submitted to Linter. As a result, I ended up submitting quite a few variations of the URL to Linter just to cover the bases.)

  4. WyrdNEXUS's advice to use the image_src link tag is spot-on. This allows you to be sure that FB is scraping the best possible image for your page. There are some varying guidelines out there about what specs the image file should have, but I've successfully used a 128px square image and have seen a 130x97 image make it through as well. Here is Facebook's official documentation from http://developers.facebook.com/docs/reference/plugins/like/:

    Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.

    Obviously, FB will resize a large image for you, but you'll almost always get better results if you resize it yourself beforehand.

  5. Regarding Mike Cooper's link to the eHow article, avoid using step #1 in that article. It was valid advice when the article was written and when Mike posted the link, but it's now better to use the URL Linter tool for previewing how your page will appear when being shared. By using Linter, you won't cause FB to cache a (potentially) bad copy of the page before you get a chance to tweak it.

lint Инструмент изменил свое название.now it's just debug: developers.facebook.com/tools/debug - из всего, что я могу сказать, этоtl;dr версия всего этого:just use the tool!
Круто узнать про линтер. Отличный инструмент!
Я боролся в течение нескольких дней и неправильно обновлял свой эскиз. Инструмент Facebook Linter немедленно решил мою проблему - он получил Facebook, чтобы обновить свой кеш! Ура!
Большое спасибо за этот инструмент для линтера. Некоторые посты в моем блоге показывали изображения, другие, несмотря на то, что они были базой на базе данных. Помещение URL-адреса нарушающей страницы в URL-адрес Линтера заставило его кэшировать изображение! Woo-Hoo!
0

Попробуйте использовать что-то вроде этого:

<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`

Кажется, что он отлично работает в Firefox, если вы используете полный путь к своему изображению.

Беда в том, что по какой-то причине он смещается вертикально вниз. Изображение 200 х 200, как я рекомендовал, где-то я читал.

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

Похожие вопросы