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

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

カスタマイズ SNS
2016/01/12
10
vanillaice (Akira)
vanillaice (Akira)
OGPFacebookTwitterHTMLEducation初心者向け

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公式アイコンのどちらでも使えます。

Related post

Comments  10

abo
2016/01/13 (Wed) 02:06

すごく参考になりました

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

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

vanillaice (Akira)
Akira
2016/01/13 (Wed) 19:27

To aboさん

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

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

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

Akira
2016/06/19 (Sun) 14:18

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/27 (Mon) 16:20

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" />
お世話になります。

Akira
2016/06/27 (Mon) 20:26

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

-
2017/08/18 (Fri) 15:54

管理人のみ閲覧できます

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

KrowNews
2022/09/16 (Fri) 01:03

お世話になっております。KrowNewsでございます。
Twitterカードについて、現在こちらの記事通りに設定しているのですが、以下の例のように画像の部分を大きく表示することは可能でしょうか?

例:zozotownのTwitter投稿(このような感じに画像を大きく表示させたいです)
https://twitter.com/zozochamp/status/1569625389781381120

参考:弊サイトのTwitter投稿
https://twitter.com/krownewsdesk/status/1570090120509808643

お手隙の際にご回答いただけると幸いです。

vanillaice (Akira)
vanillaice (Akira)
2022/09/16 (Fri) 16:03

To KrowNewsさん

こんにちは ('0')/

現在の設定は
<meta name="twitter:card" content="summary">
になっていますので、content を記事中にある通り
<meta name="twitter:card" content="Summary_large_image">
に変更してくださいね。

KrowNews
2022/09/16 (Fri) 18:52

To vanillaice (Akira)さん

無事に大きく表示させることができました。お忙しい中、ご回答ありがとうございました。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)