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

/ admin
open graph

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

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

no open graph
　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で指定した情報が反映されてきれいにシェアされていると思います。

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

同一カテゴリの記事一覧