低コストでホームページの成果をあげる唯一の方法について、結論からお伝えいたします。それは「最高品質のコンテンツ」を増やすことです。
どのようにして「最高品質のコンテンツ」を増やせばいいのか。このブログ記事では、ホームページを「最高品質のコンテンツに仕上げる」ポイントについて、Web初心者向けに解説いたします。

積み木を積み上げる人たちのイラスト

興味をひくタイトルでクリック率アップ

タイトルは、検索したユーザーが素早く記事の内容をイメージするのに重要です。サイトのページごとに、はっきりと理解しやすい、興味をひくタイトルを付けましょう。
興味をひくタイトルの付け方の基本について、以下の4項目に分けてご紹介いたします。

  1. タイトルの文字数
  2. オススメなタイトルの付け方
  3. 絶対やっちゃダメ!
  4. タイトルがGoogleに自動変更された場合の対処法

1. タイトルの文字数

Googleは、タイトルの文字数について公表していませんが、モバイルユーザーを重視していることから、ほとんどのスマホで表示可能な文字数、30文字以内を目安に付けましょう。

2. オススメなタイトルの付け方

  • 内容をはっきりと短い言葉で表す
    簡潔に内容を説明したタイトルは、ユーザーやGoogleなどの検索エンジンに好まれます。
  • ありのままを表現する
    嘘、偽りはご法度です。
  • 自然な言葉遣い
  • キーワードは1個だけ
    Googleが公表している資料によると、「キーワードは、いくつか入れることで役立つ場合があります。」と記載されています。「役立つ場合がある」とされているので、キーワードの数は、1個がベストです。

3. 絶対やっちゃダメ!

  • やたら長いタイトル
    検索結果に表示される時に、切り捨てられる可能性があります。
  • キーワードを乱用する
    記事の作者が、キーワードをたくさん追加した方が、上位表示されると誤解しているケースがあります。ユーザーが理解しにくくなるうえに、Googleからは迷惑行為(スパム)とみなされてしまい、ペナルティーを課せられる可能性があるので、やめましょう。
  • タイトルが無い
    検索結果に表示させるには、タイトルが必要です。もし、タイトルが無い場合、Googleは自動でタイトルを作ります。その場合、記事の作者が意図しない内容になることがあります。
  • まるで決まり文句のように、同じタイトルを使い回す
    例:格安商品を売りにするサイトの全ページに「格安商品」というタイトルを付ける。この場合、ユーザーがページを区別できなくなって、混乱してしまいます。
  • 全ページで無題
  • あいまいなタイトル
    例:ホームページに「ホーム」、特定の人のプロフィールに「プロフィール」など、あいまいな記述は避ける。
  • 単にサイト名だけを全ページのタイトルに使用する
    読みやすさが損なわれてしまいます。タイトルにサイト名を入れる場合は、「ー(ハイフン)」「:(コロン)」「|(パイプ)」などの区切り文字を使って、タイトルとは分離して使用することを検討しましょう。

「オススメな付け方」「やっちゃダメ!」の例を参考に、分かりやすいタイトルを付けて、Googleなどの検索エンジンを通じて、ユーザーにありのままページの魅力を伝えましょう。

4. タイトルがGoogleに自動変更された場合の対処法

検索結果に表示されたタイトルが、ご自身で作成したタイトルではない場合の対処法について、解説いたします。

まず最初に、ご自身で付けられたタイトルが、以下の2つのポイントに当てはまらないか、確認してください。

  • 上記「やっちゃダメ!」で紹介している、問題のあるタイトルの付け方になっていませんか?
  • 変更されたタイトルは、記事の内容を表すタイトルとして不適切ですか?

それでも、ご自身で作成したタイトルの方が適していると思う場合、「Google 検索 セントラル ヘルプ コミュニティ【公式リンク】)」に連絡してください。

魅力あるページのmeta description(簡単な説明文)の書き方

次にご紹介するのは、ページのmeta description(簡単な説明文)の書き方についてです。
Googleは、ホームページや一つ一つの記事についてのmeta descriptionを、その情報を必要としているユーザーが興味を持つように書くことを推奨しています。
高品質な説明文を作ることは、検索結果からホームページを訪れてくれるお客様の質と量(※)の向上に役立ちます。
※お客様の質とは、売り上げにつながる見込み客のこと。量とは、見込み客の多い少ないを現します。

ユーザーが興味を持つmeta descriptionの書き方について、以下の5つの項目に分けてご紹介いたします。

  1. 4つの基本テクニック
  2. meta descriptionを書く2つのメリット
  3. meta descriptionを書かない2つのデメリット
  4. meta descriptionの文字数
  5. 絶対やっちゃダメ!

1. 4つの基本テクニック

以下に、meta descriptionを作る場合の4つの基本テクニックについて、ご紹介いたします。

  1. メインホームページ、集約ページでは、サイトレベルの説明を行う。
  2. ページレベルの場合は、ページごとにきちんとした説明を行う ユーザーとGoogleなどの検索エンジンの両方に有益です。
  3. ユーザーが興味を惹くような表現を使い、的確にまとめる
  4. すべてのページに説明文を付ける時間がない場合は、優先順位の高いページから説明文をつけていく

