# Изображение OpenGraph не определяется корректно

**URL:** https://meta.discourse.org/t/opengraph-image-not-being-picked-up-correctly/138420
**Category:** Support
**Created:** [13.Январь.2020 02:38:37 UTC](https://meta.discourse.org/t/opengraph-image-not-being-picked-up-correctly/138420 "2020-01-13T02:38:37Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![RaviJayagopal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ravijayagopal/32/91018_2.png) [@RaviJayagopal](https://meta.discourse.org/u/RaviJayagopal)
#### Post date: [13.Январь.2020 02:38:37 UTC](https://meta.discourse.org/t/opengraph-image-not-being-picked-up-correctly/138420/1 "2020-01-13T02:38:37Z")

</div>

Facebook использует логотип форума как OG-изображение, а не главное изображение в верхней части тела моего поста. Я пробовал отладку/скрапинг через инструмент разработчика Facebook OG. Ничего не изменилось.

 ![discourse-og-image](https://global.discourse-cdn.com/meta/original/3X/4/e/4ec15ae418c2380a564fbd60a85806879a9fcd6b.png)

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

Спасибо за помощь!

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [13.Январь.2020 09:22:39 UTC](https://meta.discourse.org/t/opengraph-image-not-being-picked-up-correctly/138420/2 "2020-01-13T09:22:39Z")

</div>

Возможно, ваше логотип-изображение слишком велико. В превью выше оно выглядит огромным.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [13.Январь.2020 12:53:36 UTC](https://meta.discourse.org/t/opengraph-image-not-being-picked-up-correctly/138420/3 "2020-01-13T12:53:36Z")

</div>

Похоже, на сайте установлен компонент темы, который мешает работе краулера Facebook. Этот компонент добавляет следующий код внутрь тега `<head>`:

```plaintext
<!-- Facebook Pixel Code -->
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1544745645741448&amp;ev=PageView&amp;noscript=1">
<!-- End Facebook Pixel Code -->

```

Изображения не должны размещаться внутри тега `<head>`, поэтому большинство браузеров просто игнорируют их. Однако краулер Facebook, похоже, видит тег `<img>` и преждевременно закрывает тег `<head>`. Это видно в их [инструменте отладки](https://developers.facebook.com/tools/debug/echo/?q=https%3A%2F%2Fforum.subscribeme.fm%2Ft%2Fthe-greatest-free-freemium-tools-i-cant-wont-live-without%2F502):

```plaintext
<!-- Facebook Pixel Code -->
</head>
<body>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1544745645741448&amp;ev=PageView&amp;noscript=1">
<!-- End Facebook Pixel Code -->

```

Этот магический тег `</head><body>` не отображается при использовании curl или в любом браузере. Очень странное поведение со стороны Facebook.

В любом случае, решение здесь заключается в том, чтобы переместить пиксель отслеживания Facebook из раздела `<head>` компонента темы в раздел `Header` этого же компонента.

---

<div class="post-metadata">

### Author: ![RaviJayagopal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ravijayagopal/32/91018_2.png) [@RaviJayagopal](https://meta.discourse.org/u/RaviJayagopal)
#### Post date: [13.Январь.2020 12:55:41 UTC](https://meta.discourse.org/t/opengraph-image-not-being-picked-up-correctly/138420/4 "2020-01-13T12:55:41Z")

</div>

@codinghorror,

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

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

---

<div class="post-metadata">

### Author: ![RaviJayagopal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ravijayagopal/32/91018_2.png) [@RaviJayagopal](https://meta.discourse.org/u/RaviJayagopal)
#### Post date: [13.Январь.2020 12:56:41 UTC](https://meta.discourse.org/t/opengraph-image-not-being-picked-up-correctly/138420/5 "2020-01-13T12:56:41Z")

</div>

@david,

У меня не установлено никаких пользовательских тем. Это чистая установка Discourse. Более того, я даже не знаю, как установить тему или плагин для Discourse.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [13.Январь.2020 12:59:22 UTC](https://meta.discourse.org/t/opengraph-image-not-being-picked-up-correctly/138420/6 "2020-01-13T12:59:22Z")

</div>

> [@RaviJayagopal](#):
>
> Не уверен, что я что-то упускаю

Размер изображения имеет значение, потому что когда Facebook не может найти тег `og:image`, он выбирает самое большое изображение на вашем сайте. В данном случае логотип больше фотографии, поэтому он был выбран.

Однако в Discourse есть теги og:image — они просто ломаются темой на вашем сайте.

> [@RaviJayagopal](#):
>
> У меня не установлено никаких кастомных тем

Вы должны их установить — пиксель отслеживания Facebook добавляется темой. Когда я включаю безопасный режим, он исчезает. Перейдите в `/admin/customize/themes`, нажмите Изменить HTML и откройте вкладку `</head>`. Я подозреваю, что вы увидите код Facebook там.

---

<div class="post-metadata">

### Author: ![RaviJayagopal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ravijayagopal/32/91018_2.png) [@RaviJayagopal](https://meta.discourse.org/u/RaviJayagopal)
#### Post date: [13.Январь.2020 23:23:52 UTC](https://meta.discourse.org/t/opengraph-image-not-being-picked-up-correctly/138420/7 "2020-01-13T23:23:52Z")

</div>

> [@david](#):
>
> Вы должны это сделать — пиксель отслеживания Facebook добавляется темой. Когда я включаю безопасный режим, он исчезает. Перейдите в `/admin/customize/themes`, нажмите Редактировать HTML и откройте вкладку `</head>`. Я подозреваю, что вы увидите код Facebook там.

Посмотрите это изображение — у меня нет никаких пользовательских тем, и там нет опции «Редактировать HTML».

 ![discourse-theme](https://global.discourse-cdn.com/meta/original/3X/e/6/e620f6c454d44ab97e57b8c4774b2888d10ae6dd.png)

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [13.Январь.2020 23:44:33 UTC](https://meta.discourse.org/t/opengraph-image-not-being-picked-up-correctly/138420/8 "2020-01-13T23:44:33Z")

</div>

Нажмите «по умолчанию» слева, после чего должна появиться кнопка редактирования

---

<div class="post-metadata">

### Author: ![RaviJayagopal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ravijayagopal/32/91018_2.png) [@RaviJayagopal](https://meta.discourse.org/u/RaviJayagopal)
#### Post date: [14.Январь.2020 02:01:04 UTC](https://meta.discourse.org/t/opengraph-image-not-being-picked-up-correctly/138420/9 "2020-01-14T02:01:04Z")

</div>

Сработало! Ура! Большое спасибо!

> [@david](#):
>
> Нажмите «По умолчанию» слева, и вы должны увидеть кнопку редактирования

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [15.Январь.2020 23:18:49 UTC](https://meta.discourse.org/t/opengraph-image-not-being-picked-up-correctly/138420/10 "2020-01-15T23:18:49Z")

</div>


