はじめに

私たちの自社サイトのリンクをSNS上でシェアした際に、画像が表示されずにシンプルなリンクプレビューだけが表示されてしまいます。これでは情報の伝達が十分にできず、利用者の関心を引くことも難しいです。そこで、画像付きのカード表示を実現するために、メタタグの設定方法を調査した時の内容をまとめます。

さいごに簡単な確認問題を用意しています。
この記事がもしよければ、内容の確認として是非お試しください！

メタタグの設定方法

SNSで画像付きのカード表示を実現するためには、以下のようにメタタグを設定する必要があります。

<meta property="og:title" content="サイトのタイトル">
<meta property="og:description" content="サイトの説明文">
<meta property="og:image" content="画像のURL">
<meta property="og:url" content="サイトのURL">

各プロパティの説明:

og:title
サイトのタイトルを指定します。これはカードの見出しに表示されます。

og:descriptionサイトの説明文を指定します。これはカードの本文に表示されます。

og:image
カードに表示する画像のURLを指定します。画像は推奨サイズにリサイズしておくことが望ましいです。

og:url
サイトのURLを指定します。これにより、カードをクリックした際に対応するページに遷移します。

上記の基本的なメタタグを設定した後は、追加のプロパティやカスタマイズオプションを指定することもできます。例えば、og:typeプロパティでサイトのコンテンツタイプを指定したり、og:site_nameプロパティでサイト名を指定することも可能です。

まとめ

SNS上で自社サイトのリンクをシェアする際に、画像付きのカード表示を実現するためには、適切なメタタグの設定が必要です。og:title、 og:description 、 og:image 、 og:url ``のプロパティを使用して、カードの見出し、本文、画像、URLを指定します。

※注意: メタタグの設定方法はSNSプラットフォームや利用するメタタグの種類によって異なる場合があります。各プラットフォームやメタタグのドキュメンテーションを参照して、最新の設定方法を確認してください。

さいごに

簡単な確認問題を用意しました。
この記事がもしよければ、内容の確認として是非お試しください！