個別の記事一つ一つに説明文を書くことは、ユーザーとGoogleの両方に役立ちます。
例えば、ユーザーが知りたいことについて、ある特定のホームページについて、全ページの横断検索をしたい場合に役立ちます(※)。
※ 例:site:演算子を使用して、ある特定のホームページに、「あるキーワード」の記事があるか調べるとき。

2. meta descriptionを書く2つのメリット

以下に、ページのmeta descriptionを書く2つのメリットをご紹介いたします。

  1. 検索結果に表示される、タイトル下の説明文として使用されます ユーザーが、ページの内容を理解する手助けになります。
  2. Googleなどの検索エンジンにとっても、ページの内容を理解する手助けになります

繰返しになりますが、このmeta descriptionタグに記載された内容は、Googleなどの検索エンジンを通じて、検索結果としてタイトルとともにユーザーに伝えられます。ユーザーが記事の内容を素早くイメージする手助けになるため、タイトルと並んで、とても重要な意味を持ちます。

3. meta descriptionを書かない2つのデメリット

以下に、個別のmeta descriptionを書かない2つのデメリットについて、解説いたします。

  1. Googleがmeta descriptionを自動生成してしまう
    Googleが自動生成してくれるのだから、良い品質に違いない。と思われる方がいらっしゃるかもしれませんが、「Googleが自動生成するmeta descriptionは、意図せず内容と異なる表現が使われる可能性がある」と公表しています。その場合、説明文と記事の内容にズレが生じて、離脱に繋がります。
  2. 検索結果に悪影響が出る可能性がある
    Googleなどの検索エンジンが利用できる情報が少なくなってしまい、検索結果に悪影響が出る可能性があります。

記事が増えれば増えるほど、記事を作るのに精一杯で、個別の説明文まで気力が持たない場合があります。そんな時は、数時間から数日程度の休憩を挟むとか、場合によっては、自動生成を活用するなどしましょう(※)。
※ WordPressの場合は、ソースコードを記述することで、説明文の自動生成が可能になります。

4. meta descriptionの文字数

文字数に制限はありませんが、ほとんどのスマホできちんと表示される50文字以内がベストだと考えています。その理由は、スマホなどのデバイスの幅に合わせて、表示しきれない部分は、切り捨てられるからです。

5. 絶対やっちゃダメ!

ついついやってしまいがちな、絶対やっちゃダメ!な「6つの例」をご紹介いたします。

  1. 説明文が、ページの内容と違う
    Googleなどの検索エンジンとユーザーを騙すことになってしまい、検索結果に悪影響が出る可能性があります。
  2. 説明文を書かない
  3. 一般的な説明文を書く
    例:「このページは、webページです」「野球カードについてのページです」などの一般的な説明文はやめましょう。
  4. 説明文にキーワードだけを書く
  5. 記事の全文をコピーして貼り付ける
  6. 説明文を使いまわす

見出しタグで要点を強調する

次にご紹介するのは、見出しタグの使い方についてです。

見出しタグには、意味段落(※)ごとの内容について主題を検索エンジンを通じてユーザーに伝える、大切な役割があります。見出しを適切に使うことで、分かりやすい階層構造が作られます。その結果、ユーザーや検索エンジンが、そのページに記載されている内容を把握し、理解しやすくなります。
※意味の繋がりで、ひとまとめになる段落

上手な見出しタグの活用方法について、以下の4つの項目

  1. 見出しタグで階層構造をつくる
  2. 見出しの上手な付け方
  3. 絶対やっちゃダメ!
  4. 見出しを目次としても活用する

1. 見出しタグで階層構造をつくる

見出しタグは、h1〜h6まで、全部で6種類あります。その使い方について、ご説明いたします。

  • h1タグの説明を、h2タグで行います
  • h2タグの説明を、h3タグで行います
  • h3タグの説明を、h4タグで行います
  • h4タグの説明を、h5タグで行います
  • h5タグの説明を、h6タグで行います

当店では、h4タグ以下は、使わない方がいいと考えています。その理由は、以下の2つあります。

  • h4〜h6タグを使う書き方は、階層構造が深すぎて読みづらくなってしまう
  • Googleは、見出しタグを使いすぎないように注意喚起している

ユーザーが読みづらく感じるということは、嫌われてしまう(離脱)ことになって、SEO的にも悪影響が考えられます。見出しタグは、読みやすさを損なわない程度に、付けましょう。

2. 見出しの上手な付け方

以下に、見出しの上手な付け方を、実際の作業手順に沿って、4つご紹介いたします。

  • 同じ内容について書かれた意味段落を整理する 同じ内容をひとまとめにすることで、読みやすくなります。
  • 意味段落ごとに見出しをつける 意味段落ごとに要点を強調することで、ユーザーの理解度が増します。
  • 見出しは短くシンプルに
  • 階層構造として使用する 上記1.〜3.に従って見出しを付れば、特に意識しなくても、ユーザーにとって理解しやすい階層構造が完成します。

3. 絶対やっちゃダメ!

