オウンドメディアで記事を執筆する際に、ある法則に従って作業を行うことでSEOの効果も期待できます。その法則がHTMLによるマークアップ作業です。そこで今回はHTMLの基本的な知識を身につけることで、検索エンジンにもやさしいページに仕上げる方法をご紹介します。
- SEO対策とは？
- SEO（Search Engine Optimization）の略で、「検索エンジン最適化」という意味です。
GoogleやYahooなどの検索エンジン（検索サイト）で、ユーザーが入力した検索キーワードで上位に表示されるための対策のことです。
つまり、検索エンジン（検索サイト）に理解されやすいページを作成するためには、HTMLによる文章の意味づけが重要となるのです。
- HTMLとは？
- HTML（HyperText Markup Language）の略で、Webページを作成するために開発された文書の構造を示すための言語のこと。 インターネット上で公開されてるWebページのほとんどは、HTMLで作成されています。
基本的なHTMLタグ
|
<title> |
タイトル |
|
<h1> ～ <h6> |
見出し |
|
<p> |
段落 |
|
<br> |
改行 |
|
<ul>・<ol> |
箇条書き |
|
<a> |
リンク |
|
<img> |
画像表示 |
|
<strong> |
強調文字 |
|
<blockquote> |
引用 |
|
<table> |
表組み |
タイトルをつける｜<title>
<title>タグを使って文書にタイトルをつけます。1ページに1つとなります。
ここで指定したタイトルはブラウザのツールバーに表示されます。
検索エンジンの検索結果に表示されるので、ユーザーの興味をひくタイトルを30文字以内で表現しましょう。
見出しを表現する｜<h>
見出しとは、記事の内容が一目でわかるようにつけた標題のこと。
<h>タグは、文章の見出しを表現するときに使用します。
見出しのレベルによって数字が変わります。
<h1>タグはページで一番重要な大見出しに使用します。１ページに１つとなります。
<h2>タグはページの中見出しに使用します。
<h3>タグはページの子見出しに使用します。
段落を表現する｜<p>
段落とは、文章において見やすくまとめられた文の塊（ブロック）のこと。
<p>タグは、段落を表現するときに使用します。
箇条書きで表現する｜<ul>
<ul>タグはUnordered Listの略で、順序のないリストを表示する際に使用します。
■使用例
HTMLソース
<h3>目次</h3>
<ul>
<li>ごあいさつ</li>
<li>説明</li>
<li>まとめ</li>
</ul>
■実際の表示
目次
- ごあいさつ
- 説明
- まとめ
箇条書きで表現する｜<ol>
<ol>タグはOrdered Listの略で、順序のあるリストを表示する際に使用します。
■使用例
HTMLソース
<h3>HTMLタグの優先順位</h3>
<ol>
<li>タイトル</li>
<li>見出し</li>
<li>段落</li>
</ol>
■実際の表示
HTMLタグの優先順位
- タイトル
- 見出し
- 段落
改行する場合｜<br>
改行とは、文章を進め（整え）るために、そこで行を変える（＝改）こと。
<br>タグは、文章を改行するときに使用します。
リンクを貼る場合｜<a>
WebページとWebページをつなぐことをハイパーリンクと言い、<a>タグを用いてハイパーリンクを指定します。
画像を表示する場合｜<img>
画像を表示させる場合は<img>タグを使います。必須属性のsrc属性で画像ファイルのURLを指定します。
文字を強調する場合｜<strong>
文字を強調させる場合は<strong>タグを使います。強調した箇所は通常より少し太字に表現されます。
文章を引用・転載する場合｜<blockquote>
長文を引用・転載する場合は<blockquote>タグを使用します。
改行しない程度の短文である場合は<q>タグを使用します。
表組みを表現する場合｜<table>
表を作成する場合は<table>タグを使用します。
- 表の横一行を定義するのは<tr>タグ
- 各セルの見出しを定義するのは<th>タグ
- 各データを定義するのは<td>タグ
■使用例
HTMLソース
<table>
<tr>
<th>見出しを定義する</th>
<th>見出しを定義する</th>
<th>見出しを定義する</th>
</tr>
<tr>
<td>内容を定義する</td>
<td>内容を定義する</td>
<td>内容を定義する</td>
</tr>
</table>
■実際の表示
| 見出しを定義する | 見出しを定義する | 見出しを定義する |
|---|---|---|
| 内容を定義する | 内容を定義する | 内容を定義する |
まとめ
SEO対策のために最低限覚えておきたいHTMLの基本についてご紹介しました。
CMS（コンテンツ管理システム）を利用している場合は、タグが表示されたボタンを選択するだけで自動でタグづけができるため、ここではあえてHTMLの記述方法までは解説しませんが、各HTMLタグの意味を理解することで、今後はSEOに強いページ構成で記事を執筆することができるでしょう。
