Теги OG не работают с React-Helmet и Netlify

Я хоть убей не могу этого понять. Следующий сайт размещен на Netlify, и включен предварительный рендеринг. При проверке страницы все теги OG верны. Эти теги вводятся с помощью response-шлема.

https://browniepoints.africa/opportunities/volunteer-at-a-soup-kitchen-every-week-on-thursdays

При очистке вышеуказанного URL-адреса в отладчике Facebook он отвечает следующим образом:

The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id

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

Я ждал более 48 часов, пока очистятся кеши, я пробовал соскабливать со строками запроса, добавленными к URL-адресу, а изображения имеют абсолютные URL-адреса. Но даже тег описания не проходит.

Может ли кто-нибудь, кто использует React-Helmet и Netlify, пролить свет на эту проблему?


netlify facebook-opengraph react-helmet prerender
person Simpleton    schedule 02.05.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Это связано с известной проблемой предварительной отрисовки.

Мое исправление заключалось в том, чтобы удалить объявление <!DOCTYPE html> из файла index.html в качестве временного решения, пока не будет решена указанная выше проблема.

person Simpleton    schedule 08.05.2019

arrow_upward
2
arrow_downward

Пока я не могу точно сказать, почему. ваш SSR работает некорректно. Перейдите в Chrome DevTools и щелкните 3 вертикальные точки рядом с консолью:

Параметры консоли

Выберите «Условия сети», затем снимите флажок «Выбрать автоматически» и введите Googlebot/2.1 (+http://www.google.com/bot.html):

Условия сети

Теперь обновите страницу и обратите внимание, что все, что вы видите на сайте, - это какой-то простой текст, в котором говорится, что html, и даже ваш пакет javascript отсутствует. Вот как выглядит ваш html:

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="fragment" content="!">
  <link rel="shortcut icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Brownie Points</title>
  <link href="/static/css/2.3bf0f3c5.chunk.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

Обратите внимание, что Netlify SSR находится в стадии бета-тестирования, но лично у меня не было с этим проблем. Вы сделали какие-либо другие шаги, кроме включения его? Раньше я тестировал его для работы с приложением, созданным CRA.

person Dominic    schedule 07.05.2019
comment
Пользовательский агент и возникший в результате сломанный HTML заставили меня найти ветку github в моем ответе с обходным путем, поэтому я наградил вас наградой. - person Simpleton; 08.05.2019