記事を装飾するだけでない、使い分けで役に立つHTMLタグ

2017.09.11|サイト構築

記事を編集する際に、装飾するだけでなく、文言に意味を持たせ、SEO対策にもなりうるHTMLタグたちをご紹介します。

以前書いたトピックで

記事を作成する際、意外と使われていないHTMLタグたち

記事を作成する際、意外と使われていないHTMLタグたち

というのを書いたんですが、それを読んでいても読んでいなくても問題ありませんが、続きのような記事です。

 

テキストに関連するHTMLタグはたくさんある

テキストに関連するタグはたくさんあります。

とりあえず一覧表にしてみますね。

 

リンク

<a href=””> リンクを設定する
<a href=”” target=””> リンクを開くときのウインドウを指定する
<a href=”” download=””> ダウンロードリンクを設定する
<a href=”#”> ページ内のリンクを設定する
<a href=”mailto:”> クリックでメーラーを起動させるリンクの設定
<a> プレースホルダを表す
<a href=”tel:”> クリックで電話発信するリンクを設定する

 

強調・引用・略語など

<em> 強調
<strong> 重要性
<small> 小さい文字で注釈
<s> すでに正確でない
<cite> 作品のタイトル・著作名・URL
<q> 引用フレーズ
<q cite=””> 引用元のURL
<dfn> 定義される用語
<abbr> 略語・類似語

 

コンピュータ・数学的表現・日時

<code> ソースコード
<var> 変数
<samp> プログラムの出力サンプル
<kbd> ユーザーが入力する内容
(どのキーボートのキーを押すか)
EX.ctrA
<data value=””> コンピューター向けデータを指定
<sub> 下付け文字
EX.サンプルテキスト
<sup> 上付け文字
EX.サンプルテキスト
<time> 日付や時刻
<time datetime=””> 日付や時刻を属性値で指定

 

他との区別

<i> 他と区別されるテキスト(思考・専門用語など)
<b> 他と区別されるテキスト(キーワード・製品名など)
<u> 軽めのラベル付け
<mark> ハイライト表示

 

ルビ

<ruby> ルビ(ふりがな)をふる

EX.
<rtc>
<rt>ルビ テキスト</rt>
<rb>ルビ対象のテキスト</rb>
<rtc>

ルビ対象のテキストルビ テキスト

<rb> ルビの対象テキストを指定
<rt> ルビのテキストを指定
<rtc> ルビのコンテナ
<rp> ルビを括弧で囲む

 

書字方向

<bdi> 隔離されたテキスト
<bdo dir=””> 書字方向を指定

 

範囲・改行

<span> 特定の範囲をグループ化
<br> 改行
<wbr> 改行位置の候補

 

訂正

<ins> 追加された部分
<ins cite=”” datetime=””> 追加された部分の情報
<del> 削除された部分
<del cite=”” datetime=””> 削除された部分の情報

 

とまあ、こんな感じで、細かく指定して設定していくことができます。

こちらを設定すると、設定したタグにCSSでスタイルを指定しておけば、
よりみやすくわかりやすい記事にすることができるだけでなく、
内容に関して、読者(人間)でなく、クローラーなどのコンピューターにとっても、
わかりやすく理解しやすい記事になります。
だからこそ、SEO対策に役立つのです。

 

HTMLタグを使い分けることで、記事の文書構造をきちんと整理できる

前回の記事では文書構造をきちんとしてください。

とかなんとか偉そうにお願いしていましたが…

文書構造ってほんとうに大事なんです。

SEO対策は、ページにキーワード設定をしたり、デスクリプションを設定したり、
サイト内でできる項目は多々あるんですが、
それでも、やはりページ内で設定している文書構造が綺麗であればあるほど有利になると思います。

見出し一つでもレベルは1〜7までありますが、
どういうように見出しレベルを分けていくのか、段落を分けていくのか、
セクションをどう区切るか、記事の指定はどうするか。
ホームページ作成の際に大事なことだと思います。

でもまあ、それらは、ホームページ作成ツールや我々プロのWeb作成に関わるものがなんとかできるのですが、
記事を更新するとなると自社のスタッフで…
ということは多いと思います。

我々プロがわからないところでも、きっちりとやっていただけるに越したことはないのです。

通常、私たちが作るページより、ブログ記事はじめ色々な記事はページ数がどんどん増えると思います。

その増えていくページこそ、文書構造をしっかりしてもらい、
SEO対策につなげていければなお良いな、と思います。