【HTML】を知る - 勉強方法とSEOに効果的な構造
ブログやメディアを運営していく上で非プログラマーの方でもHTMLを書く機会があると思います。
今回は以下のような方達に是非読んでもらいたいです。
HTMLとは
HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）は、ハイパーテキストを記述するためのマークアップ言語の1つ。略してHTML（エイチティーエムエル）と呼ばれることが多い。
引用： HyperText Markup Language - Wikipedia
平たく言うとWeb上に表示させる文章に意味をつけてホームページなどに表示したい情報の形を作るための言語です。
ブログを書いていて、
<h1>見出し</h1>
とか
<p>あああ</p>
とか
<br>
をみたこと、使ったがある人も多いのではないでしょうか。
Webページの表示には全てこのHTMLが使用されています。
また、すでに公開されているページもブラウザからどのようなHTMLなのか確認することができます。
試しに以下手順で確認してみましょう。
ブラウザ上で右クリック
※私はGoogle Chromeを利用しています。ブラウザによって若干異なります
ページのソースを表示
HTMLの勉強方法
HTMLの基本文法を勉強するといっても目指すところによって学習のポイントも変わります。
ですが、学習したい人は基本的に以下のどちらかなのでそれに合わせて勉強してみてください。
| どんなことに使うか | どこまでを勉強する |
|---|---|
| ブログがかければ良い人 | HTML5リファレンス の中からセクション、コンテンツの分類、テーブル、コンテンツの埋め込み あたりはよく使うので覚えておきましょう。 |
| 将来的にWebサイトが作りたい人 | HTML5リファレンス の全てにプラスして、CSSという言語も合わせて覚える |
CSSという言語は、HP上のデザインを作る言語です。
こちらは別の記事で紹介していきたいと思います。
ブログだけ書きたい人は要件に合わせて検索すれば全然問題ありません。
将来Webサイトが作りたい人は、上記をいきなり暗記して使うのは大変困難です。
基本的にはみんな作りながら覚えていくので、まずは実践あるのみです。
おすすめの勉強方法
実際の勉強の進め方は、Webサイトを作りながら勉強するのが良いです。
・学習サイトを使う
私のおすすめは鉄板でドットインストールです。
ドットインストール - 3分動画でマスターできるプログラミング学習サービス
・HTML&CSS系の本を購入する
SEOに有効な構造
HTMLとCSSを使ってHPを作っても、検索に引っ掛けてみてもらわらければ意味がありません。
その場合、広告的アプローチではなく、技術的アプローチとしてSEOに効果的なHTMLを構成すると良いと言うことを意識しておくと良いでしょう。
SEOとは、「検索エンジンからサイトに訪れる人を増やすこと」です。
検索エンジンはサイトの構造評価し、検索の順位を決定します。
Yahooも中身の検索エンジンはGoogleを使っているため基本的には同じ考え方です。
そのため評価されやすい、HTMLを作ることが重要になるのです。
SEOに効果的なHTMLタグを紹介します。
メタ
<meta name="keyword">,<meta name="description">
この辺は鉄板で入れるべき情報です。
入れすぎると逆効果なので適切な量を守ることが大事です。
タイトル
<title>
記事のタイトルとして検索エンジンが認識します。
ドメイン内の他のページと重複しないタイトルを記述するようにします。
32文字以内が効果的と言われています。
見出し
<h1>,<h2>
この見出しタグをちゃんとつけてあげることが重要です。
こちらは順番が決まっているのでちゃんと入れること、
内容の要点が適切な量、ワードになっているかが大事です。
リンク
<a>
記事の中に記事を紹介することで、サイト内の回遊率があがります。
画像属性
<img alt="画像の説明">
検索エンジンは画像そのものがなんであるかを理解しないので、説明をつけてあげることでなんの画像であるかを判断してくれます。
そのためちゃんと設定しましょう
リスト
<li>
箇条書きはそのリストが人まとまりの内容であると言うことを認識してもらえるため効果的です。
また、ユーザーから見てもわかりやすい情報になるでしょう。
URLの正規化
<link rel="canonical">
ページが複製でないということを宣言します。
同じようなコンテンツが同一ドメイン内に複数ページあると検索エンジンはコンテンツをコピーしていると判断し、検索でペナルティをくらうことがあります。
ですが似たような構造になるケースもあるのでそのような場合は、優先的な記事を決めてコンテンツが１つであると判断させることができます。
強調
<strong>,<b>
サイト内で強調したい部分に使用するタグです。 検索エンジンに対しても、重要度を理解させるタグとして認識されるようです。
まとめ
勉強方法と、SEOに効果的なタグについて紹介しました。
HTMLだけでも学習のボリュームがあるように思いますが、Webサイトを作り出してコピペを繰り返していけば
自然と覚えられます。まずは始めてみましょう。
また、SEOを意識するタグに関しては自身のホームページがあれば、見直してみてみると良いと思います。
