Closed2022/05/10にクローズ7

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

OGP対策のプラグイン

OGPは<head>書くからヘルメットなのかな？

OGP : Open Graph Protocol

https://ogp.me/

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

<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>

オブジェクトタイプ

https://ogp.me/#types

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

本体は`React Helmet`

https://github.com/nfl/react-helmet

GatsbyとSEO

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

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

このスクラップは2022/05/10にクローズされました