写真ブログを立ち上げるにあたって、こちらではやっていないことにも挑戦してみました。
今回はTwitterカードとOGPの設定です。
ちょっとつまづきました。忘れないように備忘録として残しておきます。という下書きを2ヶ月前に書いたまま忘れていました。備忘になってないです。
改めて書き直しているので、ちょっと間違ってるとことかあれば指摘してください。
スポンサーリンク
OGPとTwitterカードを設置する
参考にしたのはゆめぴょんさん（@yume_pyon）のサイトです。設置するメリットなど詳細に書かれているので、詳しく知りたい方はそちらを参照してください。
で、上記の記事に書かれているコードをコピペして使わせてもらったんですが、なんかうまく動いていない…。
トップページで警告が出る
OGP設定後、確認のためFacebookのOpen Graph Object Debuggerを回していたらトップページになにやら不穏な警告が。（スクリーンショットが残ってませんでした。すいません。）
原因は以下の指定をしていたこと。
|
1 2 |
<meta property='article:publisher' content='https://www.facebook.com/ametamabiyori' /> <meta property='og:type' content='website'> |
「article:publisher」は指定したFacebookページと結びつけるためのコードなんですが、og:typeに「website」を指定する場合は外した方がよさそうです。
記事ページの抜粋文章が反映されない
これなんだったかなぁ…。なんか反映しなかったんですよ。時間が出来たらちゃんと検証するかもしれません。
タイトルを見る限り、これがメインだったはずなんですけどね。
気になる方は、下にソース晒しておきます。確認してみてください。
私が使用しているソース
ほぼゆめぴょんさんのソースをそのまま使っていますが、OGPについては上で書いた2箇所とfb:adminsのところを修正しました。
あと、Twitterのカードタイプをラージイメージにしています。一応写真ブログなので大きめ画像を見せたいなって。
ソース全文を貼っておきます。細かいことは見てもらったらわかると思います。あとコピペでも動くと思いますが、その場合は【】内の部分は自分用に書き換えてください。
|
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 35 36 37 38 |
<meta property='og:locale' content='ja_JP'> <?php if(is_single()){ // 投稿記事 ?> <meta property='article:publisher' content='【FacebookページのURL】' /> <meta property='og:type' content='article'> <meta property='og:title' content='<?php the_title() ?>'> <meta property='og:url' content='<?php the_permalink() ?>'> <?php if(have_posts()): while(have_posts()): the_post(); echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";//抜粋から endwhile; endif; ?> <?php } else { //ホーム・カテゴリー・固定ページなど ?> <meta property='og:type' content='website'> <meta property='og:title' content='<?php bloginfo('name') ?>'> <meta property='og:url' content='<?php bloginfo('url') ?>'> <meta property='og:description' content='<?php bloginfo('description') ?>'> <?php } ?> <meta property='og:site_name' content='<?php bloginfo('name'); ?>'> <?php if (is_single() or is_page()){//投稿記事か固定ページ if (has_post_thumbnail()){//アイキャッチがある場合 $image_id = get_post_thumbnail_id(); $image = wp_get_attachment_image_src($image_id, 'full'); echo '<meta property="og:image" content="'.$image[0].'">';echo "\n"; } elseif( preg_match( '/<img.*?src=(["\'])(.+?)\1.*?>/i', $post->post_content, $imgurl ) && !is_archive()) {//アイキャッチ以外の画像がある場合 echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n"; } else {//画像が1つも無い場合 echo '<meta property="og:image" content="【記事内に画像がない場合の代替画像URL】">';echo "\n"; } } else { //ホーム・カテゴリーページなど echo '<meta property="og:image" content="【トップページやカテゴリページ用画像URL】">';echo "\n"; } ?> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="【サイトのツイッターアカウント。@から】"> <meta name="twitter:creator" content="【自分のツイッターアカウント。@から】"> <meta name="twitter:domain" content="【ブログのドメイン】" /> |
【 】内の書き方わかんないなーって思ったら、あめたまびよりのソースを直接見てもらえば多分書かれていますので、そっちを見てくれても大丈夫です。
まとめ
下書きにタイトルと要点だけ書いて忘れていました。全く備忘録になっていなかった…。
いかんですね。ちゃんと忘れる前に記事にしないと。もしくはちゃんと要点をまとめておかないと。箇条書きだけで後でも理解できると思ってたら大間違い。自分を過信するなっていう戒めです。
以上、あめたま（@ametama_l2l）でした。