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

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

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

SpankyJpn最新ブログ記事
2020-04-23 Open Graph 手書きのウエブサイ…
2020-04-06 C# NotifyIconの実装
2020-04-01 一番わかりやすいBracketsの導入…
2020-03-31 無料SSL Let's EncryptでWordpre…
2020-02-18 【Windows10】ホテルのWiFi接続…
2020-01-18 Let's Encryptのトラブルシュー…
2019-10-20 C# で Task を使う
2018-05-20 MacBookProにBootcampでWindows1…