[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/)
ここにメタデータの種類と書き方が記載されています。

<meta>要素は内容が多いため 記事を数回に分けています。

[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 を使用して内容を生成できる部分を作る要素です。

関連記事
この記事をはてなブックマークに追加

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.