SEO内部対策の基本となる、メタタグの記載方法と役割を紹介します。
SEO相談を頂くお客様の半数以上が、この基本を押さえていない
サイト構成になっています。
メタタグとは、（metatag）ホームページの情報を回覧者に伝えるための物。
そして、検索エンジンのクローラーもこのメタタグの情報をもとにページ情報を認識します。
HTMLとは、（Hyper Text Markup Language）ホームページ内の装飾、簡単に置き換えると、
テキストのカラーや大きさ、リンクの埋め込み、動画や画像の表記する言語です。
そして、検索エンジンのクローラーもどんなページなのか、メタタグの情報と整合性があるかなど
判断しています。
では、SEO相談を頂くお客様との会話の中で『難しいこと抜きで説明して』とよく言われ
ます。出来るだけ実践式で紹介いたします。
折角、いい内容のコンテンツなのに成果が出ないときは、コンテンツ作成の基礎ですが
以下の項目を実施してみてください。
目次【SEO内部対策に効果のあるメタタグとHTML】
- メタタグの記載
1.-1 メタタグの検索結果の表示
1.-2 タイトルの記載方法
1.-3 ディスクリプションの記載方法 - HTMLの記載
2.-1 まずは、ソースコードの見かた
2.-2 hタグ、見出しタグの正しい使い方
2.-3 hタグ、見出しタグの注意事項
2.-4 ページ内リンク aタグ要素とアンカーテキスト
2.-5 内部対策SEOの意外と重要なimg要素 画像に情報を入れる
1.メタタグの記載
メタタグの記載方法と検索結果にどのように影響を及ぼすのか
見ていきましょう。
1.-1 メタタグの検索結果の表示
下記に示しますが、検索結果に大きく影響するのがタイトルです。
title要素は、そのページの表題です。
本のタイトルだと思えば一番ピンとくると思います。
description要素は、そのページの要約です。
本の帯説明文だと思えばいいです。
自分のコンテンツを表す大切な本の表紙です。
※画像をクリックすると拡大表示します。
google検索で、海外旅行と検索してみた結果の画像です。
赤枠がタイトル メタタグ
オレンジがデイスクリプション メタタグ
以下がメタタグになります。
|
1 2 3 4 |
<title>ページタイトル 赤枠部分</title> <meta name="description" content="このページの要約、本の帯だと思えばいいです オレンジ枠部分"> |
1.-2 タイトルの記載方法
昔は、検索結果には、ブラウザー、検索エンジン、デバイスにより
表示文字数が限られています。
PC環境の検索では、タイトルが32文字前後表示可能
スマートフォン環境の検索では、タイトルが24文字前後表示されていました。
その結果、タイトル文字数に神経を使っていましたが
現在では、どのデバイス、どの検索エンジン、どのブラウザーでも
31文字前後は、タイトルとして表示されます。
よって、ページタイトルは
・31文字以内にします。
・ページの内容示す
・ホームページ全体でユニークなもの
この3点を抑えておくことが大切です。
もっとも伝えたいテーマをキーフレーズと呼び
タイトルの初めにそのキーフレーズが来るようにしましょう！
通常、1ページにキーフレーズは1つでコンテンツを作成します。
googleの検索は、極めてユーザー（検索ニーズ）に正確に検索結果を届けます、
キーフレーズのタイトル挿入が難しい場合は、類義語でもしっかりと検索結果に反映してくれます。
＜＜最も悲しい結果を招くタイトルの付け方例＞＞
・トップページ
・ブログ1
・施工事例1
・アーカイブー＆一覧ページ
・2018/2/18などの日付
この様な何もページの要約を伝えられていないタイトルの本は誰も買わないですよね。
検索エンジンも、どんなページなのかまったく理解できないです。
改善できるなら改善しましょう。
必ず、ホームページのどんなページでも意味があるから、そのページがあるのです。
無くてもいいページは、存在しない方がいい。
1.-3 ディスクリプションの記載方法
検索結果のタイトルの下に2,3行の説明書きが表示されるのは、ご存知ですね。
デスクリプションとは、スニペット（断片）と呼び、役割はページの要約です。
先程の画像のオレンジ色の枠で囲われた部分がディスクリプションになります。
画像をご覧のとおり、オレンジ色の枠にページの要約が記載されていますね。
タイトルは、どんなデバイスでも現在表示文字数にあまり変更はないのですが、
ディスクリプションの場合は、デバイスやブラウザー、検索エンジンで多少の表示文字数に違いがあります。
よって、ディスクリプションは
・128文字以内
・ページの内容の要約
・ホームページ全体でページごとにユニークなもの
タイトルの時にも出てきた
もっとも伝えたいテーマのキーフレーズを一番最初に持ってきましょう。
妥協して、64文字以内に必ず記載しましょう。
先にも述べましたが、本の帯説明と思いましょう。
書店で本を手に取れば、必ずと言っていいほど、帯がついていて魅力的に本の内容の説明書きがありますよね。
但し、誰かが絶賛、有名人一押しなどは、参考にしないでくださいね。
内容の要約で魅力的に本を説明しているものを参考にしてください。
このディスクリプションは、制作者がメタタグを記載しても絶対にそのテキストが反映されるわけではありません。
スニペット表示＝オレンジ枠内がディスクリプションと同じテキストが吐き出されるケースは、三割強との結果も
あるくらいです。
何故かというと、意図しない検索ワードでヒットした時に、その検索ワードで最適なディスクリプションを
googleが吐き出しているのではないかと、推測できるからです。
この、ケースが起きるページは内容が専門的で極めてコンテンツが重要な魅力あるページの時に発生しているように思います。
その逆で、ディスクリプション未記載の場合に予期せぬ内容をgoogleが自動的に吐き出す場合です。
その様なことを避ける意味でもディスクリプション記載は重要なことです。
2.HTMLの記載
HTMLは、難しいものではありません。
ここでは、SEO内部対策で重要なHTMLの記載方法と使用用途のみを
案内していきます。
本当に簡単ですし、コピペ用のコードも案内しますのでご安心してください。
2.-1 まずは、ソースコードの見かた
ライバルサイトやこんなサイトに育てたい
こんな風にグーグル検索で評価され上位表示したい
さらに自分のホームページ、自社のwebサイトがどんなソースコードで描かれているかを
確認する方法を紹介します。
サイトのソースコードを見ることは、凄く重要です。
ブラウザーにより回覧方法が違います。
今回は。chromeでの回覧方法を紹介しておきます。
ソースコードを見たいページで、
ページ内余白で、右クリック、ソースの表示
これで見ることができます。
引用元トラベルコさん※画像をクリックすると拡大表示します。
2.-2 hタグ、見出しタグの正しい使い方
見出しタグ（hタグ）とは、本で言うところの
段落見出しになります。
内部SEO対策では、先に述べたタイトルやディスクリプションに次いで重要な
HTMLタグになります。
hタグには、重要度においてレベル分けして使います。
レベル1が重要度高 ～ レベル6が重要度低
もっとも簡単なコード記載が以下のようになります。（クラス定義やCSSを利便上無視しています）
|
1 2 3 4 5 6 7 8 |
<h1>見出し重要度レベル1</h1> <h2>見出し重要度レベル2</h2> <h3>見出し重要度レベル3</h3> <h4>見出し重要度レベル4</h4> <h5>見出し重要度レベル5</h5> <h6>見出し重要度レベル6</h6> |
では、正しい使いと大切なポイントをご説明いたします。
見出しがあることにより、可読性が上がり、ページ内の階層構造が整うことになります。
h1タグは、ページ内で1つが望ましい。と、言うか1つになるに決まっている。
ページ内の最重要見出しになります。タイトルと同じになっちゃうなぁ～
こんな風に疑問に思ったら、内部SEO対策に向いていると言えます。
先に記載したメタタグのタイトルは、そのページに対してのユーザーにとって魅力的な
タイトルをつけましょう、但し、関連性がないとダメでした。
h1タグに関しては、ページ内の最上位の見出しになります。
時には、タイトルと同じになるケースもあると思います。
ですが、ページ内のコンテンツの内容がしっかりとユーザーに有益な情報になっているときは、
自ずと最重要見出しとタイトルは少し変わってきます。
更に、フォーカスキーワードが自ずと入ってくるのが理想です。
h2タグは、本ブログの緑色背景が入った1、2の見出しです。
h1タグの見出しの内容を説明するにあたり、
各、項目に分けて説明している大タイトルがh2タグです。
そして、h3は、大タイトルの中に入っている1-1、2-1、2-2の見出しです。
2.-3 hタグ、見出しタグの注意事項
hタグは、階層を構造化して見出しとして使用するのがhタグになります。
その為、h3の見出しの内容内にh2が来ることは、不自然であり
ユーザーの可読性を悪くさせてしまうので、コンテンツの内容を見直す必要があると言えます。
hタグをみだりに使用したり、装飾目的で使用することは、絶対にやめてください。
hタグは、検索エンジンもページ内を理解するうえで、活用している為
正確にhタグを設置して、ユーザーと検索エンジンに読み取りやすい
コンテンツを提供しましょう。
内部SEO対策は、コンテンツが占める割合が非常に大きいものとなります。
小手先だけの内部対策SEOは、いったい誰のためになるのでしょうか？
そうです、何の意味もなさない対策です。
グーグル検索エンジンのbotは、本当に極めて優秀で最高のエンジンと今現在言っても過言ではありません。
小手先が通用するものではないと認識しましょう。
hタグが、必然と階層構造になっているコンテンツならば、シッカリとhタグを
記載することで、思いがけない成果をもたらします。本当です！！
ECサイト、ショッピングサイトの階層化によるhタグの記載方法に関しては
少し、具体例を交えて記事にします。しばらくお待ちください
2.-4 ページ内リンク aタグ要素とアンカーテキスト
コンテンツを作成していると、ここも詳しく記事にしたい
過去の記事をこの部分は、参考にしてほしいなど出てくると思います。
ページとページを結ぶ役割を果たしてくれる大切な要素です。
内部対策SEOにとって、有益な記事を書き続けると
サイト管理者も、運営サイト内コンテンツを活用でき
よりいい、内容のコンテンツをわかりやすく配信できます。
a要素とアンカーテキストの記載方法（クラス定義やCSSを利便上無視しています）
|
1 2 3 |
<a href="リンク先のパス（URL）">アンカーテキスト（どのようなページにリンクしているか）</a> |
a要素のhref属性は、リンク先のURLを入れます。以下のパターンがあります。
・絶対パスは、URL全部を入れます。一般的に外部サイトをリンクしたりする時に使用
・相対パスは、リンクを付けているページを基準にURLを記載します。内部リンク時に使用
・ルートパスは、ドメインを基準にURLを記載します。内部リンク時に使用
上記、3パターンがありますが
内部リンク時は、ルートパスを使用しましょう。今度、詳しく記事書きますが何かと便利です。
外部リンク時は、相対パスを使用しましょう。
そして、内部リンクも外部リンクもユーザーの利便性を考えて別タブでリンクしたほうがいい場合は
target="_blank"を追記しましょう。別タブでページが開きます。
a要素とアンカーテキストの記載方法 別タブリンク（クラス定義やCSSを利便上無視しています）
|
1 2 3 |
<a href="リンク先のパス（URL）" target="_blank">アンカーテキスト（どのようなページにリンクしているか）</a> |
アンカーテキストは、内部リンクの場合ページタイトルを記載するといいでしょう。
外部リンクの場合は、リンク先のソースコードを見てタイトルを記載してもいいですし、独自に要約を入れてもいいです。
外部リンクを他サイトから集められるコンテンツは、内部対策SEOで最高のコンテンツですよね！
内部対策SEOと外部対策SEOは、密接な関係といえます。
本物の外部対策！後日記事にします。
2.-5 内部対策SEOの意外と重要なimg要素 画像に情報を入れる
皆さん本記事にて最後の項目になります。
ここまで、お付き合いいただきありがとうございます。
コンテンツを作成している中で画像を付けるケースが多々あると思います。
例えば、ワードプレスのアイキャッチ画像や独自CMSの画像登録などです。
google検索でウェブではなく、画像をクリックしたことがあると思います。
何で、自分のコンテンツ内の画像は検索にヒットしないんだろう？そんなこと
思ったことないですか？
答えは、簡単です。
画像にaltタグを記載していないからです。
画像を埋め込みaltタグ（画像情報）の記載方法です。（クラス定義やCSS、jsを利便上無視しています）
|
1 2 3 |
<img src="画像URL” alt="画像の情報"> |
altタグの画像の情報とは、どのようなものなのか
例をあげてみますので参考にしてください。
ビールの記事を書いたとします。
コンテンツの内容は、色々な銘柄、国、特徴などを画像を交えてページを作成したとします。
各銘柄の画像を載せました。
その時のアサヒスパードライの画像の場合
altタグは、国内で一番出荷の多いアサヒスーパードライもしくは
altタグは、ビール「アサヒスーパードライ」日本シェアナンバー1
こんな感じでしょうか。
勿論、記事の内容に合わせて調整は必要です。
そして、画像にアサヒスーパードライの公式ホームページにリンクを飛ばす場合
ユーザーの利便上、別タグでリンクしましょう。
この場合のHTMLコードの記載方法です。（クラス定義やCSS、jsを利便上無視しています）
|
1 2 3 |
<a href="https://www.asahibeer.co.jp/superdry/" target="_blank"><img src="画像URL" alt="ビール「アサヒスーパードライ」日本シェアナンバー1"></a> |
altタグは、画像の情報を記載する大切な要素です。
シッカリと記載すれば、google画像検索でヒットしてきます。
画像に関連した、内容をaltタグに記載するようにしてくださいね。
関係ない画像に関連性のないaltタグをつけるのは絶対にやめましょう。
グーグルの画像診断技術は、素晴らしいものです。
画像サイトマップの重要性。後日記事にしますね。
私なりに、かみ砕き順に内部対策SEOのメタタグとHTMLの記事を書かせていただきましたが
分かりにくい個所や、読み取りにくい個所などございましたら下記問い合わせから質問してくださいね。
本記事の内容は、web担当者様、ブロガー様など、すぐに取り掛かっていただける
内容ばかりです。SEO内部対策の基本ですが今一度見直していただける記事になると嬉しいです。
