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

2020年4月23日 / admin

手書きで作ったウエブサイトを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の投稿欄にペーストします。

share page

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

このカテゴリのページリンク

同一カテゴリの記事一覧

　
　