Twitterカードってなんでしょう？【OGP設定編！】
2015/04/14
おはこんばんちはmajinです。
いくつも仕込んでるのでいまさらなんですが、「Twitterカードの設定をしてみよう」ってことで書いてみます。
ちなみにこの記事は
・HTMLタグがある程度分かる人
・WordPressを使っている人、使おうとしている人
・各社ブログのカスタマイズの知識がある人
向けですが、チャレンジしてみたい人もウェルカムです（多少乱暴な説明箇所がありますがお許しくださいませ）
“Twitterカード”ってなんぞやって方に
Twitterカードの設定をしたホームページ（ブログ）などのシェアボタンからシェアされると
何もしないと
こんな感じ！
Twitterカードを設定すると
あれ？なんかリンクが現れました！
リンクをクリックするとあら不思議
サイトや記事の概要がツイートの下にくっついて表示されます。
訴求効果絶大ですよね！これは絶対設定しないと損！！
スポンサーリンク
でで、まずはogpタグの設定（ogpタグとは？）からなんですが、さくっと行けるようにogpタグの雛形を作っといたんで下記からコピーして自分のサイトの情報を埋め込んでください。
注意：Page Typesは一番上はWordPress用、二番目はサイト自体の概要、三番目は各記事用です
Card TypesはTwitterのガイドを参考にしてね⇒「Card Types」
|
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 32 33 34 |
<meta property="og:title" content="******** WEB SITE"> <!--Page Types 下記のどれかひとつ--> <meta property="og:type" content="<?php if($_SERVER["REQUEST_URI"] == "/"){ ?>website<?php } else { ?>article<?php } ?>"> <meta property="og:type" content="website"> <meta property="og:type" content="article"> <!--Page Types END--> <meta property="og:description" content="****の公式サイトです。*"> <meta property="og:url" content="http://****.com/"> <meta property="og:image" content="http://****.com/****.jpg"> <meta property="og:image:secure_url" content="http://****.com/****.jpg" /> <meta property="og:site_name" content="******** WEB SITE"> <meta property="og:locale" content="ja_JP"> <meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:width" content="600" /> <meta property="og:image:height" content="600" /> <meta property="fb:admins" content="***************"> <meta property="fb:app_id" content="****************" /> <!--Twtter Cards--> <!--Card Types 下記のどれかひとつ--> <meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:card" content="photo" /> <meta name="twitter:card" content="gallery" /> <meta name="twitter:card" content="app"> <meta name="twitter:card" content="product"> <!--Card Types END--> <meta name="twitter:site" content="********"/> <meta name="twitter:creator" content="********" /> <meta name="twitter:title" content="******** OFFICIAL WEB SITE" /> <meta name="twitter:domain" content="http://****.com/" /> |
ちょっとだけ説明します。
Page Typesとコメントを入れた所ですが、一番上のWordPress用はプログラムで”website”と”article”を切り分けています。
このプラグラムを応用すれば他のタグも切り分ける事が出来ますので”トップ”と”各記事”で表現を変える事も出来ます
参考を書いておきます。
|
1 |
<meta name="twitter:card" content="<?php if($_SERVER["REQUEST_URI"] == "/"){ ?>product<?php } else { ?>gallery<?php } ?>"> |
あと良く躓きそうなやつの参考を
fb:admins ⇒「FacebookのOGP設定に使うadmins IDを簡単に確認する方法」
fb:app_id ⇒「OGP用にFacebookアプリを作成してapp_idを取得する」
twitter:site ⇒ 自分のTwitterアカウントの最初の@無しです
ogpタグをWordPressならheader.phpの～の中に、通常のWEBサイトなら普通に～の中に、各社のブログならこの～の記述が出来る場所に入れましょう。
ogpタグの設定は以上ですが、”WordPressで簡単に”なら「All In One SEO Pack」というプラグインが有りますのでそちらをお試しください。
こんなのもあります「FacebookのOGP画像シミュレータ」
ちょっと長くなってしまったので「Twitterカードってなんでしょう？【Twitterカード設定編！】」へ続きます。
⇒〆の三行
1.しまった長すぎた！
2.ブログでも実験してみるか？
3.OGPは奥が深い！
でした
