FC2でOGPを利用したTweetの設定【Twitterカード】

FC2でOGPを利用したTweetの設定【Twitterカード】

SNS
2016/01/12 7
vanillaice (Akira)
vanillaice (Akira)
OGP Facebook Twitter HTML Education 初心者向け

SNSシェアに欠かせないOGP(おーぷん ぐらふ ぷろとこる) を含めたFC2でのシェアの仕方についてです。

SNS共通の設定がOGPと呼ばれるものです。
一体なんぞ? というのは通常の単純なシェアというのは見た目がとっても寂しい物です。
URLだけポーン みたいな (´・ω・`)
OGPを正しく設定していると表示がリッチになります。

表示サンプル

FBシェア表示例
Twitterシェア表示例

んで毎度のことですが、私が配信しているテンプレートに限定したお話し です。
一部は汎用的に使える方法ですが 基本的に「私のテンプレートでは」という限定的な説明ですー。
どうやれば上記のような表示形式になるのか というお話しですね れっつごー (●'ω')ノ

記述する場所ついて

テンプレートhtmlの </head> の直前をおすすめします。

Facebookシェアについて

FBについては何もしなくて良いです。個人IDの記入も不要。

Twitterシェアについて

こちらはFBと違い 個人アカウント名が必要 です。
そしてメタ要素も 2つ 追加してください。
個人アカウントが必要ですのでテンプレートに事前に入れておくことができません。従ってここは個人の任意設定となります。

<meta name="twitter:card" content="summary"> 
<meta name="twitter:site" content="@Twitter ID">

Twitterのシェア表示形式は Twitter card (ついったー かーど) と呼ばれており、現在では SummarySummary_large_image の2種が用意されています。 SummaryカードとSummary_large_imageカードの比較

@Twitter ID の部分はアカウント名 です。表示名ではなく。
アカウントには最初から@マーク付いてますよね それのことです。

記載が済みましたらTwitterのvalidator(ばりでーた)にかけます。
現在ではこれが認証も兼ねているようですので必ず行います。
Card validator
Twitterにログインした状態で行ってください。
お好きな個別記事を開きアドレスバーからURLをコピーして指定箇所に記入してバリデート。

2つのメタ要素が正しく設定できていれば緑色の背景で認証されたことが示されます。
何かしらの不備がある場合は赤背景。
そして右の Log の部分で問題点を示唆してくれます。

まとめ

以上がFacebookとTwitterでの OGPを利用したシェア設定です。
テンプレートに付いているFB及びTwitterアイコン(私が付加しているもの)、そしてブログ個人設定から表示できる両SNS公式アイコンのどちらでも使えます。

 7

There are no comments yet.
abo
すごく参考になりました

こんばんわ。
いつも、ちょこちょこと勉強させてもらってます。

この記事もすごく参考になりました。
ありがとうございます。ホント感謝です。

2016/01/13 (Wed) 02:06
vanillaice (Akira)
Akira
To aboさん

コメントありがとうございます :)
そう言って頂けると励みになります。
ホントは「web一般」という形で書けると良いのですが。
なにせ未熟で申し訳ない ^^;

2016/01/13 (Wed) 19:27
アメリカの真理先生

ありがとうございました。
meta propertyと言うのがなかったのですが、<meta name=" ではじまるラインを全部削除して、
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitter ID">
を入れたら出来ました。

2016/06/19 (Sun) 08:15
Akira
To アメリカの真理先生さん

お役に立てたなら幸いです。

meta nameを代わりに削除されたということですが、
本ページ内の「meta propertyを削除〜」という手順はテンプレートに記載が「有った場合」にのみ生じるものです。
含まれていない場合にはなにもする必要はありません。
そして meta propertyとmeta nameは全く別物ですので、meta nameは削除しないようにお願いします。
既に削除されたということですから、元に戻しましょう。
公式テンプレートの「basic_white」をお使いになっている、というのを前提に

<meta name="author" content="<%author_name>" />
<meta name="description" content="<%introduction>" />

この2行を

<title><!--not_index_area--><%sub_title> - <!--/not_index_area--><%blog_name></title>

のすぐ「上」に追加修復してください。
meta nameのauthorはページの著作主を表し、meta nameのdescriptionはページの概要を表している重要なものです。
よろしくお願いします。

2016/06/19 (Sun) 14:18
アメリカの真理先生
To Akiraさん

お忙しいところ有難うございました。
追加しました。
ところで以下も前に削除したのですが、よかったのでしょうか。

<meta name="twitter:image" content="https://pbs.twimg.com/media/CY0QTyfUEAAS5ex.png">
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
お世話になります。

2016/06/27 (Mon) 16:20
Akira
To アメリカの真理先生さん

こんばんは (●'ω')ノ

<meta name="twitter:image" content="https://pbs.twimg.com/media/CY0QTyfUEAAS5ex.png">

これは特に問題ないです。

<meta http-equiv="Content-Style-Type" content="text/css" />
そして
<meta http-equiv="Content-Script-Type" content="text/javascript" />

この2つはソース内で使用される言語にカスケーディングスタイルシート(CSS 上記)とジャバスクリプト(JS 下記)がありますよ、という宣言です。
一応html4では記述しておくのが推奨ですので、テンプレートがhtml5でない場合には入れておくべきでしょうね。
アメリカの真理先生さんがご利用のテンプレはhtml4です。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

こちらはInternet Explorer(Microsoft社の旧ブラウザ)からの閲覧時、互換設定を有効に「しない」というものです。
互換設定を強制的に拒否してEdgeモード(標準)で閲覧してもらう必要がある際に記述します。
これは入れておいたほうが良いですね。
個人的に互換設定は大嫌いです(笑)
互換設定というのは何らかの事由で管理が為されていないページ、最新web記述に書き直しがされていない古いページなどを閲覧する際の一時的処置にすぎません。

-------

<head>〜</head>内にはページの根幹を成す重要な要素がたくさん詰まっています。
記載されていない内容については触らないようにお願い致します。

2016/06/27 (Mon) 20:26
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/08/18 (Fri) 15:54

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

SNS