Как показать изображение в шлеме реакции программно с Гэтсби? - PullRequest
Новая
       35

Как показать изображение в шлеме реакции программно с Гэтсби?

0 голосов
/ 04 февраля 2020

Я использую Gatbsy для своей главной страницы и пытаюсь программно добавить некоторые метаданные с помощью Reaction-шлем.

У меня есть SEO-компонент следующим образом: 

const SEO = ({title, description, location, image_url}) => {
    const capitalize = string => {
        if (string !== undefined){
            return string.charAt(0).toUpperCase() + string.slice(1);
        }

        return string

    };

    const MAIN_TITLE = settings.META_TITLE;
    return (
        <Helmet>
            <title>{`${MAIN_TITLE} | ${capitalize(title)}`}</title>
            <meta name="description" content={description}/>
            <meta property="og:title" content={`${MAIN_TITLE} | ${capitalize(title)}`}/>
            <meta property="og:description" content={description}/>
            <meta property="og:image" itemProp="image" content={image_url !== undefined ? image_url : `${settings.ROOT_URL}/static/image-cover-1e01617fb26211f1cd8e3dd24977070d.jpg`}/>
            <meta property="og:type" content="website"/>
            <meta property="og:url" content={location.href}/>
            <meta property="twitter:title" content={`${MAIN_TITLE} | ${capitalize(title)}`}/>
            <meta property="twitter:description" content={description}/>
            <meta property="twitter:image" itemProp="image"  content={image_url !== undefined ? image_url : `${settings.ROOT_URL}/static/image-cover-1e01617fb26211f1cd8e3dd24977070d.jpg`}/>
            <meta property="twitter:card" content="summary_large_image"/>
        </Helmet>
    )
};

export default SEO

И я использую его на одной из страниц Гэтсби следующим образом: 

<div className="flex flex-col overflow-x-hidden min-h-screen">
     {loading && !hasError && <LoadingIndicator/>}
     {!loading && hasError && <div className="container my-12"><ErrorIndicator/></div>}
     {!loading && !hasError && <React.Fragment>
             <SEO title={`${vehicle.make} ${vehicle.model} ${vehicle.type}`}
                  description={`${vehicle.make} ${vehicle.model} wacht op u.`}
                  location={location}
                  image_url={vehicle.images instanceof Array ? vehicle.images[0].uri : vehicle.images.uri}/>
              .... // Rest of the code
      <React.Fragment>}
</div>

Когда я проверяю консоль в теге на localhost или на сервере, я вижу то, что должен видеть:

enter image description here

Но в Facebook я вижу что-то еще. Для изображения, например, я вижу: 

og:image    http://my-site/static/image-cover-1e01617fb26211f1cd8e3dd24977070d.jpg

Facebook использует оператор else в теге <meta property="og:image" ..../>, но image_url не является неопределенным и в консоли я вижу правильный URL.

Есть идеи?

1 Ответ

0 голосов
/ 04 февраля 2020

Документы OG не показывают реквизит предмета как атрибут, но я не думаю, что это все.

https://ogp.me/

Что я думаю в том, что ваш код добавляет мета программно, поэтому при первой загрузке его там нет, и боты Facebook не ловят его? Попробуйте жестко запрограммировать этот метатег в HTML, чтобы увидеть, принимает ли это Facebook, и это, по крайней мере, сообщит вам, если это проблема или нет.

Редактировать: извините, что на самом деле не отвечает root вопрос. Если вышеупомянутое оказывается проблемой, я предложил бы добавить это программно на стороне сервера, если это возможно. Вы могли бы попробовать шаблонизировать это с чем-то вроде E JS. По сути, я думаю, вам просто нужно убедиться, что он находится в DOM достаточно рано для ботов Facebook.

Редактировать: Facebook просто не поддерживает (больше не поддерживает) пользовательский обмен. Это OG или ничего, и они берут OG из вашего необработанного html до того, как ваш JS сможет изменить его. Это просто не подходит для SPA. Вы можете использовать Google OG для SPA, и некоторые люди придумали хакерские прокси, но они не подходят для вашего SEO.

Извините: /

...