folderデザインしたい

SNSでサイトをシェアしたときにアイキャッチ画像を表示させる設定方法【OGP】

SNSでサイトをシェアしたときにアイキャッチ画像を表示させる設定方法【OGP】

SNSでサイトをシェアしたときにアイキャッチ画像を表示させる設定方法【OGP】 - https://do.gt-gt.org/setting-ogp/

企業サイト等のURLをXなどのSNSでシェアすると、大きな画像付きのリンクが表示される場合があります。

何もしていないサイトだと、SNSにURLをシェアしてもリンクつきのURLが表示されるだけですが、このような画像が表示されると目を惹きますし、クリックしやすくてアクセス数アップにつながりそうですよね。

実はHTMLファイルに数行のコードを追加するだけで、個人サイトでもこのようなアイキャッチ画像を設定することができます

このような仕組みのことをOGPと呼び、表示される画像のことはOGP画像と言います。個人サイトはもちろんですが、特に企画・イベントの拠点サイトなどではぜひ活用したいですよね。

設定はほとんどコピペで完了します。以下に解説しますので、試してみてください。

STEP1:<html>タグを編集します

OGPを設定したいHTMLファイルを開き、冒頭2行目あたりにある<html>を以下のように書き換えます。

<html lang="ja" prefix="og: http://ogp.me/ns#">

prefix="og: http://ogp.me/ns#"という記述は、「このページではOGPの設定を利用します」という宣言を行うものです。

STEP2:<head>~</head>にOGP設定タグを追加します

<head></head>の間のどこかに、以下のコードをコピペし、必要な個所を書き換えてください。

<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="ここにページのタイトル" />
<meta property="og:description" content="ここにページの概要" />
<meta property="og:image" content="ここにOGP画像のURL" />

上から順番にコードを解説します。

画像の大きさ

<meta name="twitter:card" content="summary_large_image">

SNSでURLをシェアしたときの画像の大きさです。content="summary_large_image"とすれば横幅いっぱいに大きな画像が表示され、content="summary"とすると小さな画像になります。お好みのほうを選んでください。

ページタイトル

<meta property="og:title" content="ここにページのタイトル" />

例えば、このページなら「SNSでサイトをシェアしたときにアイキャッチ画像を表示させる設定方法【OGP】」です。

ページの内容の説明

<meta property="og:description" content="ここにページの概要" />

ここに入力した内容がSNSでシェアされた際に表示されます。使っているデバイスなどによって表示される文字数は異なります。60文字程度に収めるのが無難でしょう。

表示したい画像のURL

<meta property="og:image" content="ここにOGP画像のURL" />

ここにOGP画像として表示したい画像のURLを入れます。必ず絶対パス(http://から始まるURL)で入力してください。

画像サイズは、大きな画像を表示する場合は1200px * 630px程度、小さな画像の場合は200px * 200px以上の正方形にすると良いでしょう。

STEP3:正常に表示されるか確認します

設定が終わったらサーバーにアップロードし、SNSの投稿作成画面にOGPを確認したいURLを貼り付けてみましょう。OGP画像が表示されれば成功です。

OGPの内容はサーバーにキャッシュされるため、変更を加えてもすぐには反映されない場合があります。変更を加えたときは、反映まで数日待ちましょう。

OGPを活用して、サイトをより華やかに!

OGPが表示されるようになると、サイトの内容が伝わりやすく、タイムラインも華やかな感じになります。

ぜひ活用してみてください!

この記事を書いた人

ガタガタ

このサイトと、このサイトの掲載記事のほとんどと、このサイトで配布しているプログラムやテンプレートのすべてを作った人。絵を描いたり、文章を書いたりして暮らしています。

関連記事

YouTubeの埋め込みの縦横比を一定のままレスポンシブ対応させる方法
folderデザインしたい favorite 26

YouTubeの埋め込みの縦横比を一定のままレスポンシブ対応させる方法

Googleカレンダーをサイトにキレイに埋め込むFullCalendarの使い方
folderデザインしたい favorite 24

Googleカレンダーをサイトにキレイに埋め込むFullCalendarの使い方

ファビコンの設定方法!サイト独自のアイコンを作ってオリジナリティアップ
folderデザインしたい favorite 27

ファビコンの設定方法!サイト独自のアイコンを作ってオリジナリティアップ

サイトのオリジナリティを上げる!背景・文字色とフォントをオシャレに変える手順
folderデザインしたい favorite 18

サイトのオリジナリティを上げる!背景・文字色とフォントをオシャレに変える手順

加工ソフト不要!CSSだけで写真やイラストを加工し雰囲気を変える方法
folderデザインしたい favorite 4

加工ソフト不要!CSSだけで写真やイラストを加工し雰囲気を変える方法

サイト更新ごとにCSSファイルを新しく読み込ませてキャッシュ問題を回避する方法
folderデザインしたい favorite 27

サイト更新ごとにCSSファイルを新しく読み込ませてキャッシュ問題を回避する方法