React CRA - мета-теги для конкретной страницы (Spring Boot)

Мы хотим, чтобы ссылки распространялись в социальных сетях, которые отображают предварительное изображение страницы. Этот образ может каждый раз быть разным. Наше приложение представляет собой CRA с рендерингом на стороне клиента и серверной частью Java Spring Boot.

Это возможно? SEO для нас вообще не важен, так как это продукт B2B. Я добавил React Helmet на рассматриваемую страницу. Я читал, что для этого используется SSR, но наше приложение не построено и не предназначено для этого, поэтому мы хотели бы оставить его как есть. Нам нужен только метатег OG для одной страницы, так что это скорее исключение, чем правило. Надуманный пример ниже:

const userData = useGetUser();

<Helmet>
    <MainContainer>
        <Box>{userData?.name}</Box>
        <Box>{userData?.image}</Box>
     </MainContainer>
     <meta property="og:image" content={userData?.image} />
</Helmet>

Если кто-нибудь знает, как заставить это работать, я был бы очень признателен. Спасибо всем!


reactjs facebook-opengraph react-helmet
person user.io    schedule 12.03.2021    source источник
comment
Вам не обязательно иметь SSR. Просто добавьте теги заголовка внутри <Helmet>, как показано в проекте README.   -  person Janez Kuhar    schedule 12.03.2021
comment
Подойдет ли это для динамических изображений? Мне просто нужно отобразить изображение в предварительном просмотре ссылки для социальных сетей, но изображение может каждый раз отличаться.   -  person user.io    schedule 12.03.2021
comment
Я пробовал, но не работает. Думаю, надо SSR ...   -  person user.io    schedule 12.03.2021
comment
Facebook и некоторые приложения для обмена сообщениями кэшируют данные Open Graph для конкретный URL-адрес, включая изображение, вместо того, чтобы запрашивать веб-сайт каждый раз, когда они хотят показать информацию. Если вы все же измените свое изображение, эти приложения не узнают об изменении, если вы не воспользуетесь их инструментом rescrape. Еще одно замечание: Facebook не показывает изображение при первом обмене URL-адресом, если у вас нет размеров изображения в метаданных OG.   -  person Rich DeBourke    schedule 13.03.2021

Ответы (1)


arrow_upward
1
arrow_downward

React Helmet добавляет следующий атрибут в конец каждого тега, который вы указываете как дочерний для компонента <Helmet/>:

data-react-helmet="true"

Итак, это:

<Helmet>
  <meta property="og:image" content="image link" />
</Helmet>

рендерит в:

<head>
  <meta property="og:image" content="image link" data-react-helmet="true">
</head>

Это делает недействительными метатеги для инструментов отладки предварительного просмотра онлайн-обмена, таких как Sharing Debugger и https://www.opengraph.xyz/.

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

Существует открытая проблема для удаления этого атрибута из тегов, созданных с помощью React Helmet.

person Janez Kuhar    schedule 12.03.2021