Zenn
Closed7

GatsbyJSとOGP（gatsby-plugin-react-helmet）

Gatsby.js
shotakahashotakaha

OGP : Open Graph Protocol

https://ogp.me/

shotakahashotakaha

基本的なメタデータを整理する

<html prefix="og: https://ogp.me/ns#">
    <head>
        <title>タイトル</title>
        <meta property="og:title" content="タイトル" />
        <meta property="og:type" content="オブジェクトタイプ" />
        <meta property="og:url" content="サイトのURL" />
        <meta property="og:image" content="画像のURL" />
    </head>
</html>
shotakahashotakaha

オブジェクトタイプ

https://ogp.me/#types

  • ドキュメントに書いてあることがよく分からない・・・CURIE（compact URI）の一種のよう
  • まずNamespace URIを設定して、そこに含まれるタイプを設定する感じ・・・かな
  • さらにその下にもプロパティみたいなのがあって設定できるみたい（ここまでやらなくてもよさそう）
shotakahashotakaha

SEOコンポーネントの作り方

https://www.gatsbyjs.com/docs/add-seo-component/

  1. gatsby-config.jsのsiteMetaDataに基本的な情報を書いておく
  2. SEO用のコンポーネント（src/components/seo.js）を作成する
  3. 読んでいくと大変だけど、とりあえず最後のコードをコピペすれば良さそう
  4. それを足がかりに自分用にカスタマイズすればOK（だと思う）
このスクラップは2022/05/10にクローズされました