こんにちは、石原です。
今日はHTMLとSEOということで、若干当たり前のことばかりをまとめていこうと思います。
当たり前といえど、プロジェクトの目的を達成するには重要なことです。
HTMLマークアップ作業者自身がこの認識を持つためには、ということで考えてみます。
内容の中では、かなり断定した書き方をするかもしれませんが、正直、異論は多々あると思います。
もし間違っている箇所等ありましたらご連絡いただけると幸いです。
HTMLと、SEO
SEO (Search Engine Optimization) については、何年も前に流行っていたブラックハット的は、すでに Google 側でも対策がなされました。
ブラックハットな手法の一つである、HTMLマークアップによる順位向上においても時代は終わり、隠しリンクや、隠しテキストと言った要素は逆にスパム扱いされる可能性があります。
WebサイトのHTMLマークアップ作業に携わる時、HTMLのマークアップ方法とSEOは関係があるのかと、疑念を持ちながら作業をしていた時期があります。
ちょうどHTML5が策定され始め、実案件でも導入し始めた頃でしょうか。
セマンティックやセクショニングルートといった概念がHTML5にはあり、それまでのdivを酷使した単純なマークアップ作業から解放され、HTML5自体を学ぶこと自体に価値があるのだと言われているような感覚でもありました。
HTML5 vs SEO
きっとマークアップの作業に従事する人の中には、この葛藤を経験した人もいることだと思います。
誰でも参加出来るオープンなWebにすることを目的としたHTML5。
これに対して、それまでのSEOを意識したマークアップとはまるで正反対の目的です。
HTML5の仕様を取るか、SEO対策を取るか
人間は、より身近なものを選択する傾向があります。 マークアップ作業のみを担当する従事者は 、恐らくHTML5の仕様こそ教典であり、守るべきものだと考えます。(昔の僕自身がそうでした)
HTML5の仕様を取るか、SEO対策をとるか。 この命題に対する解答は、そのどちらかではありません。
検索からの集客を全く考えないものを除き、 プロジェクトの目的の達成するためには、両方を取らなければならないのです。
HTML5の仕様を考えつつ、SEO対策もする。
Googleがコードに起因するアルゴリズムを一片たりとも排除しない限り、マークアップにおいてSEOを考慮するということは必要です。
しかし、マークアップによる内部的な対策をすることで、 SEOの順位を上げるという発想は捨てなければならず、これからも排除されていく ということは言えるでしょう。
- HTMLマークアップで、SEOの順位を上げる という 考えは通じない
- HTMLマークアップで、SEOの順位が下がる という 考えは通じる
例えてみます。人の意見を伝える時、相手に伝わるのは、意見そのもので伝えたい内容以内 のことに留まります。 つまり、どんなにいい伝え方をしても、 伝えたい内容以上のことは相手に伝わりません 。
HTMLマークアップも同じです。サイトのコンテンツに対しては、マークアップの方法でより理解しやすくしたり、より読みやすくすることが可能ですが、サイトのコンテンツ自体の価値を上げることはできないのです。
マークアップ作業のSEOに対する目的
HTMLマークアップとは、検索エンジンに対してのWebサイトの意見を伝える手段です。 コーディング業務として目指すべきものは、検索エンジンに対して如何にわかりやすく伝えるか、ということです。
他方、検索エンジンは ユーザーが検索する目的に対して、より良い結果を提供すること を目的として存在しています。
つまり、 検索エンジンに対して理解しやすく伝える ということは、ユーザーが望む情報を という主語がつくことになるでしょう。
以上のことからコーディング業務の目的は
ユーザーが望む情報を、検索エンジンに対して理解しやすく伝える
ということを定義することができます。
具体的な事項
では、実際にHTMLマークアップで重要だと考える事柄を説明します。
1. title タグ
title タグは、何についてのページなのかを簡潔に伝えるための要素です。
1.1 キーワードを含む
検索して欲しいキーワードは、そのページのtitleタグに含まれることが理想です。 コンテンツ内のキーワードも大切ですが、ページのタイトルにキーワードが含まれている場合、そちらも検索エンジンは評価していると感じています。
1.2 狙いたいキーワード自体が分割型名称キーワードの場合は、「」(カッコ)等の記号で囲む。
「分割型名称キーワード」とは、【名称の中にスペースが含まれているもの】です。 例えば、【Working Copy】 というスペースが入った名称の製品の場合、 検索する際には2つのキーワードとして検索されます。
名称の中にスペースが一つ入っていて も1つの単語してわかりやすいように、 記号で囲む。
特にトレンドブログ系だと有効なことだと考えています。
1.3 キーワードの接続詞に注意する
これも前項と通ずることがあるのですが、キーワードを明確に識別してもらうためのことです。 `SEO 注意事項 という単語で上位に表示してもらいたい時に、【SEO注意事項】 よりも【SEOの注意事項】というように接続詞によって単語を分けて表現します。
2. meta description
<meta name="description" content=""> で表記するこのタグは、検索エンジンに簡潔にページの内容を紹介するために利用します。 ページ内容を端的にまとめ、記述します。この際必ずしも正しい文章である必要はなく、ユーザーにとって有益な情報が端的にまとまっていることが重要です。
3. 見出しタグの設定
HTML5の仕様が策定された今でも、見出しタグについては適切な設定が望ましいです。
https://www.suzukikenichi.com/blog/currently-correct-usage-of-h-tags/
これは、セクショニング・コンテンツでHTML5の仕様に沿っているから大丈夫だ、という問題ではありません。 SEOの順位に関係する可能性 を少しでも抑えるための手段です。
3.1 h1 タグの設定
基本的にh1タグは各ページに一つとします。 また、伝達キーワードを含むことを推奨します。できれば、ページタイトルと同じことが望ましいでしょう。
3.2 それ以下のタグの設定
h1 以外の見出しタグについては、構成を守るようにつけましょう。 具体的には、HTML 5 Outliner等のツールを利用し、見出しによるアウトラインが保てているかを確認しましょう。
4. 各タグに対する属性の指定
img の alt 属性は必ず設定するようにします。
w3cのバリデータ等を活用すると、見つけやすいです。
https://validator.w3.org/unicorn
5. 構造化マークアップ
構造化マークアップは検索順位には関係はありませんが、検索結果において少しでもユーザーの目に止まるようにはしたいものです。
パンくずを筆頭に、制作するコンテンツに対して使える構造化マークアップがないか考えるようにしましょう。
HTMLマークアップでできることをやっていこう
ここまで述べたことは、あくまでもHTMLマークアップという範囲での意見です。
これも気をつけるべきだ！とか、これは違う！といったご意見がありましたら、ishiharaアットマークgrow-group.jp までご意見いただけますと幸いです。
以上、イシハラでした。
