手書きで作ったウエブサイトを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で指定した情報が反映されてきれいにシェアされていると思います。
このカテゴリのページリンク |
同一カテゴリの記事一覧
- 【テクニカル】WordPressを多言語化する
- 【テクニカル】CentOs8 インストール後にすべきことメモ
- 【テクニカル】一番簡単なCentOS PHP7.3から7.4への移行方法
- 【テクニカル】パソコンへのLinuxの導入
- 【テクニカル】Open Graph 手書きのウエブサイトをSNSでシェアできるよう…
- 【テクニカル】C# NotifyIconの実装
- 【テクニカル】一番わかりやすいBracketsの導入とトラブルシューティング
- 【テクニカル】無料SSL Let's EncryptでWordpressサイトをSSL化する
- 【テクニカル,未分類】【Windows10】ホテルのWiFi接続時に「インターネット接続…
- 【テクニカル】Let's Encryptのトラブルシューティング
- 【テクニカル】C# で Task を使う
- 【テクニカル】MacBookProにBootcampでWindows10を入れる際のポイント
- 【テクニカル】PHPMailer導入とトラブル対策
- 【テクニカル】PHPMailerのログをSYSLOGに出力
- 【テクニカル】Visual Studio 2017で使うSSHの秘密鍵をputtygenで作成す…
- 【テクニカル】Wordpressの投稿一覧で要らない項目を削除する方法
- 【テクニカル】Google SEO の要点 - Better Google SEO
- 【テクニカル】wordpressを始める前に絶対すべき準備 - Things you need …
- 【テクニカル】Wordpress URL設定間違い・サイト移動のトラブル対応 - Ho…
- 【テクニカル】VisualStudio2013セットアッププロジェクトを戻す! - Vis…
- 【テクニカル】C# でWindowsサービスの「説明」の文を取得する方法 - C# …
- 【テクニカル】動画配信に最低限必要なモノ(動画配信環境)
- 【テクニカル】動画配信のトラブル対処(ブーンというノイズが乗る)
- 【テクニカル】client denied by server configuration: