ほんっとにはじめてのHTML5とCSS3：[45-5] meta要素で OGPを設定しよう

[45-5] meta要素で OGPを設定しよう

最終更新日：2017年12月08日　（初回投稿日：2013年02月07日）

OGP（Open Graph Protocol）の設定にも <meta>要素を使います。
Open Graph プロトコルは、もともと Facebookで作成されたものだそうです。
Facebookだけじゃなく、Twitterや Google+、LINE などの SNSで、ウェブページをシェアしてもらった時にそのページの「タイトル・抜粋文・イメージ・URL」のセットで表示させる仕組みです。

こちらは OGP本家のウェブサイト（http://ogp.me/）
ここにメタデータの種類と書き方が記載されています。

[45-1] meta要素で基本情報を指定しよう: <meta>要素のルールと、属性のルール
[45-2] meta要素の charset属性で文字コードを指定しよう: charset属性で文字エンコードを指定します。
[45-3] meta要素の name属性でサイトの情報を指定しよう: name属性でサイトの説明文、クローラーへの指示、ビューポートの指定などをします。
[45-4] meta要素の http-equiv属性で動作を指示しよう: http-equiv属性でページのリダイレクトを指定できます。
[45-5] meta要素で OGPを設定しよう　←今日はココ: Facebook などの SNSでシェアされたときの「サムネイル画像や説明文などのセット」を表示させます。

ブログシステムや CMS では自動的に

WordPress では、プラグインを利用して簡単に OGP を設定できます。
ブログシステムなども、管理画面で OGP 設定ができるものが多いです。

管理画面で設定すれば、自分で <head>部分を編集しなくても、自動的に <meta>要素が書き出されます。

そのあと「シェアボタン（SNSボタン）」を設置すれば、ビジターがボタンを押してシェアすることができます。
WordPress はシェアボタン用のプラグインを入れれば簡単。
ブログシステムでも、管理画面でシェアボタンを設定できます。

シェアした後、そのビジターの SNS上に、あなたのページへのリンクがグラフィカルな（アイキャッチ画像・タイトル・簡単な説明文・URLの）セットで表示されます。これが OGPによる表示。クリックすることで該当ページにジャンプします。
下記は Twitterでの表示例。

手動で OGP を設定する

自分で <head>部分に <meta>要素を書けば、手動でも設定できます。
下記はサンプルです。（ハイライト部分が OGP）
<meta>要素の「property属性」を使います。Twitterカードだけは「name属性」を使います。

「property属性」は W3C, WHATWG 双方の使用には記載のない、オプション追加された属性です。

<head>
  <meta charset="UTF-8"> 
  <title>ページタイトル</title>
  <link rel="stylesheet" href="css/default.css">
  <link rel="stylesheet" href="css/add.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="index,follow"> 
  <meta name="author" content="著作者">
  <meta name="description" content="紹介文">
  <meta property="og:type" content="blog（ページのタイプ）">
  <meta property="og:description" content="ページの紹介文">
  <meta property="og:title" content="ページタイトル">
  <meta property="og:url" content="ページのURL">
  <meta property="og:image" content="アイキャッチ画像のURL">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:locale" content="ja_JP（ローカル言語）" />
  <meta property="fb:app_id" content="FacebookのApp-ID">
  <meta name="twitter:card" content="summary（カードの種類）">
  <meta name="twitter:site" content="ツイッターID">
</head>

OGP設定は、すべての SNS で共通に使えます。
ただ、Facebook, Twitter は設定の時にアカウントが必要です。
Facebook は自分の「App-ID」か「adminID」のどちらかが必要（17行目）
Twitter は「ツイッター ID」が必要です（19行目）

このあと「シェアボタン」を設置します。
シェアボタンは、各SNSのページでコードをゲットして自分の HTMLファイルに貼ればOK。

OGP設定方法

設定方法は、この「ほんっとに...」や、もう1つのブログ「＊Web Design 覚え書き＊」で、詳しく書いていますので、リンクを貼っておきます。参考にしてみてください。

OGPの設定詳細
OGP設定のHTMLソースと Facebook, Twitter Cardsの設定を全部まとめてメモ！（＊Web Design 覚え書き＊）
<head>要素のprefix属性への記述、画像のサイズ、デバッガー、FacebookのApp IDの取得方法などを書いています。

シェアボタンのゲットのしかた
（ちょっとメモ）FC2ブログにはてブと Google+1 のボタンをつける
FC2ブログに手動でSNSボタンを設置する記事ですが、Twitter, Facebook, はてなブックマーク, Google+1, LINE のボタンを、各サイトでゲットする方法を書いています。

WordPressでの OGP設定
↓WordPress で OGP用のパーツテンプレートを作ります。
WordPressでOGP設定。Facebook, Twitter Cardsもプラグイン無しでOK！（＊Web Design 覚え書き＊）
↓WordPress でのシェアボタンの設置。プラグインも使っています。
プラグインSimple Share Buttons Adderで記事にシェアボタンを設置し「はてな」は手動で入れてみた（＊Web Design 覚え書き＊）

FC2ブログでの OGP設定
FC2ブログは管理画面で自動設定できますが、手動で（変数を使って）編集しています。
（ちょっとメモ）FC2ブログで OGP設定（Facebook, Twitter Cardsも）

次回予告

次回は、<template>要素を使ってみましょう。
<template>要素は HTML5 で登場した新しい要素。テンプレート部分を作ります。
ページの読み込み時に描画されず、後で JavaScript を使用して内容を生成できる部分を作る要素です。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。