メタタグとSNSシェアカードの仕組み
このツールが生成するもの
メタタグは、ページの<head>内に置かれる目に見えない情報で、検索エンジンやSNSに対して、コンテンツにどう見出しを付け、どう要約し、どう表示するかを伝えます。このツールは、短いフォームからその記述をまとめて組み立てます。タイトル、説明文、キーワード、著者、canonical URLを入力すると、対応する<meta>タグと<link>タグに加えて、Open GraphとTwitter Cardの相当タグまで出力します。生成されるHTMLは入力に合わせてその場で更新され、検索結果でどう表示されるかのプレビューも確認できます。
こんなときに使う
静的サイト、ランディングページ、CMSのテンプレート、Webページとして開くメールなど、head部分を手作業で用意する必要がある場面で役立ちます。既存ページの点検にも使えます。想定しているタイトルと説明文を貼り付ければ、文字数カウンターがGoogleに省略されそうな箇所を教えてくれます。マーケティング担当者は、Slack、X、LinkedIn、Facebookにリンクを貼ったときに表示される画像・見出し・要約を各プラットフォーム任せにせず、自分で決めるためにこのツールを使います。
例:タイトル・説明文・og:タグ
たとえばタイトルに「手作りの陶器マグカップ」、一文の説明文、画像のURLを入力したとします。出力には<title>手作りの陶器マグカップ</title>、<meta name="description" content="...">、そしてcanonicalの<link>が含まれます。さらにOpen Graph用にog:title、og:description、og:image、og:typeが、Twitter Card用にtwitter:card、twitter:title、twitter:imageが書き出されます。OG画像を1200x630ピクセルにしておくと、多くのSNSが表示する大きめのカードになります。
推奨する長さと注意点
検索エンジンに省略されず全文を表示させるには、タイトルは約60文字以内、説明文は160文字以内に収めます。上限を超えると内蔵のカウンターが警告します。robotsディレクティブ(index/noindex、follow/nofollow、さらにnoarchiveやnosnippet)は、クロールとキャッシュを制御するために1つの<meta name="robots">タグにまとめられます。canonical URLは、重複コンテンツを避けるために、そのページの優先版を指すように設定します。記述が整ったら、ブロック全体をコピーして、閉じ</head>タグの直前に貼り付けます。