メタタグ生成
公開前に検索結果のスニペットとSNS共有プレビューを整え、生成したタグをビルド済みHTMLに貼り付けられます。
基本情報
推奨: 50-60 文字
推奨: 150-160 文字
カンマ区切り。Googleの主要な順位要因ではありませんが、社内整理や一部の検索エンジン向けメモに使われることがあります。
SNS共有プレビュー
推奨サイズ: 1200 x 630
生成されたHTML
<!-- Primary Meta Tags --> <title>My Awesome Website</title> <meta name="title" content="My Awesome Website" /> <meta name="description" content="The best place to find amazing things." /> <meta name="keywords" content="website, generator, tools" /> <meta name="author" content="" /> <meta name="robots" content="index, follow" /> <meta name="theme-color" content="#000000" /> <!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://example.com" /> <meta property="og:title" content="My Awesome Website" /> <meta property="og:description" content="The best place to find amazing things." /> <meta property="og:image" content="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=1200&h=630&fit=crop" /> <meta property="og:site_name" content="My Site" /> <!-- Twitter --> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:url" content="https://example.com" /> <meta property="twitter:title" content="My Awesome Website" /> <meta property="twitter:description" content="The best place to find amazing things." /> <meta property="twitter:image" content="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=1200&h=630&fit=crop" />
Googleプレビュー
SNSプレビュー
メタタグの基本
Title
ページの実際の検索意図に合わせて書きます。どのページにも合う曖昧なタイトルは、クリックする理由を弱くします。
Description
description は順位を直接上げる近道ではありませんが、検索結果で読まれることがあります。タイトルの繰り返しではなく、ページの内容を短く書きます。
Open Graph
Open Graph タグはリンクが共有されたときのタイトル、説明文、URL、画像の標準値として使われます。
Robots
robots の指定は慎重に使います。noindex は検索結果から外し、nofollow はページ上のリンクの扱いに影響します。
Canonical URL
重複URL、計測用URL、別表記のURLは優先するページへまとめ、どのURLに評価を集めるかを検索エンジンへ伝えます。
よくある質問
meta keywords はまだ意味がありますか？
Googleの主要な順位要因ではありません。ただし社内の整理、一部の検索エンジン、編集計画のメモとして使われることがあります。
Open Graphタグが効いているか確認するには？
Facebook Sharing Debugger など、各SNSのデバッガーやカード確認ツールで取得結果を確認します。
SEOのページなのにviewportが必要なのはなぜですか？
viewport 自体は順位用タグではありませんが、モバイル表示に必要です。本番のHTML headには正しく入れておきます。
Googleはmeta descriptionをそのまま表示しますか？
必ずではありません。検索語に合う別の本文をスニペットに使うことがあります。それでも明確な説明文は、採用された場合に役立ちます。
title tagはどのくらいの長さがよいですか？
厳密な文字数ではなく表示幅で決まりますが、多くのページでは 50-60 文字を目安にすると扱いやすいです。