使い方
- ページのタイトルと、1〜2文の説明を入力します。
- canonical URLを追加し、検索エンジンによるページのインデックス登録とリンクのクロールを許可するか選びます。
- Open Graph画像と、タイトルや説明と異なる値にする項目を入力し、Twitter cardの種類を選びます。
- 生成されたHTMLをコピーまたはダウンロードし、ページの<head>内に貼り付けます。
仕組み
このジェネレーターは必要なタグだけを生成します。すべての値はHTMLエスケープされるため（& < > " ' はエンティティに変換されます）、引用符や山かっこを含むタイトルでもマークアップが壊れることはありません。
各タグの役割：charsetはブラウザーにテキストの文字コードを伝えるもので、headの先頭に記述します。viewportはスマートフォンでページを端末の幅に合わせて表示します。titleはブラウザーのタブや検索結果に表示されます。meta descriptionは検索結果のスニペットに使われることがありますが、ランキング要因ではありません。canonicalリンクは、重複するページがある場合に検索エンジンへ正規のURLを伝えます。robotsにnoindexを指定するとページが検索結果から除外され、nofollowを指定するとクローラーにリンクをたどらないよう伝えます。robotsタグが機能するのはクローラーがページを取得できる場合だけなので、robots.txtで同時にブロックしないでください。
Open Graphタグ（og:…）は、多くのソーシャルアプリやチャットアプリでのリンクプレビューを制御します。og:title、og:description、og:urlが空の場合、title、description、canonical URLの値が再利用されます。Twitter cardタグを読み取るプラットフォームでは、タイトル、説明、画像にOpen Graphの値が使われるため、生成されるのはtwitter:cardのみです。
使用例
ブログ記事
タイトル、説明、canonical URL、1200×630のog:image、summary_large_imageを指定すると、検索結果とリンクプレビューに対応する約10行のコードが生成されます。
検索結果に表示しないサンクスページ
「インデックスを許可」のチェックを外すと、<meta name="robots" content="noindex, follow">が追加されます。ページは訪問者には表示されますが、検索結果には表示されないようになります。
引用符を含むタイトル
タイトル「Ask "Anything" & <Learn>」は「Ask "Anything" & <Learn>」として出力され、ブラウザーでは入力どおりに表示されます。
よくある質問
meta keywordsタグはSEOに役立ちますか？
いいえ。主要な検索エンジンは長年、ランキングにmeta keywordsを使用していないため、このジェネレーターには含まれていません。
Open GraphとTwitter cardのタグは両方必要ですか？
通常、Open Graphに加えて必要なのはtwitter:cardだけです。タイトル、説明、画像にはog:の値が使われます。
これらのタグはどこに記述しますか？
各ページの<head>要素内に記述します。Next.js、WordPressテーマ、静的サイトジェネレーターなどのフレームワークでは、メタデータ設定を使って同じタグを出力してください。
すべてのページにcanonicalタグを設定すべきですか？
特に、トラッキングパラメーターや並べ替えオプション、httpとhttpsなど、複数のURLから同じコンテンツにアクセスできる場合に設定することをおすすめします。ページ自身をcanonicalとして指定することもできます。
プライバシー
タグはブラウザー内で生成されます。入力内容がアップロードまたは保存されることはありません。