ほんっとにはじめてのHTML5とCSS3：（ちょっとメモ）FC2ブログで OGP設定（Facebook, Twitter Cardsも）

（ちょっとメモ）FC2ブログで OGP設定（Facebook, Twitter Cardsも）

最終更新日：2019年02月06日　（初回投稿日：2015年07月11日）

OGPをFC2ブログに設置してみたので、設置方法をご紹介します。

FC2ブロガーじゃない方はごめん。
ただしOGPの基本ソースを書いています。また、WordPressでOGPを設置する方法へのリンクもあります。

OGP（Open Graph Protocol）は、記事のSNSボタンを押してシェアしてもらったとき、ページの「タイトル・抜粋文・イメージ」などを表示する、「Facebook、Google+、Twitter、mixi、GREE」など全てのSNSで共通の機能です。
目立つし、拡散してもらえる確率が上がるので、ブログにぜひ設定しておきたいですね。

しかし、FC2ブログだけは管理画面での設定機能が無いんです。
なので手動で設定する必要があります。

この記事を書いた2015年7月時点では、FC2ブログはOGPに対応していませんでしたが、 2015年9月にOGP設定が追加されました！
＊詳細（でもなかったけど）は、FC2総合インフォメーションへ。

FC2ブログ管理画面で「環境設定」＞「ブログの設定」＞「メタタグの設定」で「OGP設定」を有効にすればOK。

本記事は、FC2ブログに手動でOGP設定する方法をメモったものです。
FC2の管理画面でOGP設定をするのであれば、本記事に書いているテンプレートの <head>部分を編集する作業は不要です。
ですが、Facebook, Twitter Cardsのアカウントを取っておき、FacebookのApp-IDを取得しておくといった準備は必要ですので、この記事を参考にしてください。
また、OGPの基本的なソースも書いていますので、参考になる（はず）と思い、この記事は残しておきます。（2015年10月記）

手動で設定した場合は、こんなかんじになります。
（これはTwitterでシェアした場合の表示例です。）

本日のINDEX

まずはOGPの基本的なソースについて
前もってやっておくべきコト
FC2ブログにOGPを設置する（手動によるOGP設定 = 管理画面で設定すれば不要です！）
ソースが正しいかどうか確認しよう
おまけ：WordPressサイトにOGPを設置する方法

まずはOGPの基本的なソースについて

OGPは、サイトの <head>内の <meta>要素にソースを記述をするだけ。
FC2ブログ管理画面でOGP設定すれば、自動的にソースが書きだされますが、何が書き出されたか知りたいかたは、ちょっと読んでみてください。

Facebookと、Twitter（Twitter Cardsと呼ばれてるモノ）は、基本のOGPソースがあれば、あと数行追加するだけで機能します。

「＊Web Design 覚え書き＊」で、基本をまとめて書いておきましたので、参考にしてください。

って、いきなりリンクに飛ばすのも乱暴なので（上の記事を読んでもらったほうが、実際わかりやすいですが）、
お急ぎの方のために、ざっと基本的なOGP用のソースコードを書いておきます。
下記の5〜13行目の <meta>要素群がOGP設定。

<!DOCTYPE html>
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="article" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name"  content="サイト名" />
<meta property="og:description" content="ページのディスクリプション" />
<meta property="fb:app_id" content="App-ID" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@[Twitter ID]" />

</head>

ソースの説明をざっくりと。

3行目：<head>に prefix属性で書いているのは、OGPの初期設定です。これはHTML5の場合。
XHTMLは、<html>要素に xmlns属性で書きます。
XHTML用のソースは「＊Web Design 覚え書き＊│OGP│<head>要素のprefix属性への記述」をご覧ください。
5〜10行目：これはOGPの全SNS共有の設定です。上から順に、「ページのタイトル」「そのページのタイプ（トップページなのか記事なのか..など）」「URL」「表示する画像のURL」「サイト名」「ディスクリプション（ページの説明文）」を指定しています。
5〜8行の4つは必須。あとはオプションプロパティなので、必要なものを足せばOKなんです。
11行目：Facebook専用のプロパティ。ここでは「App-ID」を指定しています。
「adminID」でもOK。（ただし adminID は、個人のページが特定できるので、それが気にならないヒト向け）
12〜13行目：Twitter Cards用のプロパティです。
12行目はカードのタイプ。ここではデフォルト表示の summary にしていますが、カードタイプはいろいろあります。写真をデッカくするヤツとかね。
13行目はご自分のTwitterのアカウントIDです。

詳しくは「＊Web Design 覚え書き＊」のほうが丁寧に書いていますので、ご覧ください。

で、当然ですが、上記のソースをFC2ブログのテンプレートに貼っても、うまくいきません。
手動でOGP設定する場合は、上のソースを元に、FC2のテンプレート変数を使って書き換える必要があります。
FC2ブログ管理画面でOGP設定を「有効」にした場合は、ソースに関しては何もしなくてOK。自動的に書きだしてくれるからね。
ただし次項の「前もってやっておくべきコト」や「動作確認」は必要です。

前もってやっておくべきコト

OGP設定をする前に、やっておくべきことです。

