Реактивный шлем: Facebook Open Graph

Итак, у меня есть react helmet работает над моим клиентским приложением для повторного рендеринга facebookog теги в голову в зависимости от того, какая страница активна в приложении.

Тем не менее facebook отладчик и facebook сам не поднимай ничего из этого. я что-то пропустил? это возможно только на серверных страницах?

я надеюсь не так, как мне придется учиться node.js!

 <Helmet>
    <title>{props.title}</title>
    <meta property="og:url" content={ogUrl} />
    <meta property="og:type" content={props.type} />
    <meta property="og:title" content={props.title} />
    <meta property="og:description" content={props.desc} />
    <meta property="og:image" content={ogImg} />
 </Helmet>
Источник

2 ответа

Решение

Большинство поисковых систем и сканеров напрямую используют ответ сервера, не позволяя вам изменять его без JavaScript. Так что да, вам нужен рендеринг на стороне сервера.

Или вы можете использовать такие инструменты, как gatsbyjs, response -static. По сути, они заранее визуализируют ваши компоненты в HTML-файлы.

Источник

Вы можете добавить og:image

Это то, что я помещаю в app.js, а также меняю метаданные на разных страницах.

<Helmet>
    <title>VEED - Create, Edit & Share Videos Online for free</title>
    <meta name="description" content="Veed is a simple but powerfull video editor, try our free video editor to, resize video, trim video add loads more!" />
    <meta name="keywords" content="instgram video editor, Online Video editor, Video Editor, Video Resizer, Trim Video, Draw On Video, Resize Video, Edit videos online, Online video editor" />
    <meta name="application-name" content="VEED" />
    <meta name="theme-color" content="#e162f8" />

    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:url" content="https://www.veed.io/" />
    <meta property="og:title" content="VEED - Create, Edit & Share Videos Online for free" />
    <meta property="og:description" content="Veed is a simple but powerfull video editor, try our free video editor to, resize video, trim video add loads more!" />
    <meta property="og:image" content="https://www.veed.io/fav/og-image.png" />
    <meta property="og:image:url" content="https://www.veed.io/fav/og-image.png" />
</Helmet>
Источник

В качестве альтернативы вы можете использовать API ogtag.me для отправки данных и динамического создания сокращенных ссылок с предварительным просмотром, а затем поделиться этой сокращенной ссылкой, а не ссылкой на фактическую страницу.

Источник
Другие вопросы по тегам