以下にご紹介する「絶対やっちゃダメ!」なことは、ユーザーから嫌われてしまいます。ユーザーから嫌われるということは、Googleなどの検索エンジンからも嫌われてしまいます。その結果、検索結果に悪影響が出る可能性もあるので、避けましょう。

  • 見出しタグを使いすぎない 見出しが乱立すると、構造が複雑になって、読みやすさが損なわれてしまいます。
  • 長い見出しは嫌われる 長い見出しは、読みやすさが損われてしまいます。
  • 文字の装飾や書式を整える目的で使わない 装飾目的(※)で使うタグではありません。目的外使用は、Googleなどの検索エンジンにとっては迷惑行為(スパム)になってしまい、検索結果に悪影響が出るのでやめましょう。
  • 見出しの文字サイズ(太さ、大きさ)は、一度決めたら変更しない ページによって見出しの文字サイズが異なると、読みやすさが損なわれてしまいます。

※太文字にする、アンダーラインをつける、大文字にするなど

読みやすさを重視した見出しの付け方が大切です。

4. 見出しを目次としても活用する

ユーザビリティ(ユーザーの使い勝手)向上のために、h2タグ(またはh2タグとh3タグ)を目次として活用しましょう。

目次をクリックすれば、記事の見出しに飛ぶように、ページ内リンクの設定も欠かせません。

目次を配置する場所は、ページをスクロールしなくても見出しが見えるように、リード文の下あたりがオススメです。

画像の品質は、Googleも重要視

次にご紹介するのは、Googleも重要視する画像の品質についてです。
画像は、一般的に軽視されがちですが、Googleは、高品質なホームページの要件の一つに、高品質で軽量な画像を使うことをあげています。画像は、テキストと同等かそれ以上に、ホームページの品質を大きく左右する、とても大切な存在です。

高品質で軽量な画像データの作り方を、以下の5項目

  1. 画像の見た目
  2. ファイル名の付け方
  3. alt属性の適正使用
  4. コンピューターアルゴリズムが画像検索を変える
  5. その他

に分けてご紹介いたします。

1. 画像の見た目

画像の品質、データ容量、表示速度などについて、以下の7つのポイントに分けてご説明いたします。

  • オリジナルの画像(写真、イラスト)を使う Googleは、オリジナル画像の使用を推奨しています。
  • 高画質な画像を使用する ぼやけた不明瞭な画像ではなく、鮮明で高画質の写真は、ユーザーの心を掴みます。
  • アイキャッチ画像(記事のタイトルや内容を表す画像)も高品質なものを使用する 画像検索結果のサムネイル画像で目立つため、ユーザーがクリックしてくれる可能性が高くなります。
  • ページ上部に、アイキャッチ画像を表示する ページを開いてスクロールしなくても見える位置にアイキャッチ画像を配置することで、スクロールしてくれる率が上がります。
  • 画像の配置場所は、関連する文章のすぐそばにする 画像を関連する文章の近くに配置することで、ユーザーとGoogleが、画像とそれに関連する文章を正しく理解する手助けに繋がります。
  • 画像の表示速度は、高速で表示させる 画像サイズが大きいと、ページの読み込みに時間がかかってしまい、離脱の原因になってしまいます。画像サイズは、画質を損なわない程度に、できるだけ小さくしましょう。
  • [loading="lazy"]をimgタグに付けると、表示速度が向上する その理由は、画像が画面に表示する必要になった時だけ読み込まれるようになるからです。

2. ファイル名の付け方

画像のファイル名の付け方や、jpgやpngなど選択すべき拡張子のポイントについて、具体例を用いながらご紹介いたします。

  • 画像のファイル名は「image1.jpg」や「1.jpg」など一般的なものは使わない 画像の内容がイメージできる名称にしてください。あと、サイトに何千もの画像がある時は、ファイル名とalt属性を自動化することを検討してください。
  • 画像のファイル名(例) 「我が家にやってきた黒い子猫」の写真の場合は、IMG00023.jpgではなくmy-new-black-kitten.jpgの方が画像のテーマを判断するために役立ちます。アンダースコア _ では無く、ハイフン - を使用してください。
  • ダルメシアンの子犬が遊んでいる写真の最適なファイル名は、puppy.jpg です。
  • 極端に長いファイル名を書いてはいけません
  • 画像をローカライズ(※1)する場合は、ファイル名を英語など外国の言語で表記してください。
    ※1 ローカライズとは、海外でも利用できるように英語や他国の言語で表記することです。
  • 一般的にサポートされているファイルの拡張子を使う ほとんどのブラウザは、jpg、gif、png、bmp、webp画像形式をサポートしているので、きちんと表示されます。また、ファイル名の拡張子とファイルの種類を一致(※2)させることをお勧めします。
    ※2 例えば、ファイル名の拡張子を手入力した場合は、実際のファイルの種類とファイル名に入力した拡張子が異なります。

3. alt属性の適正使用

alt属性とは、画像の説明文のことです。
ユーザーが、スクリーンリーダー(音声読み上げソフト)を使用している場合など、何らかの理由で、Webブラウザで画像が表示できないときに、代わりに画像の説明文を伝える補助機能として使われています。また、Googleの画像検索の結果にも使用されています。

