サイトの記事は閲覧しているユーザーに読みやすく作るのはもちろんですが、検索エンジンにも読みやすく作るのが鉄則です。ユーザーに対する読みやすさはライティングをしている本人が確認しながら出来ますが、検索エンジンに対して読みやすい記事はHTMLタグの使い方によって変わります。
『ユーザーにも検索エンジンにも読みやすい記事の作り方』は２回に分けて、１回目はWordPressにディフォルトで使えるいろんなHTMLタグについて説明します。
２回目はオリジナルで作るHTMLタグ用のCSSファイルについて説明します。
投稿画面にこれらのHTMLタグを使う為のボタンがありますが、意外と使っていないこともあります。オリジナルのCSSファイルを使っている私もほとんど使っていませんでした。
そこで、バージョン4.7.3–jaで用意されているHTMLの使い方をまとめました。
投稿画面に用意されているHTMLタグの使い方
バージョン4.7.3–jaの投稿画面の画像です。「テキスト」タブで表示します。
- ［b］は文字を太くして検索エンジンに対して「強調したい言葉」を示すタグ
- 強調したい文字をドラッグして［b］ボタンを押すと、<strong>強調したい文字</strong>がstrongタグで囲まれて、強調したい文字となります。
人の目にも検索エンジンにも強調したい言葉としてアピールできます。 - ［i］は強調したい文字を指定します
- 文字を強調する「em」タグが入力されます。
見た目には分かりませんので検索エンジンに対してのタグです。「strong」よりは強調具合が弱いです。 - ［link］はリンクを作るタグ
- リンクするアンカーテキストをドラッグして［link］ボタンを押すと<a href=””></a>とaタグで囲まれて、リンクURL、リンクタイトル、別窓か同一ウィンドウかの選択をしてリンクを作ります。
- ［b-quote］は他のサイトからの引用文を示します
- 他のサイトに掲載されていた文章を「引用」する場合には、このタグを使って本文と引用文を明確に区別します。
著作権法上の「引用」のルールに定められいますので、このタグを使います。
使い方は引用文全体をドラッグして［b-quote］ボタンを押すと<blockquote>引用文</blockquote>となります。
引用文でもないのに、他の部分と区別する為に「blockquote」タグを使っているケースを時々見かけますが、「blockquote」タグで囲まれた部分の文章量が多くなると、検索エンジンの評価が下がる可能性がありますので要注意です。ここが引用文です
- ［del］は記述した文章を削除する意味です
- 削除する文章を記載したままにしておく方が、全体の文章の流れがつかめて理解しやすいことがあります。その為、削除する文章を「del」タグで表示します。
使い方は上の［b-quote］と同じようにドラッグして使います。 - ［ins］は文章を追加して記述する意味です
- 以前にアップした記事に追記する場合に使います。更新した部分がはっきり分かるので、リピーターの読者には有難いタグです。
- ［img］は画像を貼りつけるタグ
- 画像を挿入する時に使うタグです。［img］ボタンを押すと画像のURLを入力するダイアログボックスが表示されます。画像がサーバー上に無い場合や、URLが不明な時は「メディアを追加」で画像をアップロードして下さい。
- ［ul］は文章を箇条書きにするタグ
- 箇条書きの文章を作る時は「ul」タグや「ol」タグを使います。
<ul>
<li>ここに１番目の文章</li>
<li>ここに２番目の文章</li>
<li>ここに３番目の文章</li>
</ul>
このように使うのですが、［ul］ボタンを１回押すと<ul>が、もう１回押すと</ul>が入力されます。
実際の表示は以下です。
- ここに１番目の文章
- ここに２番目の文章
- ここに３番目の文章
- ［ol］は文章をナンバー付きの箇条書きタグ
- 番号を付けた箇条書きタグです。「ul」と同様にすると
<ol>
<li>ここに１番目の文章</li>
<li>ここに２番目の文章</li>
<li>ここに３番目の文章</li>
</ol>
となり、実際の表示は次のようになります。
- ここに１番目の文章
- ここに２番目の文章
- ここに３番目の文章
- ［li］はリスト表示する項目を表します
- 「ul」や「ol」の要素となる「li」タグを作ります。
ひとつずつの文章をドラッグして［li］ボタンを押すと<li>ここに文章</li>となりますし、［li］を押して文章を記述してもう一度［li］を押すと</li>で閉じることができます。 - ［code］はプログラムのソースコードを意味します
- 記事の中でソースコードを記述する時にこのタグを使います。
本文中で使っているhtmlタグと区別できるので便利です。
ただし「<」や「>」は反映されないようです。 - ［more］は「もっと読む」とか「つづきを読む」の時に使います
- 投稿ページの冒頭部分を表示させて、「つづきを読む」リンクで記事ページにジャンプさせるタグですが、最近は一覧ページがディフォルトで「つづきを読む」になっていますので、あまり使うことはないと思います。
- ［タグを閉じる］はhtmlの閉じタグです
- 文章をドラッグしてタグボタンを押さずに、あるタグの開始タグを入力して後で閉じタグを入力する時に使います。
<hoge>を入力して文章を記述してから</hoge>で閉じる・・・こんな使い方です。（こんな表現で理解できたでしょうか？） - ［太字］は文字を太くするタグ
- 文字を太くする<bold>タグを作ります。
太くしたい部分をドラッグして［太字］ボタンを押します。 - ［赤字］は文字を赤色にするタグ
- 文字を赤くするタグを作ります。
赤くしたい部分をドラッグして［赤字］ボタンを押すと、<span class=”red”>タグが入力されますので、ディフォルトのCSSでred: #ff0000;が指定されていると思います。 - ［太い赤字］は太く赤い文字にするタグ
- 「bold」と「red」を合せた指定をするタグです。
使い方はこれまでと同じ、赤く太くしたい部分をドラッグします。 - ［赤アンダーライン］は文字に赤いアンダーラインを引きます
- ボタンの名前の通りに赤いアンダーラインが引けます。
- ［黄色マーカー］は文字に黄色の蛍光ペンを塗ったようにします
- これもボタンの名前のとおり黄色の蛍光ペンになります。
- ［黄色アンダーラインマーカー］はアンダーラインを黄色のマーカーで塗ったようにします
- これも同じように黄色のマーカーでアンダーラインを引いたように見せます。
- ［打消し線］は文字を訂正する意味です
- ［del］と同じく一本線の打ち消し線を引きます。短い文節や単語などの訂正に使います。
- ［バッジ］はバッジのようなボタン表示するタグ
- 広告とかPRとかNEWなど、目を引かせたいポイントに使います。
- ［キーボード］はキーボードのキーのようなボタンタグ
- キーボードのキーを説明する時に使うと便利です。
ctrlとか - ［補足説明(i)］「注意」レベルの補足説明文を記述します
-
効果的に使うとメリハリのある記事になります
- ［補足説明(?)］「はてな？」レベルの補足説明文を記述します
-
こんなタグが用意されているとは
- ［補足説明(!)］「ビックリ！」レベルの補足説明文を記述します
-
はっきり言ってビックリでした
- ［primary］［success］［info］［warning］［danger］
- 文章を目立たせたい時に使います。背景色が違います。
［primary］はこんな背景色［success］はこんな背景色［info］はこんな背景色［warning］はこんな背景色［danger］はこんな背景色
箇条書きとリスト表示の注意点
箇条書きについては、わざわざ「ul」とか「ol」といった、リストタグがあります。
リストタグを使わなくても「改行」を繰り返すと見た目は箇条書きになります。
ところが「改行」を使った箇条書きを、検索エンジンは箇条書きと認識しません。その為、「改行」で箇条書きをしてしまうとおかしな日本語になります。
- 文字を太くするタグ
- 文字を斜めにするタグ
- 文字を赤くするタグ
箇条書きをリスト表示しています。
<li>タグがあるので検索エンジンは箇条書きと認識します。
ところが改行で上のような表示にしようとすると、下のようになります。
・文字を斜めにするタグ
・文字を赤くするタグ
改行はタグとしては<br />ですが、検索エンジンは改行を無視して一連の文章と見做します。
上の箇条書きは
・文字を太くするタグ・文字を斜めにするタグ・文字を赤くするタグ
こんな一連の文章になります。
「・」を取り除くと
文字を太くするタグ文字を斜めにするタグ文字を赤くするタグ
こんな文章として認識されるわけです。
検索エンジンにとっては『何を書いているのかわかんない！』ことになってしまうので、箇条書きはきちんとリストタグを使わなければならないことになっています。
まとめ
こうして書いてきて気がついたのは“使えそうなタグが意外とある”ってことでした。
だけど「補足説明」とか「primary」だとか、使う人が多くなると似たようなサイトが増えるので、どうかなとも思います。
コメント