Facebook, Twitter Cards を利用するなら、 Facebook, Twitter のアカウントを取っておく。
Facebookの「App-ID」をゲットしておく。「adminID」でもイイけど。
「App-ID」取得方法は「＊Web Design 覚え書き＊│OGP│FacebookのApp IDの取得」をご覧ください。
「adminID」の調べ方はコチラのサイト様で：「WordPress＆facebook連携設定① OGP設定方法」
Twitter Cards を使う場合は、summary以外のカードタイプも見て選んでおくといいかも。
手動でOGPを設定する場合は、固定の画像ファイルを用意する。
残念なことに、FC2には 記事ごとの画像を指定するテンプレート変数が無いので、
手動でOGP設定をする場合は画像は固定になります。
ですので固定画像を1つ用意します。（トップページのスクショとか、お好みで）
サイズは最小でも600×315px。facebookの推奨は1200×630px以上だって。retina対応ね。
Twitter Cards の Summaryだと左右をトリミングされるので、それを考慮して作ろう。
・OGP画像については「＊Web Design 覚え書き＊│OGP│OGP画像のサイズ」をご参考に。
★FC2ブログ管理画面でOGP設定をした場合は、「記事の最初に出てくる画像」か「プロフィール画像」または「画像なし」になるようです。こっちのほうがイイね。

FC2ブログにOGPを設置する（FC2ブログ用ソースコード例）

FC2ブログの管理画面で「OGP設定」を有効にした場合は、この項目は不要です。

手動でOGPを設定する場合は、FC2ブログ管理画面の「テンプレートの設定」で、テンプレートの<head>部分に<meta>要素を書き加えて設定します。

★必ずテンプレートのバックアップを取ってから作業してください。
　バックアップを取らないズボラーは、テンプレートが変になって元に戻せなくなっても、後の祭りw♪　笑えんけどな。
★あくまでも自己責任でテンプレートの編集をしてください。
　全てのFC2ブログテンプレートに対応してるかどうかは検証していないのでわかりません。このブログではウマくいったけどね。

★ご自分のブログに合わせて書き換えるべき場所がありますのでご注意ください。

1行目：HTML5での記述です。XHTMLのかたはコチラをご覧ください。
4行目：作成したOGP用の画像をサーバにアップして、そのURLをここに指定。
16行目：ゲットしたFacebookのApp-ID（15字の半角数字）をここに指定。
17行目：Twitter Cardsの種類。デフォルトのsummary以外にしたければ書き換える。
（カードタイプによってプロパティを追加する必要もあります。詳しくはTwitter本家で。）
18行目：ご自分のTwitterアカウントIDを＠をつけて書きます。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

<meta property="og:site_name" content="<%blog_name>" />
<meta property="og:image" content="画像のURL" />
<!--index_area-->
<meta property="og:title" content="<%blog_name>" />
<meta property="og:type" content="blog" />
<meta property="og:description" content="<%introduction>" />
<!--/index_area-->
<!--permanent_area-->
<meta property="og:title" content="<%sub_title>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<%url>blog-entry-<%pno>.html" />
<meta property="og:description" content="<!--topentry--><%topentry_discription><!--/topentry-->" />
<!--/permanent_area-->
<meta property="fb:app_id" content="App-ID" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@[Twitter ID]" />

★これもご注意
 などのコメントっぽい記述がありますが（5,9,10,14,15行）これはFC2ブログの「エリア変数」なので取っちゃだめよ。
〜はトップページのみでの表示、
〜は固定リンク画面（blog-entry-数字.html）での表示部分のことです。
〜はエントリー（記事）を繰り返し表示させるエリアです。
エリア変数は、表示された部分に合わせて、異なるHTMLを書きだす機能です。

＊テンプレート変数の詳細はコチラ→FC2ヘルプ | FC2ブログ | テンプレート用　変数一覧

★上記のソースを記述する場所について。
FC2ブログの管理画面＞設定＞テンプレートの設定 を開きます。
今適用しているテンプレートの「複製」を作って編集。
「（テンプレート名）のHTML編集」の入力エリアで、
[1] <head>要素を書き換え（XHTMLだったら<html>要素ね）、
[2] 上記の<meta>要素群を<head>〜</head>内に追加します。
編集したテンプレートを「適用」すれば、ブログに反映されます。
最後に「更新」をクリックするのを忘れずに。

ソースが正しいかどうか確認しよう

OGPの設定が正しいかどうか確認します。コレ重要です。
（手動設定の場合で記述ミスがある場合、表示されなかったり、表示されても意図せぬモノだったりするので注意が必要です）

Facebookの Open Graph Debuggerで確認
Facebookで用意されているデバッガで、OGPの記述が正しいかどうか確認できます。
コチラで確認→ Open Graph Debugger（要Facebookログイン）
Twitter Cardsのバリデータで確認
Twitter Cards はカードタイプ別に特有のプロパティがあるので、デフォのsummary以外にしたのなら確認したほうがイイです。
コチラで確認→ Twitter Developer Card validator（要Twitterログイン）

おまけ：WordPressサイトにOGPを設置する方法

今回の記事の手動設定は、OGPの基本のソースを FC2のテンプレート変数で書き換えて使いました。
WordPressでも同じこと。WordPressのテンプレートタグで置き換えるだけです。
この方法でプラグインを使わずに、WordPressにOGPを設置してみましたので、興味のある方はコチラもご覧ください。

関連記事

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

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

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

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

最終更新日：2019-02-06（Wed）│
投稿日：2015-07-11（Sat）│
カテゴリ：ちょっとメモ

Pagetop ↑

« next ホーム prev »

コメントの投稿