2010年ころは、alt属性にキーワードを羅列して詰め込むなど、今では考えられないような行為が、普通に行われていました。現在は、そのような行為は、スパム(迷惑行為)としてSEOに悪影響が出る可能性があります。alt属性は、画像の説明文として適正に使用するようにしましょう。
以下にalt属性の設定時の注意点について、実例も交えながらご紹介いたします。

  • alt属性は必ず設定する
  • alt属性に文章全体をコピー&ペーストしない
  • 過度に長いテキストをalt属性に設定しない スパム(迷惑行為)と判断されてSEOに悪影響が出ます。
  • alt属性にキーワードを羅列したり詰め込まない スパムとみなされてSEOに悪影響が出る可能性があります。
  • 画像にタイトルや見出しなどの重要なテキストを埋め込まない タイトルや見出しは、画像の説明ではないので、スパム(迷惑行為)とみなされてしまい、SEOに悪影響が出る可能性があります。
  • ダルメシアンの子犬が遊んでいる写真のalt属性 alt="Dalmatian puppy playing fetch"

4. コンピューター ビジョン アルゴリズムが画像検索を変える

まず最初に、コンピューター ビジョンについて、説明いたします。

コンピューター ビジョンとは、「コンピューターに人間の目と同様の機能を持たせる技術」のことです。具体的には、スマートフォンなどで使われている「顔認証機能」や、現実世界の風景に3DCGなどを重ねて表示する「AR(拡張現実感)」(Augmented Realityの略)、監視カメラシステムなどで活用されています。

コンピューター ビジョン アルゴリズムとは、画像処理の精度を高めるために、画像をコンピューター ビジョン技術を応用して高度に把握することで、画像検索結果に活用する仕組みのことです。Googleでは、現在、その研究・開発が進められています。

今から、画像ファイル名とalt属性を簡単で理解しやすいものにしておくことは、今後、Googleのコンピューター ビジョン アルゴリズムが実用化された際に、SEOにも良い結果をもたらす重要なポイントです。

5. その他

  • URL、ファイル名、alt属性は、短い言葉で端的に表す
    Googleは、画像を理解するために、URLやファイル名、代替テキストも参考にしています。URLは論理的に構成し、画像コンテンツは適切に分類してください。(例 ファイル名 my-new-black-kitten.jpg)
  • 画像リンクだけでサイト内リンクを設定しない
    画像リンクとテキストリンクで迷った場合は、テキストリンクを優先しましょう。画像にリンクを設定するときも、alt属性にテキストを入力します。そうすることで、Googleはリンク先のページについて、普通のテキストリンクと同じように理解できます。
  • Google画像検索の掲載順位は、ホームページのSEOが適用される
    つまり、高品質なホームページに使用されている画像が、上位表示されます。画像サイトマップを使うことで、Google bot(※)があなたのホームページで見つけた画像の詳細情報を検索結果に活用することができます。これにより、Googleの画像検索結果で、あなたの画像が表示される可能性が高くなります。
    ※Google botとは、Googleが、インターネット上に公開されているホームページなどのテキストや画像、動画などの情報を自動で収集するロボットのようなもののこと。
  • 画像サイトマップの構造は、ホームページのXMLサイトマップファイル(サイト内のページをリストアップして、検索エンジンに伝えるファイル)に似ています。
  • Googleが、レスポンシブwebデザインでのホームページ制作を推奨している理由の一つに、画像検索もデスクトップよりも、モバイル端末で多く利用されている点があげられます。
  • CSSで画像を読み込む場合は、背景画像や記事の中で使う画像が、画像検索の結果に表示されません。
  • イラストをHTML(マークアップ言語)で、きちんと意味づけすることは、Webページを巡回して情報収集するGoogle botが画像を見つけるのに重要なことです。
  • [picture]タグを使えば、CSSやJavaScriptを使わなくても、画像を画面幅に応じて最適なサイズで表示してくれます。
  • [img srcset] 属性や [picture] 要素を使用するメリットは、画像が画面幅に応じて最適な画像サイズで自動表示される点です。逆にデメリットは、IE(インターネットエクスプローラー)では表示されない点です。

引用文は、適切にマークアップ

引用(コピー&ペースト)する際は、引用した内容と引用元のサイトについて、適切なマークアップが必要です。引用したことをユーザーと検索エンジンにきちんと伝えましょう。

単にコピー&ペーストしただけの場合は、スパムと認定されてしまい、Googleによって検索結果のはるか彼方へ葬られてしまいます。

積み木でbadとgoodを並べる

まとめ

目指す方向は、ユーザーに支持される最高品質のコンテンツ制作です。上記ポイントに気をつけて、最高品質なコンテンツを増やしてください。地道に努力を継続することが、大きな成果に繋がる唯一の方法です。

困ったときは

最高品質のホームページ制作には、かなりの時間と労力が必要です。そのために人材を割くことができる場合は、良いですが、そうはいかないケースも多いのではないでしょうか?

記事の制作でお困りの時は、最新SEOのWebコンサルティングも承っている大阪 はまぐちWebデザインにご相談ください。お客様に最適なご提案をさせていただきます。
初回お問い合わせは、お問い合わせフォームよりお願いします。

********************************
はまぐちWebデザインは大阪、尼崎、西宮、芦屋を中心に、最新SEO対策を重視したホームページ制作、Webコンサルティングなどを承っています。
********************************

関連記事

経験豊富なボードを持つイラスト

ホームページ運営ノウハウ たった一つの方法

モバイル、パソコン、タブレットの利用率

