MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
もう一度考えてみる、HTMLのマークアップとSEO対策についての考察

もう一度考えてみる、HTMLのマークアップとSEO対策についての考察

公開日:2016年12月15日
最終更新日:2019年05月28日
オンスタ運営
マークアップ
ホーム > 全記事一覧 > 制作 > エンジニア > マークアップ > もう一度考えてみる、HTMLのマークアップとSEO対策についての考察
このエントリーをはてなブックマークに追加
もう一度考えてみる、HTMLのマークアップとSEO対策についての考察

こんにちは、石原です。

今日は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 までご意見いただけますと幸いです。

 

 

以上、イシハラでした。

関連コンテンツ

オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2019年09月05日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
HTMLって何?Web初心者でも理解できるように簡単に解説!
エンジニア
マークアップ
公開日: 2019年06月13日
最終更新日: 2019年06月19日
HTMLって何?Web初心者でも理解できるように簡単に解説!
  • # HTML
  • # pickup
  • # 初心者
オンスタ運営
WEB用に使われる画像形式の基礎と特徴
Webデザイン
マークアップ
公開日: 2019年04月19日
最終更新日: 2019年06月15日
WEB用に使われる画像形式の基礎と特徴
オンスタ運営
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
プログラミング
マークアップ
公開日: 2018年12月28日
最終更新日: 2019年05月28日
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
オンスタ運営
一歩踏み込んだマークダウン(Markdown)の紹介とマークダウン記法を学ぶ
マークアップ
公開日: 2019年10月08日
最終更新日: 2019年10月08日
一歩踏み込んだマークダウン(Markdown)の紹介とマークダウン記法を学ぶ
  • # markdown
  • # マークダウン
  • # 効率化
オンスタ運営
コーダーはCSS設計に夢を見る
エンジニア
マークアップ
公開日: 2017年02月10日
最終更新日: 2019年05月28日
コーダーはCSS設計に夢を見る
オンスタ運営
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
エンジニア
マークアップ
公開日: 2017年01月10日
最終更新日: 2019年06月26日
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
オンスタ運営
【CSS】CSSレイアウト組まとめ(前編)
マークアップ
公開日: 2018年09月08日
最終更新日: 2019年05月28日
【CSS】CSSレイアウト組まとめ(前編)
オンスタ運営
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2019年03月30日
最終更新日: 2019年09月02日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。