title要素のSEO対策
title要素は「検索結果の見出し」と「お気に入り（ブックマーク）のラベル」に使用されるテキストを指定します。SEO対策で最も重要な対策の1つです。テキストは検索で優先したいキーワードを先頭にからめた内容にします。サイトのタイトルではなく、ページごとのタイトルを指定する必要があり、すべてのページのtitle要素のテキストが違うことが重要です。
titleタグ内に入れる文字数は、PCとスマホとも全角で約30文字までが検索結果に表示されます。文字数をオーバーした場合、あふれた部分は「…」で表示されます。
meta descriptionとは
meta descriptionは、検索結果でのページの説明文が表示されます。指定は、headタグ内に<meta name=”description” content=”説明文”>を記述します。
<meta charset="utf-8">
<title>タイトル</title>
<meta name="description" content="説明文">
<body>
<section>
<h2>meta descriptionのSEO的な対策</h2>
<section>
<h3>meta descriptionを指定しない場合</h3>
<p>meta descriptionを指定しない場合、検索サイトはページの先頭のテキストを使い説明文を生成します。そのため意図しない説明文になる可能性があります。必ず設定しておきましょう。</p>
</section>
<section>
<h3>meta descriptionの頻度と内容</h3>
<p>サイト全体の説明文ではなく、ページごとの説明文を入れていきます。検索サイトは、トップページ以外も検索結果として表示します。ページの内容が把握しやすい説明文にしましょう。</p>
</section>
<section>
<h3>meta descriptionの文字数</h3>
<p>PCとスマホで検索結果に表示される文字数が違います。文字数を超えた部分は、「…」で表示されます。下記は文字数の目安です。</p>
<ul>
<li>PCの場合…全角で約120文字</li>
<li>スマホの場合…全角で約50文字</li>
</ul>
</section>
</section>
<section>
<h2>「meta keywords」はSEO対策で重要か</h2>
<p>meta keywordsは、ページ内のキーワードを列挙する指定で、古いSEO対策で重要視されていました。現在、Google, Bingなど検索サイトは、meta keywordsを重要視しないと表明しています。使っても問題はないですが、入れることで順位の変動はないと思ってください。</p>
<div class="graybox">
<p>Googleのmeta keywordsの扱いについて（英語）
<br><a href="https://webmasters.googleblog.com/2009/09/google-does-not-use-keywords-meta-tag.html" target="_blank" rel="noopener noreferrer">Google does not use the keywords meta tag in web ranking</a>
</p>
</div>
<p>下記は「meta keyword」の指定方法です。meta descriptionと同様、<a href="https://web-manabu.com/html-css5/#head-1">headタグ</a>に記述します。各キーワードはカンマで区切ります。カンマの前後にスペースを入れてはいけません。</p>
<pre class="html"><code>
<meta name="keywords" content="キーワード,キーワード,キーワード">
ここまでのまとめ
初級では、PCサイトの制作が最低限、作成できる内容でまとめています。最後に、ここまでの内容の作業が行えるようにindex.html, reset.css, style.cssと各フォルダをまとめた基本フォーマットを下記からダウンロードできるようにしてあります。
基本フォーマット
まとめ
- meta descriptionは検索一覧に表示される説明文
- meta descriptionの内容は、ページごとの説明になるようにする
- 同じくtitile要素も、ページごとのタイトルになるようにする