モバイル未対応はSEOに悪影響も

seoのイラスト

SEO対策成功の鍵は、コンテンツの充実にあり

引用文のご紹介

この記事の作成にあたり、参考にしたGoogle サーチ セントラル の文章を引用してご紹介いたします。Google翻訳では、直訳すぎて意味が理解できませんでした。そのため、すべて原文(英文) で掲載いたします。興味のある方は、ご覧ください。

  1. タイトルタグの使い方
  2. タイトルは、記事の内容を端的に説明する
  3. meta description タグの活用方法
  4. meta description タグを利用するメリット
  5. 高品質な説明文の作り方
  6. 見出しタグは、重要なテキストを強調する
  7. 画像の上手な活用法
  8. Google画像検検索の一番良い使い方

1. タイトルタグの使い方

「タイトルタグの使い方」を引用してご紹介いたします。

Why more than HTML title tags are used
Why not just always use the HTML title tag? For the same reasons we explained when we began going beyond the tag significantly back in 2012. HTML title tags don't always describe a page well. In particular, title tags can sometimes be:

Very long.
"Stuffed" with keywords, because creators mistakenly think adding a bunch of words will increase the chances that a page will rank better.
Lack title tags entirely or contain repetitive "boilerplate" language. For instance, home pages might simply be called "Home". In other cases, all pages in a site might be called "Untitled" or simply have the name of the site.

Overall, our update is designed to produce more readable and accessible titles for pages. In some cases, we may add site names where that is seen as helpful. In other instances, when encountering an extremely long title, we might select the most relevant portion rather than starting at the beginning and truncating more useful parts.

Last updated 2021-08-24

2. タイトルは、記事の内容を端的に説明する

次に紹介する「タイトルは、記事の内容を端的に説明する」は、上記「タイトルタグの使い方」についての補足説明となっています。

Create descriptive page titles

Titles are critical to giving users a quick insight into the content of a result and why it's relevant to their query. It's often the primary piece of information used to decide which result to click on, so it's important to use high-quality titles on your web pages.
Here are a few tips for managing your titles:
・As explained above, make sure every page on your site has a title specified in the 「title」 tag.
・Write descriptive and concise page titles. Avoid vague descriptors like "Home" for your home page, or "Profile" for a specific person's profile. Also avoid unnecessarily long or verbose titles, which are likely to get truncated when they show up in the search results.
・Avoid keyword stuffing. It's sometimes helpful to have a few descriptive terms in the title, but there's no reason to have the same words or phrases appear multiple times. A title like "Foobar, foo bar, foobars, foo bars" doesn't help the user, and this kind of keyword stuffing can make your results look spammy to Google and to users.
・Avoid repeated or boilerplate titles. It's important to have distinct, descriptive titles for each page on your site. Titling every page on a commerce site "Cheap products for sale", for example, makes it impossible for users to distinguish one page differs another. Long titles that vary by only a single piece of information ("boilerplate" titles) are also bad; for example, a standardized title like " - See videos, lyrics, posters, albums, reviews and concerts" contains a lot of uninformative text. One solution is to dynamically update the title to better reflect the actual content of the page: for example, include the words "video", "lyrics", etc., only if that particular page contains video or lyrics. Another option is to just use "" as a concise title and use the meta description (see below) to describe your site's content.
・Brand your titles, but concisely. The title of your site's home page is a reasonable place to include some additional information about your site. For instance, "ExampleSocialSite, a place for people to meet and mingle". But displaying that text in the title of every single page on your site hurts readability and will look particularly repetitive if several pages from your site are returned for the same query. In this case, consider including just your site name at the beginning or end of each page title, separated from the rest of the title with a delimiter such as a hyphen, colon, or pipe, like this:
ExampleSocialSite: Sign up for a new account.
・Be careful about disallowing search engines from crawling your pages. Using the robots.txt protocol on your site can stop Google from crawling your pages, but it may not always prevent them from being indexed. For example, Google may index your page if we discover it by following a link from someone else's site. To display it in search results, Google will need to display a title of some kind and because we won't have access to any of your page content, we will rely on off-page content such as anchor text from other sites. (To truly block a URL from being indexed, you can use the noindex directive.)
Why the search result title might differ from the page's 「title」 tag
If we've detected that a particular result has one of the above issues with its title, we may try to generate an improved title from anchors, on-page text, or other sources. However, sometimes even pages with well-formulated, concise, descriptive titles will end up with different titles in our search results to better indicate their relevance to the query. There's a simple reason for this: the title tag as specified by a website owner is limited to being static, fixed regardless of the query.
When we know the user's query, we can often find alternative text from a page that better explains why that result is relevant. Using this alternative text as a title helps the user, and it also can help your site. Users are scanning for their query terms or other signs of relevance in the results, and a title that is tailored for the query can increase the chances that they will click through.
If you're seeing your pages appear in the search results with modified titles, check whether your titles have one of the problems described above. If not, consider whether the alternate title is a better fit for the query. If you still think the original title would be better, let us know in our Google Search Central Help Community.

Last updated 2021-09-09 UTC.

3. meta descriptionタグの利用方法

meta descriptionタグの利用方法についての記事を引用して紹介いたします。

