React Helmet: Facebook Open Graph

Итак, у меня есть react helmet, работающий над моим клиентским приложением, чтобы повторно отображать facebook og теги в заголовке в зависимости от того, какая страница активна в приложении.

однако отладчик 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>

reactjs react-helmet
person Timmy Lee    schedule 05.05.2018    source источник

Ответы (2)


arrow_upward
28
arrow_downward

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

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

person Gokhan Sari    schedule 06.05.2018
comment
Не тот, кто проголосовал против вас, но, вероятно, следует упомянуть, что хотя это верно для Facebook, Google ДЕЙСТВИТЕЛЬНО ждет до 10 секунд, пока все загрузится: webmasters.googleblog.com/2015/10/ - person Chris Owens; 19.11.2018
comment
@GokhanSari Я хотел спросить, будет ли facebook получать метаданные, динамически добавляемые с помощью gatsby-шлема? - person Haseeb Burki; 22.12.2018
comment
@HaseebBurki да. Что делает gatsby, так это то, что он предварительно визуализирует ваши компоненты во время сборки (в HTML), поэтому ваши метаданные будут доступны при загрузке страницы. - person Gokhan Sari; 22.12.2018
comment
@GokhanSari Боюсь, я не ясно выразился. Что делать, если у меня есть интернет-магазин с разными товарами и админ-панель, где продавцы могут сами добавлять товары. Таким образом, страницы с описанием продуктов не могут быть предварительно обработаны. Все данные и метаданные будут извлечены из базы данных. - person Haseeb Burki; 23.12.2018
comment
@HaseebBurki, если ваши данные динамические, вам понадобится какой-то серверный рендеринг, поскольку ваши данные будут поступать с сервера. - person Gokhan Sari; 23.12.2018

arrow_upward
0
arrow_downward

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

person Jeremy Dain    schedule 08.08.2020