Open Graph HTML手書きのウエブサイトをSNSでシェアできるようにするには

手書きで作ったウエブサイトをSNSでシェア

Open Graphヘッダ 

手書きでHTMLを書いたウエブサイトをSNSなどでシェアする場合に、便利なOpen Graphヘッダ をご紹介します。まずは、HTMLのヘッダ領域にOpenGraph情報を埋め込んでいない手作りサイトをSNSの投稿欄にペーストした場合どう表示されるかを示します。

Open Graphを指定していないと、上記のように画像も何も表示されないシンプルなリンクが表示されます。

サンプル

以下がOpenGraphヘッダ情報のサンプルです。HTMLソースの＜Head＞領域に下記を書き込みます。

<meta property="og:url"           content="https://www.spanky-world.com/pages/joke/joke_lab.html" />
<meta property="og:type"          content="article" />  <!-- トップページの場合は website を使用 -->
<meta property="og:site_name"     content="Spanky World" />
<meta property="og:title"         content="ジョークの大研究" />
<meta property="og:description"   content="世界のジョークを大研究" />
<meta property="og:image"         content="https://www.spanky-world.com/pages/joke/photo/joke-2018-1.JPG" />

各項目の説明

• og:url
  WEBサイトのURLを記述します
• og:type
  WEBサイトのトップページの場合は「website」、
  WEBサイトの中の記事の場合は「article」を指定します。
• og:site_name
  サイトの名前を記述します。
• og:title
  記事のタイトルを記述します、
• og:description
  記事の要約を８０文字前後で記述します。
• og:image
  シェアするときに表示する画像のURLを指定します。

WEBサイトのURLをコピーしてSNSの投稿欄に張り付ける

WEBサイトを保存してWEBサーバにアップロードして、ページがちゃんと表示されることを確認したら、ページのURLをブラウザのアドレス欄からコピーし、FacebookなどのSNSの投稿欄にペーストします。

すると、Open Graphで指定した情報が反映されてきれいにシェアされていると思います。