こんにちは！フロントエンドの世界へようこそ。Web制作を学び始めると、「自分の作ったページを誰かにシェアしたとき、もっと素敵に表示させたい！」という欲求が必ず湧いてきますよね。
リンクを貼ったとき、ただURLの文字列がポンと出るだけだと、なんだか少し寂しいもの。でも、ちゃんと設定してあげれば、まるで雑誌の表紙のように魅力的な「カード」として表示させることができるんです。
今日は、X（旧Twitter）でリンクをシェアしたときに表示される「Twitter Card（ツイッターカード）」の設定について、一緒に紐解いていきましょう。
—
Twitter Cardって、結局なに？
一言で言えば、「あなたのWebサイトの『名刺』を、SNS上に配る仕組み」です。
街中で知らない人にいきなり声をかけられても警戒してしまいますが、おしゃれで分かりやすい名刺を差し出されたら「おっ、なんだろう？」と興味を持ちますよね。Twitter Cardは、SNSという広大な街角で、あなたのサイトが「どんな内容なのか」を瞬時に伝えるための、最高にセンスの良い名刺なんです。
—
まずは、このコードを「head」に入れよう
HTMLの`
`タグの中に、以下のメタタグを書き込むだけで準備は完了です。まずは基本のセットを見てみましょう。
ここでつまずきやすいポイント
「設定したのに、なぜか画像が出ない！」という経験、実はプロでもよくあります。一番多い理由は「画像のURLが間違っている」こと。そして次に多いのが「画像サイズが適正でない」ことです。
画像は、縦横比が「2:1」のものを用意するのがコツです。例えば、1200px × 600pxくらいで作っておくと、スマホでもPCでも綺麗に表示されますよ。
—
魔法をかけたあとは「確認」が鉄則！
コードを書いて保存したら、必ずやってほしいことがあります。それは「Card Validator（カードバリデーター）」という公式ツールでチェックすることです。
[X Card Validator](https://cards-dev.twitter.com/validator)
ここに自分のURLを入力して「Preview card」ボタンを押してみてください。もしここで画像やタイトルが正しく表示されれば、もう大丈夫！世界中のどこにリンクを貼っても、あなたのサイトは素敵な顔をして待っていてくれます。
—
最後に：なぜ「メタタグ」が大切なの？
プログラミングを始めたばかりだと、「見た目に関係ないメタタグなんて、後回しでいいや」と思ってしまいがちですよね。でも、実はこの「メタタグ」こそが、あなたのサイトの「おもてなし」なんです。
SNSで流れてくる無数の情報の中で、どんな人がどんな想いで書いたページなのかを、たった一瞬で伝える。そのための小さな気遣いが、結果として「クリックしてみようかな」という一歩に繋がります。
最初は難しく感じるかもしれませんが、一度設定してしまえば、あとはWebサイトが勝手にあなたの代わりに「素敵な名刺」を配り歩いてくれますよ。
ぜひ今日、あなたのサイトにこの「魔法のタグ」を添えてあげてくださいね。応援しています！
コメント