meta name="description" content="A description of the page"
Use this tag to provide a short description of the page. In some situations, this description is used in the snippet shown in search results.

4. meta descriptionタグを利用するメリット

meta descriptionタグのメリットについての記事を引用して紹介いたします。

What are the merits of description meta tags?
description meta tags are important because Google might use them as snippets for your pages. Note that we say "might" because Google may choose to use a relevant section of your page's visible text if it does a good job of matching up with a user's query. Adding description meta tags to each of your pages is always a good practice in case Google cannot find a good selection of text to use in the snippet. The Google Search Central blog has informative posts on improving snippets with better description meta tags. We also have a handy article on how to create good titles and snippets.

Sample plain blue link search result for baseball cards

Accurately summarize the page content
Write a description that would both inform and interest users if they saw your description meta tag as a snippet in a search result. While there's no minimal or maximal length for the text in a description meta tag, we recommend making sure that it's long enough to be fully shown in Search (note that users may see different sized snippets depending on how and where they search), and contains all the relevant information users would need to determine whether the page will be useful and relevant to them.

Avoid:

Writing a description meta tag that has no relation to the content on the page.
Using generic descriptions like "This is a web page" or "Page about baseball cards".
Filling the description with only keywords.
Copying and pasting the entire content of the document into the description meta tag.
Use unique descriptions for each page
Having a different description meta tag for each page helps both users and Google, especially in searches where users may bring up multiple pages on your domain (for example, searches using the site: operator). If your site has thousands or even millions of pages, hand-crafting description meta tags probably isn't feasible. In this case, you could automatically generate description meta tags based on each page's content.

Avoid:

Using a single description meta tag across all of your site's pages or a large group of pages.

5. 高品質な説明文の作り方

高品質な説明文を作るポイントについての記事を、引用して紹介いたします。

Create good meta descriptions
Google will sometimes use the tag from a page to generate a search results snippet, if we think it gives users a more accurate description than would be possible purely from the on-page content. A meta description tag generally informs and interests users with a short, relevant summary of what a particular page is about. They are like a pitch that convince the user that the page is exactly what they're looking for. There's no limit on how long a meta description can be, but the search result snippets are truncated as needed, typically to fit the device width.

Make sure that every page on your site has a meta description.
Differentiate the descriptions for different pages. Identical or similar descriptions on every page of a site aren't helpful when individual pages appear in the web results. In these cases we're less likely to display the boilerplate text. Wherever possible, create descriptions that accurately describe the specific page. Use site-level descriptions on the main home page or other aggregation pages, and use page-level descriptions everywhere else. If you don't have time to create a description for every single page, try to prioritize your content: At the very least, create a description for the critical URLs like your home page and popular pages.
Include clearly tagged facts in the description. The meta description doesn't just have to be in sentence format; it's also a great place to include information about the page. For example, news or blog postings can list the author, date of publication, or byline information. This can give potential visitors very relevant information that might not be displayed in the snippet otherwise. Similarly, product pages might have the key bits of information—price, age, manufacturer—scattered throughout a page. A good meta description can bring all this data together. For example, the following meta description provides detailed information about a book.

「meta name="description" content="Written by A.N. Author,
Illustrated by V. Gogh, Price: $17.99,
Length: 784 pages"」

In this example, information is clearly tagged and separated.

Programmatically generate descriptions. For some sites, like news media sources, generating an accurate and unique description for each page is easy: since each article is hand-written, it takes minimal effort to also add a one-sentence description. For larger database-driven sites, like product aggregators, hand-written descriptions can be impossible. In the latter case, however, programmatic generation of the descriptions can be appropriate and are encouraged. Good descriptions are human-readable and diverse. Page-specific data is a good candidate for programmatic generation. Keep in mind that meta descriptions comprised of long strings of keywords don't give users a clear idea of the page's content, and are less likely to be displayed in place of a regular snippet.
Use quality descriptions. Finally, make sure your descriptions are truly descriptive. Because the meta descriptions aren't displayed in the pages the user sees, it's easy to let this content slide. But high-quality descriptions can be displayed in Google's search results, and can go a long way to improving the quality and quantity of your search traffic.

6. 見出しタグは、重要なテキストを強調する

「見出しタグは、重要なテキストを強調する」についての引用文です。

Use heading tags to emphasize important text
Use meaningful headings to indicate important topics, and help create a hierarchical structure for your content, making it easier for users to navigate through your document.

Imagine you're writing an outline
Similar to writing an outline for a large paper, put some thought into what the main points and sub-points of the content on the page will be and decide where to use heading tags appropriately.

Avoid:
Placing text in heading tags that wouldn't be helpful in defining the structure of the page.
Using heading tags where other tags like 「em」 and 「strong」 may be more appropriate.
Erratically moving from one heading tag size to another.

Use headings sparingly across the page
Use heading tags where it makes sense. Too many heading tags on a page can make it hard for users to scan the content and determine where one topic ends and another begins.

Avoid:
Excessive use of heading tags on a page.
Very long headings.
Using heading tags only for styling text and not presenting structure.

7. 画像の上手な活用法

「画像の上手な活用法」についての引用文です。

Optimize your images
Use HTML images
Use HTML image elements to embed images in your content.

