Twitterカードを導入してみた『続編』【ライフハック】

メタタグ消失

ブログのスキンを夏向けに変更したらそれまで記載していたTwitterカードのメタタグが消えてしまいました(泣
バックアップをとっていなかった自分が悪いのですがスキン毎にソースコードのコピーをとっておくのは基本中の基本。しかし悔やんでも仕方がないので自らの記事を元にざっとやり直してみました。

Twitterカード表示のあるツイート。この部分が出てこなくなってしまいました。


Twitterカードを導入してみた。【ライフハック】:Web-tonbori堂アネックス

メタタグ再投入

Twitterのデペロッパーページでソースコードをコピペして記述してみましたが何故かうまくいきません。
サマリーカードのソースコード
Twitterデペロッパーページのソースコードの表示

画像でマークしているサンプルコード、これの中身を自らのブログに合うように記述を変更するのですが全く元のとおりにならず、Twitterデペロッパーページにある、Cardの検証ページ(最初にページ登録するところでもあります)でも上手く表示されません。

検証の結果、自分のブログがホワイトリストに登録はされているとは出てきているのでタグの問題というのはわかりました。そこで、まず「Twitterカード Blogger」で検索してみました。
Twitterカード―TwitterDeveloper Documentation
Card Vaildator|Twitter Developer



メタタグを探しにネットヘダイブ

検索しても中々上手くいきません。というのもOGP設定というのがいるということらしいのです。最初のスキンはどうもそれが記述されていたようなのですがスキンをカスタマイズするにあたりその記述がまるっぽ抜け落ちたかどうにかしたか。つまり全然上手くいかずいくつかのサイトを渡り歩く結果になりました。

そのサイトはエントリの下部にまとめて貼っておきますが基本的にOGP設定というのはFacebookなどでサムネイル画像を表示させるためのオープンソースコードのようです。OGPとはOpen Graph Protcolの略称で詳しくは専門的に解説されているブログさんを検索してみてください。

重要なのはこのメタタグのコードがTwitterカードにも応用されており、Twitterのツイートでリンクを埋め込んだ時に表示させるためのメタタグというざっくりした理解でも十分だと思います。

SEOなどを真剣にされている方ならさらに理解を深める必要があるかもしれませんが基本的に必要な情報をサンプルコードを基に記述しスキンのHTMLコードの<head>部分に貼り付けるだけです。の以下に埋め込むことが重要です。

幸いBloggerのHTMLライター機能はエラー検知してくれるので間違った場合はコードの見直しを行い正しく記述するようにすればいいでしょう。ただし自信の無い場合はしっかりとバックアップをとって、それまでのスキンに戻せるようにしてから自己責任でお願いします。

最後に

以下のサイトのエントリが参考になりました。まだそれでも分からない場合は『Twitterカード Blogger』や『ブログ OGP』『Twitterカード OGP設定』などの複数のキーワード検索で情報を集めてみましょう。詰まるとなかなか前に進みませんが調べれば道は開けると思います。

また詰まったときには投げ出さず一晩寝て精査してみると、案外あらたな解決法が見つかるかも知れません。まずはトライ&エラーでやってみましょう。ただし繰り返しになりますがバックアップとサイトをいじる場合は自己責任になりますので気を付けて行ってください。

あなたのサイトのアピール度が上がる!Twitterカードの設定方法 | ペケペケラボ

Twitterの画像つきURLこと「Twitter Cards(ツイッターカード)」をBloggerに設定してみた。 - Learninghacker

BloggerをTwitterカードに対応させる際のtwitter:imageを正しく設定する : たき備忘録

Blogger ブログを Twitter Cards に対応させる方法 | クリボウの Blogger Tips

OPG!Blogger(ブロガー)でTwitter Card(ツイッターカード)を設定する方法 | ふりむけばコウホウ



広告
広告

0 件のコメント :

コメントを投稿

お読みいただきありがとうございました。ご意見などございましたら、コメントをよろしくお願いいたします。