カートに入れました

Gatsbyjsブログ記事を共有するときにカードが表示されなくなってしまった

Card validator

でチェックしてみると

カードが見つからないと出てくる

しかし

Seoのコンポーネントにはしっかり書かれている

return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      head={{prefix: "og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#" }}
      title={title}
      titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
      meta={[
        {
          name: `twitter:card`,
          content: `summary`,
        },
        // {
        //   property: `twitter:image`,
        //   content: ogpImage,
        // },
        {
          name: `twitter:creator`,
          content: site.siteMetadata?.social?.twitter || ``,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:type`,
          content: type,
        },
        {
          property: `og:url`,
          content: url || site.siteMetadata?.siteUrl,
        },
        {
          property: `og:image`,
          content: ogpImage,
        },
        {
          property: `og:width`,
          content: 1200,
        },
        {
          property: `og:height`,
          content: 600,
        },
        {
          property: `site_name`,
          content: defaultTitle,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )

ググってみると ヘッダータグの中のメタタグの前に他のタグがあると読み込まれないらしい

gatsby-ssr.jsに

export const onPreRenderHTML = ({
  getHeadComponents,
  replaceHeadComponents,
}) => {
  const headComponents = getHeadComponents();
  headComponents.sort((x, y) => {
    if (x.props && x.props["data-react-helmet"]) {
      return -1
    } else if (y.props && y.props["data-react-helmet"]) {
      return 1
    }
    return 0
  })

  replaceHeadComponents(headComponents);
}

こんな感じのことを書き込めと書いてあるサイトがちらほら

しかし、これを試してもうまくいかず、、、

react-helmetをreact-helmet-asyncに変えてみる

yarn add react-helmet-async gatsby-plugin-react-helmet-async
yarn remove react-helmet gatsby-plugin-react-helmet
gatsby-config.js 
plugins: [
    // `gatsby-plugin-react-helmet`,
    `gatsby-plugin-react-helmet-async`,
]
gatsby-browser.js&gatsby-ssr.js 
import './src/style.css'
import 'prismjs/themes/prism.css'

import React from "react"
import { CartProvider } from 'use-shopping-cart'
import { HelmetProvider } from 'react-helmet-async';

export const wrapRootElement = ({ element }) => {
  return (
    <HelmetProvider>
      <CartProvider
        mode={"payment"}
        cartMode={"client-only"}
        stripe={process.env.GATSBY_STRIPE_PUBLISHABLE_KEY}
        successUrl={'https://hi1t0.com/page2'}
        cancelUrl={'https://hi1t0.com/cart'}
        currency={'jpy'}
      >
        {element}
      </CartProvider>
    </HelmetProvider>
  )
}
// import { Helmet } from 'react-helmet'
import { Helmet } from 'react-helmet-async'

react-helmet-asyncに変えても解決しない。。。 からとりあえずreact-helmetに戻す

問題はgitのログを見ると下のコード(use-shopping-cartを使った)辺りを変更したところから共有がうまくいかなくなっていた

gatsby-browser.js 
import './src/style.css'
import 'prismjs/themes/prism.css'

import React from "react"
import { CartProvider } from 'use-shopping-cart'

export const wrapRootElement = ({ element }) => {
  return (
      <CartProvider
        mode={"payment"}
        cartMode={"client-only"}
        stripe={process.env.GATSBY_STRIPE_PUBLISHABLE_KEY}
        successUrl={'https://hi1t0.com/page2'}
        cancelUrl={'https://hi1t0.com/cart'}
        currency={'jpy'}
      >
        {element}
      </CartProvider>
  )
}

一度yarn buildでビルドしてみてpublic/index.htmlの中身を見てみる

<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><title data-react-helmet="true"></title>

...

メタタグの数が少なかったreact-helmetの中で定義したものが含まれていなかった。

OGPが読み込まれるためにはあらかじめファイルに書き込まれていなければいけないらしい。今のままではサイトにアクセスした時にreact-helmetで定義したのもが後からHTMLのヘッダータグに入り込んでいる状態。これを変えなければいけない。

gatsby-ssr.jsの内容を消去するとogpは問題なくなる、しかしuse-shopping-cartが使えない。。。