手書きで作ったウエブサイトを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
記事の要約を80文字前後で記述します。 - og:image
シェアするときに表示する画像のURLを指定します。
WEBサイトのURLをコピーしてSNSの投稿欄に張り付ける
WEBサイトを保存してWEBサーバにアップロードして、ページがちゃんと表示されることを確認したら、ページのURLをブラウザのアドレス欄からコピーし、FacebookなどのSNSの投稿欄にペーストします。

すると、Open Graphで指定した情報が反映されてきれいにシェアされていると思います。
- PHP - Ajaxでリアルタイムチャットなど
- PHPMailer導入とトラブル対策
- Netflixの音声をHome Pod mini で再生できない
- wordpress二段階認証の注意点など
- 無料SSL Let's EncryptでWordpressサイトをSSL化する-Ubuntu版
- Wordpressの保存ができない・オートセーブを完全に停止する
- ブラザー・レーザープリンタ HL-317CDW リセット
- 無料SSL Let's EncryptでWordpressサイトをSSL化する-centos版
- 一番簡単なCentOS PHP7.3から7.4への移行方法
- 一番わかりやすいBracketsの導入とトラブルシューティング
- パソコンへのLinuxの導入
- Wordpressの投稿一覧画面から要らない項目を削除する
- VisualStudio2013にあったセットアッププロジェクトを戻す!
- Visual Studioで使うSSHの秘密鍵をputtygenで作成する方法
- PHPMailerのログ出力をSyslogにする
- Open Graph HTML手書きのウエブサイトをSNSでシェアできるよう…
- MacBookProにBootcampでWindows10を入れる際のポイント
- Let's Encryptのトラブルシューティング
- 無料SSL Let's EncryptでWordpressサイトをSSL化する
- client denied by server configuration
- CentOs8 インストール後にすべきことメモ
- C# でWindowsサービスの「説明」を取得する方法
- C# NotifyIconの実装
- 【Windows10】ホテルのWiFi接続時にWiFiのログイン画面が出ない…