Use the HTML 「img」 or 「picture」 elements
Semantic HTML markup helps crawlers find and process images. By using the 「picture」 element you can also specify multiple options for different screen sizes for responsive images. You might also use the loading="lazy" attribute on images to make your page load faster for your users.

Avoid:

Using CSS to display images that you want us to index.
Use the alt attribute
Provide a descriptive filename and alt attribute description for images. The alt attribute allows you to specify alternative text for the image if it cannot be displayed for some reason.

Illustration showing the usefulness of good alt text for an image.
Why use this attribute? If a user is viewing your site using assistive technologies, such as a screen reader, the contents of the alt attribute provide information about the picture.

Another reason is that if you're using an image as a link, the alt text for that image will be treated similarly to the anchor text of a text link. However, we don't recommend using too many images for links in your site's navigation when text links could serve the same purpose. Lastly, optimizing your image filenames and alt text makes it easier for image search projects like Google Images to better understand your images.

Use brief but descriptive filenames and alt text
Like many of the other parts of the page targeted for optimization, filenames and alt text are best when they're short, but descriptive.

Avoid:
Using generic filenames like image1.jpg, pic.gif, 1.jpg when possible—if your site has thousands of images you might want to consider automating the naming of the images.
Writing extremely lengthy filenames.
Stuffing keywords into alt text or copying and pasting entire sentences.
Supply alt text when using images as links
If you do decide to use an image as a link, filling out its alt text helps Google understand more about the page you're linking to. Imagine that you're writing anchor text for a text link.

Avoid:
Writing excessively long alt text that would be considered spammy.
Using only image links for your site's navigation.
Help search engines find your images
An Image sitemap can provide Googlebot with more information about the images found on your site. This increases the likelihood that your images can be found in Google Images results. The structure of this file is similar to the XML sitemap file for your web pages.

Use standard image formats
Use commonly supported filetypes; most browsers support JPEG, GIF, PNG, BMP and WebP image formats. It's also a good idea to have the extension of your filename match with the file type.

8. Google画像検索の一番良い使い方

「Google画像検索の一番良い使い方」についての引用文です。

Google Images is a way to visually discover information on the web. Users can quickly explore information with more context around images with new features, such as image captions, prominent badges, and AMP results.

By adding more context around images, results can become much more useful, which can lead to higher quality traffic to your site. You can aid in the discovery process by making sure that your images and your site are optimized for Google Images. Follow our guidelines to increase the likelihood that your content will appear in Google Images search results.
Opt out of Google Images inline linking

If you choose, you can prevent the full-sized image from appearing in the Google Images search results page by opting out of inline linking in Google Images search results.

To opt out of inline linking:

When your image is requested, examine the HTTP referrer header in the request.
If the request is coming from a Google domain, reply with HTTP 200 or 204 and no content.
Google will still crawl your page and see the image, but will display a thumbnail image generated at crawl time in search results. This opt-out is possible at any time, and does not require re-processing of a website's images. This behavior is not considered image cloaking and will not result in manual actions.

You can also prevent the image from appearing in search results entirely.

Create a great user experience
To boost your content's visibility in Google Images, focus on the user by providing a great user experience: make pages primarily for users, not for search engines. Here are some tips:

Provide good context: Make sure that your visual content is relevant to the topic of the page. We suggest that you display images only where they add original value to the page. We particularly discourage pages where neither the images or the text are original content.
Optimize placement: Whenever possible, place images near relevant text. When it makes sense, consider placing the most important image near the top of the page.
Don't embed important text inside images: Avoid embedding text in images, especially important text elements like page headings and menu items, because not all users can access them (and page translation tools won't work on images). To ensure maximum accessibility of your content, keep text in HTML, provide alt text for images.
Create informative and high quality sites: Good content on your webpage is just as important as visual content for Google Images - it provides context and makes the result more actionable. Page content may be used to generate a text snippet for the image, and Google considers the page content quality when ranking images.
Create device-friendly sites: Users search on Google Images more from mobile than on desktop. For this reason, it is important that you design your site for all device types and sizes. Use the Mobile-Friendly Test to test how well your pages work on mobile devices, and get feedback on what needs to be fixed.
Create good URL structure for your images: Google uses the URL path as well as the file name to help it understand your images. Consider organizing your image content so that URLs are constructed logically.
Check your page title and description
Google Images automatically generates a title and snippet to best explain each result and how it relates to the user query. This helps users decide whether or not to click on a result.

We use a number of different sources for this information, including descriptive information in the title, and meta tags for each page.

You can help us improve the quality of the title and snippet displayed for your pages by following Google's title and snippet guidelines.

Add structured data
If you include structured data, Google Images can display your images as rich results, including a prominent badge, which give users relevant information about your page and can drive better targeted traffic to your site. Google Images supports structured data for the following types:

Product
Video
Recipe
Follow the general structured data guidelines as well as any guidelines specific to your structured data type; otherwise your structured data might be ineligible for rich result display in Google Images. In each of these structured data types, the image attribute is a required field to be eligible for badge and rich result in Google Images.
Optimize for speed
Images are often the largest contributor to overall page size, which can make pages slow and expensive to load. Make sure to apply the latest image optimization and responsive image techniques to provide a high quality and fast user experience.

