自作システムの個人ブログ

様々な情報について適当に記述しています。
(モバイル向け)サイドバーまで飛ばす
投稿: 2017年02月26日 / 更新: 2017年02月26日 / 筆者: イスターリャ / Comment: 2 / タグ: Twitter HTML meta

TwitterでURLを含んだツイートをするとテキストリンクじゃなくてパネルっぽくなるあれのこと。
Twitter Cardsというらしい。
複数パターンあるらしいが、とりあえずこれがオーソドックスなのではないだろうか。
私はこれの方法を調べたが、複数のサイトに手順が分散していて、思うような一連の流れを得られなかったため、ここにまとめておく。

まずはHTMLの準備コピペ防止

Twitterで拡散してもらうようなページやサイトを持っていないなら論外。
metaタグで記述する。
<!-- * Twitter カード用 設定 ここから * -->
<meta name="twitter:card" content="summary" /> 
<meta name="twitter:title" content="ページタイトル" />
<meta name="twitter:description" content="ページの短い説明" /> 
<meta name="twitter:image" content="表示する画像のURL(httpの部分から)" /> 
<meta name="twitter:url" content="このメタタグを記述するページのURL(httpの部分から)" />
<meta name="twitter:site" content="@Twitterアカウント" />
<meta name="twitter:creator" content="@Twitterアカウント" /> 
<!-- * Twitter カード用 設定 ここまで * -->

これをコピペして、各所を書き換えて使う。
動的にページを生成してる場合は「<?php echo("何か"); ?>」を使って動的に書き換える。

Twitterに申請するコピペ防止

このままでは表示されないので、Twitterに検証してもらう。
申請といっても全自動だし検証自体は数秒で終わるはず。
ここをクリックかタップして、さっきメタタグを追加したページのURLを入力する。
するとTwitterカードのプレビューが出るので、これで作業完了。
ちょっとすると、ちゃんとリンクがカードになるようになっている。

SquidSkyさん(2017年03月01日 10時20分) 削除
これでホームページの宣伝に使えますかね?でもモバイル版Twitterでは表示されないようですが・・・。
このブログのURLを書いてツイートすれば下に表示されますか?
確かそういう仕組みだった気がします。

話が変わりますが、学校のPCからコメントしていますけど
まだ規制カテゴリの「ブログ」には該当していないようです。

イスターリャさん(2017年03月01日 16時18分) 削除
そうなのですね~
minibird全体が規制されるのもアレなので
早々に独自ドメイン取っちゃってもいいかもです

(これらは総て必須項目です。)
名前
メールアドレス
削除パスワード

(メアドはただのスパム対策なので、セキュリティに不安がある方は捨てメアド等をご利用ください)

コメント本文