metaタグジェネレーターとは？
メタタグジェネレーターは、ウェブページに必要なHTMLメタタグを一括で作成します。ページタイトル、説明、キーワード、SNS共有情報を入力するだけで、検索エンジンの表示順位向上とSNSシェア最適化に適したメタタグが生成されます。
ページタイトル、説明文(Googleでの表示は約155文字が最適)、キーワード、著者、canonical、robots、viewport、charsetを入力し、Facebook/LinkedIn向けのOpen Graph項目とX向けのTwitter Card項目を追加します。出力は`<head>`にそのまま貼れる`<meta>`と`<link>`タグのブロックです。HTMLやNext.jsのmetadata、テンプレートのheadに貼り付けてください。
使い方
- ページタイトル、説明文、著者名、ターゲットキーワードを入力して、基本的なSEOメタタグを作成します。
- Open Graph（Facebook）やTwitterカードのメタデータ（タイトル、説明、画像URL、カードタイプ）を追加します。
- 完成したメタタグのHTMLブロックをコピーして、ウェブページの<head>セクションに貼り付けてください。
使用するタイミング
- 公開前にHTMLランディングページのSEOとSNSシェア用のメタ情報を整えるとき。
- 既存ページを点検し、値を貼り直して足りない箇所や長すぎる箇所を確認するとき。
- CMSテンプレートに組み込む開発者向けのブリーフで、タグを下書きするとき。
結果
製品ページを公開する際にメタタグが必要です。タイトルを「ワイヤレスノイズキャンセリングヘッドホン」に設定し、155文字以内の説明文を作成し、OGイメージタグに製品画像のURLを追加します。
よくある質問
- タイトルと説明の理想的な長さはどれくらいですか?
- タイトルは50〜60文字、説明は140〜160文字を目安にしてください。Googleはそれ以上だとタイトルを切り詰め、説明のプレビュー幅は約920ピクセルで、ちょうどこの文字数に対応します。
- `<meta name='keywords'>`はまだ必要ですか?
- Googleは2009年から無視しており、Bingはほぼスパムサインとして扱います。YandexやBaiduを狙う場合は多少効きますが、それ以外では省いて問題ありません。
- og:titleと通常の`<title>`はどう違いますか?
- `<title>`はブラウザタブとGoogleの検索結果に出ます。`og:title`は共有時にFacebook、LinkedIn、Slackで表示されます。両者は異なってよく、SNS用は引きの強い表現、ページ用はキーワード重視にできます。
- Twitterカードはどの種類を選ぶべきですか?
- `summary_large_image`が最大のプレビュー(1200×630画像)を提供し、多くの記事や商品ページに合います。サムネイル程度で十分な短文の投稿だけ`summary`を選んでください。
- canonicalタグを入れれば重複コンテンツの問題は解消しますか?
- 似た内容のページが複数ある場合、どのURLが正本かを検索エンジンに伝える役割です。リダイレクトではなく示唆なので、一貫した内部リンクとHTTPSと組み合わせて初めて強いシグナルになります。