On Google Images, the AMP logo AMP logo helps users identify pages that load quickly and smoothly. Consider turning your image host page into an AMP to decrease page load time (where the target page is the page the user lands after clicking on a result in Google Images).

Analyze your site speed with PageSpeed Insights and visit our Web Fundamentals page to learn about best practices and techniques to improve website performance.

Add good quality photos
High-quality photos appeal to users more than blurry, unclear images. Also, sharp images are more appealing to users in the result thumbnail and increase the likelihood of getting traffic from users.

Include descriptive titles, captions, filenames, and text for images
Google extracts information about the subject matter of the image from the content of the page, including captions and image titles. Wherever possible, make sure images are placed near relevant text and on pages that are relevant to the image subject matter.

Likewise, the filename can give Google clues about the subject matter of the image. For example, my-new-black-kitten.jpg is better than IMG00023.JPG. If you localize your images, make sure you translate the filenames, too.

Use descriptive alt text

Alt text (text that describes an image) improves accessibility for people who can't see images on web pages, including users who use screen readers or have low-bandwidth connections.

Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image. Also, alt text in images is useful as anchor text if you decide to use an image as a link.

When choosing alt text, focus on creating useful, information-rich content that uses keywords appropriately and is in context of the content of the page. Avoid filling alt attributes with keywords (keyword stuffing) as it results in a negative user experience and may cause your site to be seen as spam.

Bad (missing alt text): [img src="puppy.jpg"/]
Bad (keyword stuffing): [img src="puppy.jpg" alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food"/]
Better: [img src="puppy.jpg" alt="puppy"/]
Best: [img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/]
We recommend testing your content by auditing for accessibility and using a slow network connection emulator.

Help us discover all your images
Use semantic markup for images
Google parses the HTML of your pages to index images, but does not index CSS images.

Good: [img src="puppy.jpg" alt="A golden retriever puppy" /]
Bad: [div style="background-image:url(puppy.jpg)"]A golden retriever puppy[/div]
Use an image sitemap
Images are an important source of information about the content on your site. You can give Google additional details about your images, and provide the URL of images we might not have otherwise discover by adding information to an image sitemap.

Image sitemaps can contain URLs from other domains, unlike regular sitemaps, which enforce cross-domain restrictions. This allows you to use CDNs (content delivery networks) to host images. We encourage you to verify the CDN's domain name in Search Console so that we can inform you of any crawl errors that we may find.

Supported image formats
Google Images supports images in the following formats: BMP, GIF, JPEG, PNG, WebP, and SVG.

You can also inline images as Data URIs. Data URIs provide a way to include a file, such as an image, inline by setting the src of an img element as a Base64 encoded string using the following format:

[img src="data:image/svg+xml;base64,[data]"]
While inlining images can reduce HTTP requests, carefully judge when to use them since it can considerably increase the size of the page. For more on this, refer to the section on pros and cons of inlining images on our Web Fundamentals page.

Responsive images
Designing responsive web pages leads to better user experience, since users use them across a plethora of device types. Refer to our Web Fundamentals on Images to learn about the best practices for handling images on your website.

Webpages use [img srcset] attribute or element to specify responsive images. However, some browsers and crawlers do not understand these attributes. We recommend that you always specify a fallback URL via the img src attribute.

The srcset attribute allows specifying different versions of the same image, specifically for different screen sizes.

Example: [img srcset]

[img srcset="example-320w.jpg 320w,
example-480w.jpg 480w,
example-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="example-800w.jpg" alt="responsive web!"]
The element is a container that is used to group differentversions of the same image. It offers a fallback approach so the browser can choose the right image depending on device capabilities, like pixel density and screen size. The picture element also comes in handy for using new image formats with built-in graceful degradation for clients that may not yet support the new formats.

We recommend that you always provide an img element as a fallback with a src attribute when using the picture tag using the following format:

Example:

[picture]
[source type="image/svg+xml" srcset="pyramid.svg"]
[source type="image/webp" srcset="pyramid.webp"]
[img src="pyramid.png" alt="large PNG image..."]
[/picture]
Optimize for SafeSearch
SafeSearch is a setting in Google user accounts that specifies whether to show or block explicit images, videos, and websites in Google Search results. Make sure Google understands the nature of your videos so that Google can apply SafeSearch settings to your videos if appropriate.

Group adult-only images in a common URL location
If your site contains adult images, we strongly recommend grouping the images separately from other images on your website. For example: http//www.example.com/adult/image.jpg.

Add metadata to adult pages
Our algorithms use a variety of signals to decide whether an image or a whole page gets filtered from the results when the user's SafeSearch filter is turned on. In the case of images, some of these signals are generated using machine learning, but the SafeSearch algorithms also look at simpler things such as where the image was used previously and the context in which the image was used.

One of the strongest signals is self-marked adult pages. If you publish adult content, we recommend that you add one of the following meta tags to your pages:

[meta name="rating" content="adult" /]

[meta name="rating" content="RTA-5042-1996-1400-1577-RTA" /]
Many users prefer not to have adult content included in their search results (especially if kids use the same device). When you provide one of these meta tags, it helps to provide a better user experience because users don't see results which they don't want to or expect to see.

And finally...
Please read our SEO Starter Guide which contains lots of useful information to rank better. If you have more questions, post them in the Google Search Central Help Community.