メタタグ生成

仕組み

ほぼ同じ役割を持つタグが、3組重なって存在します。従来のSEO用のタグ、Facebook、LinkedIn、WhatsApp、Slack向けのOpen Graph、そしてTwitterカードです。手書きすると同じことを3回繰り返すことになり、どれかを書き忘れます。

大半の役割を担うのはOpen Graphです

Facebookだけではありません。LinkedIn、WhatsApp、Slack、Discord、iMessageなど、リンクを展開するほとんどのサービスがOpen Graphのタグを読みます。これを正しく設定すれば、ほぼあらゆる場所のプレビューが一度に直ります。TwitterカードはX向けの小さな追加セットで、ない場合はXがOpen Graphにフォールバックします。

入力しながら長さをチェックします

検索結果で切り詰められるまでの目安は、タイトルでおよそ60文字、説明文で160文字です。これらは厳密な上限ではなく目安です。検索エンジンはタイトルをピクセル幅で測るため、大文字やMが多いタイトルは、小文字のLが多いタイトルより早く切り詰められます。警告は、危険な範囲に入ったときに知らせます。

画像は忘れられがちな部分です

og:imageのないリンクは、何もない灰色の枠としてプレビューされ、クリック数が明らかに下がります。取得する側のサイトはあなたのページのベースURLを知らないため、URLはhttpsで始まる絶対URLにする必要があります。大きな画像のカードには、1200×630ピクセル前後が適しています。

正規URL

canonicalのリンクタグを入れると、同じページに複数の経路でアクセスできる場合に、どのアドレスが正しいものかを検索エンジンに伝えられます。末尾のスラッシュの有無、追跡パラメータの有無、httpとhttpsの違いなどが該当します。重複コンテンツの問題の一群を、1行で解決できます。

すべてエスケープされます

テキスト内の引用符や山括弧は正しくエスケープされるため、アポストロフィや引用符を含む説明文でも、それが入っているタグが壊れることはありません。