こんにちは！
なんと、ブログが1ヶ月ほど空いてしまいました^^;
実は、ワードプレスの教材作りに勤しんでおりました。
また、ここでご案内できればと思っています！
今日は、コーディングでも、ワードプレスでもなく、Twitterのリンクについてお話ししたいと思います。
Twitterを見ていて、
「もっとリンクを目立たせたらいいのに！」
と思うことがあります。
また、写真の投稿と、リンクの掲載同時に行なっている人も見かけます。
写真とリンク、おなじTweetの中に掲載すると、リンクが目立たなくなっちゃう〜〜(;_;)
もったいない！！！
ということで、今回は、Twitterカードを用いて、リンクを魅せる方法をお話ししていきます♪
Contents
URLを貼り付けてツイートしてみよう
Twitterカードが何なのか説明するには、実際のツイートを見ながらお話しするのが早いですね！
ということで、以下ご覧ください。
テスト。
— 智子 (@tomotomomarble) April 22, 2020
このツイートは無視してください！https://t.co/e1Z1icqN22
まずひとつめ。
URLをペタッと貼ったのですが、ツイートの文章に、青文字でURLが続いています。
青文字なので、リンクがあるのはわかるのですが、目立ってはないような・・・
ツイートの文章も少ないので、高さもなく、せっかくツイートしてもスルーされてしまいそう。
またまたテスト。
— 智子 (@tomotomomarble) April 22, 2020
このツイートは無視してください！https://t.co/lKUscx0Gi7
お次はこちら。
これもよく見かけますよね。
URLの次に、「カード」が追加されました！
サムネイル画像も、サイトの説明文も掲載され、このカードの部分もリンクになってます。
このカードがあれば、写真とリンクを同時に貼り付けてツイートしなくていい！ですよね^^
ワードプレスなどの記事は、ツイートするとこのカードで表示されることが多いです。
またテスト。
— 智子 (@tomotomomarble) April 22, 2020
このツイートは無視してください！https://t.co/bk2MHVBfZw
最後にこちら。
先ほどのカードよりも、かなり大きなサイズになりました。
目立つのはやはりこの大きなカードですよね！
ということで、カードの表示方法をお話ししていきます。
※ アプリ配布のAppカードや動画再生のPlayerカードもありますが、今回は割愛します。
Twitterカードの使い方
カードを使用するには、htmlに記述を追加しなければなりません。
デモサイトを作りましたので、その内容を見ながらお話ししていきます。
それぞれのサイトのソースを見ていただけるとわかるのですが、metaタグにTwitterカードの記述があります。
headタグの中に、以下5行を記述しているんです。
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@tomotomomarble" />
<meta property="og:title" content="Twitter Large Card サンプル" />
<meta property="og:description" content="よく見かけるTwitterカードを使用！カードの大きさは小さめ。" />
<meta property="og:image" content="https://tutorial.tomo-co.online/twittercard.jpg" />この5行をご自身用に書き換えていただければ、あなたもTwitterカードが使えますよ♪
1行ずつ見ていきましょう。
1行目 カードの種類
<meta name="twitter:card" content="summary" />ここでは、カードの種類を指定できます。
上記は、「summary」となっているので、小さいカードを指定していることになります。
summaryではなく、「summary_large_image」と記述すると、大きいカードになります。
つまり、大きいカードは↓↓の記述ですね。
<meta name="twitter:card" content="summary_large_image" />2行目 ツイッターのアカウント名
<meta name="twitter:site" content="" />ここでは、ツイッターのアカウント名を指定します。
そのサイトの持ち主さんのツイッターアカウントですね。
content=””
” と ” の間にアカウント名を入れていきます。
ち・な・み・に。
ここは必須項目では無いので、飛ばしてもOKです。
3行目 サイトのタイトル
<meta property="og:title" content="" />
ツイッターカードに表示させるサイトのタイトルを指定します。
実際のサイトタイトルと全く同じではなくても良いと思います。
ツイートを見てもらって、そのカードがなんのリンクなのかわかるようにタイトルを入れましょう。
content=””
” と ” の間にタイトルを入れていきます。
4行目 サイトの説明
<meta property="og:description" content="" />
タイトルと同様に、サイトの説明文を掲載することができます。
リンクが何のサイトであるのかわかるように、説明文を入れていきましょう。
content=””
” と ” の間にサイト説明文を入れていきます。
5行目 カードに表示させる画像
<meta property="og:image" content="">
ここで、カードに表示させる画像URLを指定します。
サイトの中で使用している画像でなくても大丈夫です。
ですが、そのサイトがなんなのか説明するためにも、サイト内で使用されている画像を使用する方が良いかもしれません。
content=””
” と ” の間に画像URLを入れていきます。
Twitterカードの確認
設定ができたら、ツイートする前に、確認していきましょう！
確認サイト「Card validator」がありますので、そちらを利用していきます。
https://cards-dev.twitter.com/validator
Card URL
に、カードにしたいサイトURLを入れて、
Preview card
を押せば、カードの見栄えを確認することができます。
エラーが出たら、metaタグ内に間違いがないか探して修正しましょう！
確認してOKであれば、ツイートにリンクを貼り付ければ、カードが表示されます。
カードのサイズ
小さいカードは、正方形のサムネイル画像が表示されていますよね。
一方、大きいカードは横長の画像が表示されています。
大きいカードの場合は、縦横比が、1 : 1.91、となっています。
横長ではなく、正方形の画像URLを大きいカードに指定したらどうなるか試してみました。
これもテスト。
— 智子 (@tomotomomarble) April 22, 2020
このツイートは無視してください。https://t.co/W7mkkY2Kjs
正方形や、縦長の画像を指定した場合も、縦横比 1 : 1.91 で、トリムされたような表示になるようですね。
横長以外の画像使用する場合は、要注意。
前章のCard Validatorでしっかり見栄えを確認しましょう。
画像サイズについては、いろいろなところに情報が出ているのですが、
推奨サイズは横幅が、800ピクセル以上のようです。
これは、Twitter広告のカード画像サイズについて記載がありました。
https://business.twitter.com/ja/help/campaign-setup/advertiser-card-specifications.html
ただ、広告ではなく普段のツイートの中でカード使用する場合については、推奨サイズを見つけられませんでした; ;
見つけられた方は教えてください！
ワードプレスサイトをカードにする場合
ワードプレスを使用している人は、phpを編集しないと「head」タグ内に色々記述ができないですよね。
phpの編集で、ちょっとでもミスすると、サイト全体がエラーになってしまって
どうやって直したらいいの？！
なパニック状態になってしまうかも！！
なので、私はphpに限らず、cssもJSも、ワードプレスの元のデータは編集しません。
じゃあどうやってTwitterカードを設定するのか・・・？
プラグインを利用します！
私が利用しているのは、「All in one SEO Pack」ですが、これ以外にもTwitterカードを設定できるプラグインはあるようです。
後日、もっと詳しくこのあたりの設定も記事にしたいなと思っています。
（追記：ワードプレスでのTwitterカード設定方法、記事にしました！）
最後に
以上で、Twitterカードを使用してリンクを魅せることができるようになります。
今回参考にさせていただいたサイトは、TwitterのDeveloperサイトです。
https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started
私がこの文章を書いている時点では、上記の方法でTwitterカードが使用できますが、今後アップデートされることもあるかもしれないですよね。
何かうまくいかないなぁ、なんて時はDeveloperサイトもチェックしてみてください。
ご意見などあればコメントや問い合わせからご連絡くださいね^^
ではでは〜〜！
