バリバリの文系だし、どちらかというとPC音痴で強くないです。
今回は10年前はそんなのなかったぞな今やスタンダードになったTwitterカードを導入しようと四苦八苦した内容をまとめました。
TwitterとブログをやっていてTwitterカードって何？て方は自分のブログをTwitterで共有しようとした時URLだったのがひと手間加えると画像付きで表示されるようになるこーゆーやつです。
最近、ブログを共有してみたくて普通につぶやいたら画像付きで表示されなくてなんでかなと。
↑ Twitterカード設定前
⇓ 手を加えるとこうこうなる！
※最近、ブログタイトルかわったので、編集時期の関係で前のタイトル日日是精進になっています。
以前かTwitterでURLのみと詳細表示のサイトの差は何か気になっていたのですが、自分のブログをもって初めて知ったTwitterカード。
他のブログは割と簡単に導入できるようなのですが、bloggerでブログをしている方はかなり苦労するようなので、二番煎じ記事ではありますが初心者にありがりな失敗もまとめておくので、同じ轍を踏まないように参考にしてみてください。
Twitterカード対策、何もしてなかったらこうなる。
先ほどもあったこの画像。URLが書いてあるだけでともすると何へのリンクなんだ！とクリックする気になってもらえないですよね。
せっかくだから読んでもらいやすくなるように設定してみましょう。
どうやってTwitterカードを設置すればいいの？
他のブログもそうなのですが、ブログのテンプレートをカスタムする画面の「head」以下に「meta tag」なるものを書き込むと表示されるようになります。
Twitterカード導入失敗例①
TwitterのディベロッパーのURLそのまま貼り付けたらこうなる
Twitterカード導入にあたっては
TwitterディベロッパーのTwitterカードのページにいきます→こちら
こんなページです。
最初のページは日本語なんです。
それ以降のページは飛ぶたびに「https://dev.twitter.com/ja/」の/ja/が抜けてしまいます。
英語が苦手な方は次のページを開いて英語になった場合twitter.comの後ろに/ja/をいれると日本語ページに飛べるので試してみてください。
例えばサマリーカードの日本語ページは以下のようになります。
https://dev.twitter.com/ja/cards/types/summary.html
初心者なので画像が大きくとかたくさんとか難しいことはできそうにないので、一番オーソドックスなサマリーカードの導入の説明をさせていただきますね。
サマリーカードはこんな表示のつぶやきです。
基本的にはTwitterのディベロッパーというページののHTMLをコピーして自分の情報に一部変えれば完成です。
何だこの南の島 _(:3 」∠)_
いや、ちゃんと読めてないまま実行するのがいけないんですけど。
再度、正しく入力して検証したものの、キャッシュ（古いデータの蓄積）が残っているらしくこのタイミングで最新だった記事がずっとこの表示になってしまいました。
次のTwitterのクロールがくればちゃんと表示されるようになるらしいですがそれが１週間後ぐらいらしく、待てずにこの表示になっていた記事を消し再投稿して解決しました。
完璧だ！と思ってから送信しないとキャッシュで痛い目にあうので、注意してください。
そして、ディベロッパーのmetatagコピーしただけじゃ同じ状態になるので、そんな甘くないので気をつけてください(´･ω･｀)
難易度低めなTwitterカード導入成功例①
ブログタイトルとブログの説明を表示させる
こんな感じでブログタイトルと説明を表示するのは割と簡単にできます。
Twitterカードのサンプルコードを自分用に書き換える
↑ これを こうする ↓
twitter:card カードの種類を指定する場所
twitter:site @サイト・ブログのサイトオーナーのTwitterアカウントID
twitter:title ブログのタイトル
twitter:description ブログの説明
twitter:image 表示したい画像のURLを入れるところ
画像はツイートされて負担をかける可能性があるせいか、ロゴやプロフィール画像などはやめることという注意書きがありました。
また120×120ピクセル以上1MBまで指定できるとのことでした。
サンプルコードの最後の一行は特に必須ではないので削除して問題ないです。
※metatagを埋め込む位置は成功例②の方で画像付き解説しています。
トラブルシューティング
画像は設定しなくてもよいとのことでしたが私はtwitter:imageのmetatagを入れなかった時、うまく表示できませんでした。入れた方が無難です。検証では表示されましたがツイートがうまく反映されませんでした。
難易度UPなTwitterカード導入成功例②
ブログ記事とリンクさせて表示
こんなやつにしたい場合のやりかた。
私はこちらのブログを参考にTwitterカード導入に成功しました。
Learninghacker － Twitterの画像つきURLこと「Twitter Cards（ツイッターカード）」をBloggerに設定してみた。
metatagを引用しても出展を書けばいいと思いますが、完全にこちらをはっただけになるので上記の記事を読んで、導入していただければと思います。私はLearninghackerのサイトでは説明されていなかった部分で自分が躓いた点を補足させていただきます。
まず、「テーマ」→「HTMLの編集」を選びます。
@Twitterアカウントとなっている部分に自分のTwitterのIDを埋め込むだけでOKでした。
この後はTwitterのディベロッパーページから検証となるのですが、注意点があります。
トラブルシューティング
上記の場合、画像がなかった場合こう表示されます。
てっきり密やかにファビコン設定したからそれが表示されると思ってたのですが、表示されず…
bloggerマークになってしまいました。
※ファビコンとはURL前に小さく表示されるマークです↓
一応自分で描いたのでこれが表示されるものかと。
なので急遽全部画像なし記事にはくまさんを入れることにしました。
かわいくしたかったしこれはこれでいいかなとも。
↑ 画像挿入後
↓ディベロッパーの検証
キャッシュがあるようですぐに反映されなかったですが、テストしたらそれで解決しました。
もし、画像なし記事がbloggerのロゴで表示されるのが嫌な方は何かしらアイキャッチ画像をひとつは入れておいた方がいいかもしれません。
↑ が ↓ となるはず
成功したのはこちら↓
Twitterカード問題解決した٩( 'ω' )و✨— ほそやともゑ (@tomoe_hosoya) 2017年8月24日
苦労したので近々まとめたいです。
日日是精進: 激混みと噂のお盆にパスポートを再発行しに行ってきました https://t.co/zVt87dk3Ya
本当にLearninghackerの記事には感謝しかないです。
トラブルシューティング
これは私がちゃんと読んでないのも悪いのですが記事を書いている時の右側の投稿の設定をちゃんとやっていないとただのURLが表示されるというミスを何度もやってテスト投稿しまくったので注意してください。
ここの設定はラベルと検索向け説明が最低限入っていないとURLになってしまうので、気をつけましょう。
(検索向け説明は説明に書いてあったのですが、ラベルつけてないので表示できてないのに気づくまで2時間かかりましたorz)
追記：どうしてもTwitterカードが表示されなかった記事が表示された
下が問題のツイート。ノエビアの記事がどうしてもうまくいかなかったのです。
はじめてパーソナルカラー診断を受けてきました。— ほそやともゑ (@tomoe_hosoya) 2017年8月14日
似合うファンデと似合う服の色が違ったり発見が多かったです。
日日是精進: 秘書検定準1級 面接対策番外 ノエビアパーソナルカラー&メイクレッスンを受けてきました①カラーレッス... https://t.co/FLGG1Ruaaa
今後変化するかもしれないので、スクショも残すと、
↑こんな感じで見えます。
↑やっと詳細をクリックすれば表示されるようになりました。
↓やっと反映されたツイートがこちら。
近日ノエビアのメイクレッスンに行くので、パーソナルカラー診断の記事のつづきのお話をしたいです。— ほそやともゑ (@tomoe_hosoya) 2017年9月13日
初回のブログ記事は↓
ゆるふむログ: パーソナルカラー診断ノエビアベストカラーレッスン&メイクレッスンを受けてきましたカラーレッスン編 https://t.co/uZRzYZkXl8
そろそろキャッシュクリアされたかなと時々テストしていたのですがなかなか変化がなく。
ここにたどり着くまでにやった作業としては以下の通りです。
①ディベロッパーでURL送信→画像がうまくでていないことを確認。
→これまでに記述した必要事項は全て埋まっていることも確認。
②先頭画像を再度アップロードして、貼り直してみる。→保存。
PCからのツイートはこれでも変化が見られなかったのですが、スマホからのツイートではTwitterカードが表示されて反映されました。
PCの時との違いは自動で入力されるURLの末尾がスマホだとhtmlで完結していたのですがPCだと短縮になるのかその後にアルファベットが続いていました。
他のツイートは平気なのでこれが要因だとも思えないのですが、Twitterカードが表示されない記事がある方は一度上記の方法を試してみてください。
私もまだ導入したてのため、不具合等がでてくるかもしれないので、トラブルが発生したら解決次第また情報をアップデートしようと思いますので、自己責任の範囲で参考にしていただければと思います。
快適blogger、Twitterライフを送れるようにお祈りしております。
※この記事は2017年8-9月時点のbloggerとTwitterで行った情報です。それぞれの更新やシステムの改変で同じような結果にはならないかもしれません。
※最近、ブログタイトルかわったので、編集時期の関係で前のタイトル日日是精進になっていますがゆるふむログと同じサイトです。
0 件のコメント:
コメントを投稿