【図解】ワードプレスの表(テーブル)|2つの重要な設定とは?

【図解】ワードプレスで表(テーブル)をSEO最適化にする2つの設定

この記事のまとめ

ブログにおいて表(テーブル)は情報を整理してまとめる重要な役割を持っています

特別なプラグインがなくても簡単に作れる一方、ワードプレスで作った表のSEOを最適化するためには2つの設定が必要です

そこで、ブログ初心者が見落としがちな2つの設定について図を使ってわかりやすく解説します

ナラ

ワードプレスでテーブルを作るとき、セルにテキストを入力しただけで終わっていませんか?

もしテーブルの中身の設定を意識したことがないとしたら、注意が必要です。

ココ

テーブルを構成するHTMLは3つの役割に分けることが出来るよ

多くの人が簡単に出来る設定すらしていないのはもったいないわね

ナラ

ずばり、ワードプレスブログで作ったテーブルのSEO最適化に必要な設定は以下の2つです。

  1. テーブルの見出し<th>タグ設定
  2. テーブルのキャプション<caption>タグ設定

この2つを設定したことが無い場合は、これを機にいままで作ったテーブルを見直してみましょう。

※タップして気になるところまでジャンプする

ワードプレスの表(テーブル)の作り方

ワードプレスの表テーブルの作り方

ワードプレスでテーブルを作るのに特別なプラグインは不要です。

ココ

プラグインって入れすぎるとブログが重くなってスピードが遅くなる原因にもなるよ

情報をまとめるだけならワードプレスの標準のテーブルがあれば十分よ

ナラ

多くのワードプレスブログ初心者が最初に入れるプラグインの1つにTinyMCE Advancedを選んでいるかと思います。

TinyMCE Advancedはビジュアルエディタの編集機能を拡張することができる便利なプラグインです。

 

▼コチラの記事で詳しく解説されています

 

ワードプレスの表(テーブル)エディタ

ワードプレスでテーブルを作るならこのTinyMCE Advancedにデフォルトとして備わっているテーブル機能がオススメです。

この機能があればクリックひとつで簡単にテーブルを作ることができます。

【図解】ワードプレスのテーブルを構成するHTML

【図解】ワードプレスの表テーブルを構成するHTML

ワードプレスで作ったテーブルがどのようなHTMLで構成されているのか?

これを理解することがテーブルのSEOを最適化する最初の1歩です。

ココ

ブログ初心者(自分も…)にはHTMLが苦手っていう人も少なからずいるんじゃないかな

テーブルを構成するHTMLは3種類だけ覚えればいいから全然難しくないわよ

ナラ

▼その3種類とはコチラ

ワードプレスブログの表(テーブル)

【図解】ワードプレスの表(テーブル)

図解で示すとテーブルの構成はキャプション<caption>、見出しのセル<th>、中身のセル<td>の3つに分かれます。

それぞれのHTMLコードの特徴は以下の通りです。

表のHTML
要素 HTMLタブ 特徴
キャプション <caption>タブ 何についての情報がまとめられているか?といった「テーブルのタイトル」をあらわす
見出し <th>タブ 後に続くセルの中身を分類する「列のカテゴリー」をあらわす
表の中身 <td>タブ 各カテゴリーに沿った「テーブルの中身」をあらわす

キャプションや見出しが設定されていると情報が整理されて見やすいテーブルになります。

▼次の関連記事にブロガーが最低限知っておくべきHTML・CSSの知識をまとめました

【HTML・CSS】ブログ初心者が最低限知っておくべき5つの基本とは?【HTML・CSS】ブログ初心者が最低限知っておくべき5つの基本とは?

表(テーブル)のキャプションと見出しが重要な理由

表テーブルのキャプションと見出しが重要な理由

中身のセル<td>の記述だけでもテーブルの見た目は成立します。

では、なぜキャプション<caption>や見出し<th>が重要なのでしょうか?

ココ

色を変えたり太字を使ったりすれば見やすい表を作れるんじゃないの?

キャプションや見出しを設定しないと、検索エンジンテーブルの中身をうまく認識できない可能性があるのよ

ナラ

読者からの見た目を整えるだけではSEO対策にはなりません。

表のキャプションと見出しを設定する目的は検索エンジンに情報を正しく認識させることです。

SEO最適化には、読者からの見た目と同じくらい検索エンジンからの見た目も重要なのです。

ワードプレスで作ったテーブルのキャプションと見出しの設定方法

