0Pricing
Sveltejs Academy · レッスン

OpenGraphとTwitter Cardのメタデータ

og:およびtwitter:メタタグを追加し、ソーシャルメディアでリッチなリンクプレビューを表示します。

「OpenGraphとTwitter Cardのメタデータ」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

OGタグを使う理由

Open Graphのメタデータを使うと、リンクを共有したときにソーシャルプラットフォーム（Facebook、LinkedIn、Slack）でリッチなプレビューを表示できます。

必須のOGタグ

og:title、og:description、og:image、og:urlが最も重要です。

<svelte:head>
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={imageUrl} />
  <meta property="og:url" content={url} />
</svelte:head>

画像サイズ

さまざまなプラットフォームで最適に表示するには、OG画像の推奨サイズは1200x630です。

Twitterカード

TwitterはOGタグに対応していますが、より細かく制御するために独自のtwitter:メタデータも用意しています。

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />

カードの種類

Twitterはsummary、summary_large_image、app、playerカードに対応しています。

検証

FacebookのSharing DebuggerとTwitterのCard Validatorを使って、タグのプレビューを確認します。

絶対URL

OG画像のURLは絶対URLでなければなりません。相対パスでは機能しません。

ページごとのカスタマイズ

記事、商品、プロフィールごとにOGタグを設定すると、文脈に合ったプレビューを表示できます。

デフォルトの重複を避ける

サイト全体のデフォルト値をルートレイアウトに設定し、ページごとに上書きします。

キャッシュ

ソーシャルプラットフォームはOGデータをキャッシュします。デバッガーを使ってキャッシュを更新します。

実際の効果

リッチなプレビューによって、ソーシャルメディアで共有されたリンクのクリック率が大幅に向上します。

簡単な確認

OG画像のURLはなぜ絶対URLでなければならないのですか？

まとめ

<svelte:head>にOGとTwitterのメタデータを追加し、画像URLには絶対URLを指定すると、リッチなソーシャルプレビューを表示できます。

よくある質問

「OpenGraphとTwitter Cardのメタデータ」レッスンは無料ですか？

はい。「OpenGraphとTwitter Cardのメタデータ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「OpenGraphとTwitter Cardのメタデータ」で何を学びますか？

og:およびtwitter:メタタグを追加し、ソーシャルメディアでリッチなリンクプレビューを表示します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「OpenGraphとTwitter Cardのメタデータ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 動的メタタグのsvelte:head
  2. OpenGraphとTwitter Cardのメタデータ
  3. SvelteKitのJSON-LD構造化データ
  4. Canonical URLとサイトマップの生成
← Sveltejs Academyに戻る