LAPOZ-AI
About

Welcome to our Website
LAPOZ-AI

Start a conversation with AI with GPT!

Gatsby Head API,react-helmetのタグについて

2023年05月05日

### は、Facebookのオープングラフタグの1つであり、WebページがFacebookで共有されたときに表示されるタイトルを定義します。

具体的には、は、FacebookのクローラーがWebページをスキャンしたときに、そのページのタイトルを取得するために使用されます。content属性には、Webページのタイトルが動的に挿入される変数({title})が指定されています。

例えば、以下のようなコードを書くことで、WebページのタイトルがFacebookで共有されたときに適切に表示されます。

この場合、Webページのタイトルが"My Awesome Website"であると仮定して、Facebookで共有されたときに正しく表示されます。

は、WebページがTwitterで共有されたときに、カードの種類を定義します。"summary_large_image"の値は、大きな画像を含むカードを指定します。Twitterカードには、4種類の種類があり、"summary_large_image"はそのうちの1つです。

Twitterカードには、以下の4つの種類があります。

Summary Card Summary Card with Large Image App Card Player Card 1つ目の"Summary Card"は、タイトル、説明、画像、URLを表示するカードです。2つ目の"Summary Card with Large Image"は、"Summary Card"に比べてより大きな画像を表示することができます。3つ目の"App Card"は、モバイルアプリのダウンロードを促すカードで、アプリ名、アプリのアイコン、評価などを表示することができます。4つ目の"Player Card"は、動画やオーディオなどの再生可能なメディアを表示することができます。また、"Player Card"には、タイトル、説明、サムネイル画像、再生ボタンなどが表示されます。

これらの種類の中から、Webページの内容に合わせた最適な種類を選択することで、Twitterでの共有がより効果的になるでしょう。

###

<meta name="twitter:creator" content={site.siteMetadata?.social?.twitter || } /> <meta name="twitter:creator" content={site.siteMetadata?.social?.twitter || } />は、Webページの作成者を定義するために使用されます。content属性には、Twitterのユーザー名が動的に挿入される変数が指定されています。具体的には、siteMetadataオブジェクトにあるsocialプロパティの中のtwitterプロパティが、Twitterのユーザー名を表しています。このプロパティが定義されていない場合は、空の文字列が使用されます。

これらのメタタグを正しく設定することで、WebページがTwitterで共有されたときに、適切なカードの種類や作成者が表示されるようになります。