ワードプレスで作った表テーブルのキャプションと見出しの設定方法

ワードプレスでテーブルのキャプションや見出しを設定する方法は大きく2つあります。

  1. TinyMCE Advancedのビジュアルエディタ機能を使って設定する
  2. テキストエディタに手入力でコードを設定する

どちらもやり方はとっても簡単です。

それぞれ詳しく解説します。

TinyMCE Advancedのビジュアルエディタ機能を使って設定する方法

先ずはTinyMCE Advancedのビジュアルエディタ機能を使って設定する方法です。

この方法であればコードを自分で入力する必要も無く、クリックだけで簡単にテーブルのキャプション、見出しを設定することが出来ます。

▼先ずはキャプションの設定から

ワードプレスの表(テーブル)エディタ

手順1:表のアイコンをクリックする

ワードプレスで表のキャプションを設定する方法1

手順2:表のプロパティを選択する

ワードプレスで表のキャプションを設定する方法2

手順3:キャプションにチェックマークを入れる

ワードプレスで表のキャプションを設定する方法3

手順4:表のキャプション部分にテキストを入力する

上の4つの手順で簡単にキャプションが設定できました。

▼続いて見出しの設定です

ワードプレスで表の見出しを設定する方法1

手順1:表の見出し部分のセルを選択する

ワードプレスで表の見出しを設定する方法2

手順2:セルのプロパティを選択する

ワードプレスで表の見出しを設定する方法3

手順3:セルの種類をヘッダーセルに設定する

これでテーブルのキャプションと見出しの設定が完了しました。

テキストエディタに手入力でコードを設定する方法

TinyMCE Advancedのプラグインをインストールしていなくても、ワードプレスブログならテキストエディタから手入力で簡単にテーブルのキャプション、見出しを設定することが出来ます。

まず、キャプション・見出しの設定がある場合と無い場合のHTMLテキストの違いを見比べて見ましょう。


※キャプション・見出しの設定が無い場合のHTMLコード

見出し1 見出し2 見出し3
中身1 中身2 中身3
コード(設定無し)
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 33.3333%;">見出し1</td>
<td style="width: 33.3333%;">見出し2</td>
<td style="width: 33.3333%;">見出し3</td>
</tr>
<tr>
<td style="width: 33.3333%;">中身1</td>
<td style="width: 33.3333%;">中身2</td>
<td style="width: 33.3333%;">中身3</td>
</tr>
</tbody>
</table>

※キャプション・見出しの設定が有る場合のHTMLコード

キャプション
見出し1 見出し2 見出し3
中身1 中身2 中身3
コード(設定有り)
<table style="width: 100%; border-collapse: collapse;">
<caption>キャプション</caption>
<tbody>
<tr>
<th style="width: 33.3333%;">見出し1</th>
<th style="width: 33.3333%;">見出し2</th>
<th style="width: 33.3333%;">見出し3</th>
</tr>
<tr>
<td style="width: 33.3333%;">中身1</td>
<td style="width: 33.3333%;">中身2</td>
<td style="width: 33.3333%;">中身3</td>
</tr>
</tbody>
</table>

赤字でハイライトした部分が設定無しの場合と設定有りの場合の違いです。

テーブルのキャプション、見出しをワードプレスのテキストエディタで設定する場合には以下のコードを追加しましょう。

  • <table>タグの中に<caption>タグを追加する
  • 見出し部分のタグは<td>タグではなく<th>タグに書き換える

ワードプレスで表(テーブル)の設定まとめ

ワードプレスで表(テーブル)の設定まとめ

キャプションや見出しの設定をきちんとすることで、読者にとっても検索エンジンにとっても見やすいテーブルを作ることができます。

ココ

こんなに簡単な設定を今までやってこなかったなんてもったいない!

テーブルの見やすさだけでなく、SEO対策になることもポイントね

ナラ

ワードプレスブログのテーブルでキャプション・見出しを設定することはSEO対策としても重要です。

また、その他にもHTML・CSSの基本を覚えるとSEO対策のヒントがたくさん見つかります。

記事をたくさん書いているのになかなか検索順位が上がらない…

そう悩んでいる人はぜひ、次の関連記事も参考にしてみてください。

▼ブロガーが最低限知っておくべきHTML・CSSの知識をまとめた記事はコチラ

【HTML・CSS】ブログ初心者が最低限知っておくべき5つの基本とは?【HTML・CSS】ブログ初心者が最低限知っておくべき5つの基本とは?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA