ブログBLOG

【WordPress】それで完成？検証で必ずチェックすべき表示崩れとSEO周りの重要ポイント６選！

更新日：2021/03/24

【WordPress】それで完成？検証で必ずチェックすべき表示崩れとSEO周りの重要ポイント６選！

WordPress構築が終わり、いよいよ検証フェーズに入ったとき、どの点に注意して検証すれば良いのでしょうか

特に初心者のうちはなかなかわかりにくいですよね

なんとなくやってしまっているかたもきっと多いのではないでしょうか

検証したつもりでも、意外に抜け漏れが多くリリース間際になってあたふたしてしまうこともあるかと思います

せっかく余裕をもって終わらせたつもりでもそのようなことになったら嫌ですよね^^;

ということでこの記事では、意外に見落としがちだが、とても重要なWordPress検証時のチェックポイントを図解を交えて紹介していきたいと思います

初心者の方にもできるだけわかりやすく解説しますので最後までお付き合いください

1 コンテンツ編
2 SEO編
- 2.1 下層ページでh1タグが１つか
- 2.2 アーカイブページでメタタグがしっかりと出力されているか
3 固定ページのdescriptionタグの中身が最適化されているか
4 おわりに

コンテンツ編

まずはコンテンツ編からです

カード型レイアウト

よくあるカード型のレイアウトですが実はチェックすべきポイントが山ほどあります

カード型レイアウトとは以下のようなレイアウトを指しています

よくあるカード型レイアウト１
よくあるカード型レイアウト２

「よくあるカード型レイアウト１」の場合、以下のチェック項目が挙げられます

記事数が増減しても崩れないか
文字数が長いときを考慮できているか
どんな画像のサイズが来ても比率を保って表示されるか

「よくあるカード型レイアウト２」の場合、以下のチェック項目が挙げられます

文字数が多くなっても画像エリアがつぶれないか

順々に見ていきましょう

記事数が増減しても崩れないか（よくあるカード型レイアウト１)

よくあるカード型レイアウト１では、以下のような崩れが起きることがあります
記事数が増減しても崩れないか（よくあるカード型レイアウト１)

このようになってしまう原因は、コーディング時にFlexboxのjusify-content:space-betweenを使用しているからです

これ以外にも、justify-content: space-aroundを使用した際も崩れます

これらについての具体的なコーディング方法については以下の記事で詳細に解説しています
https://b-risk.jp/blog/2020/02/mid-career/
記事数が増減しても崩れないか(よくあるカード型レイアウト１)

文字数が長いときを考慮できているか（よくあるカード型レイアウト１)

Flexboxではalign-itemsの初期値がnormalなのですが、align-items:stretchと同じ動作をします

そのため、カード型アイテムの中の、どれか一つの縦方向長さが伸びると、他のアイテムもそれに連動して伸びてしまいます

これを回避するためにはalign-items:flex-startにしておけばOKです

また、何行まで許容するかもプログラム側で制御しておくとよいでしょう

文字数が長いときを考慮できているか（よくあるカード型レイアウト１)
文字数が長いときを考慮できているか(よくあるカード型レイアウト１)

どんな画像のサイズが来ても比率を保って表示されるか（よくあるカード型レイアウト１)

ブログのサムネイル画像についてですが、推奨サイズをなかなか用意できず、とりあえずある画像をサムネイル画像に設定したい場合が多くあります

なので、どんなサイズの画像が設定されていても比率を保った状態で良い感じに見えるようにしておく必要があります

そのために最も簡単な方法は、object-fitを使うことです

詳しい使い方は以下の記事に詳しく書かれています

IE11での画像のobject-fitの使用について

どんな画像のサイズが来ても比率を保って表示されるか（よくあるカード型レイアウト１)

文字数が多くなっても画像エリアがつぶれないか（よくあるカード型レイアウト２)

よくあるカード型レイアウト２では以下のような崩れが起きることがあります
文字数が多くなっても画像エリアがつぶれないか（よくあるカード型レイアウト２)

画像エリアとテキストエリアをFlexboxを使い横並べにしている場合、flex-shrinkの初期値が１であることから、画像エリアのwidthを指定していたとしてもテキストエリアの中身が増えると縮んでしまいます

これを防ぐには、画像エリアに対してflex-shrink:0を指定すればOKです

文字数が多くなっても画像エリアがつぶれないか（よくあるカード型レイアウト２)

リスト型レイアウト

続いてリスト型レイアウトでのチェックポイントです

リスト型レイアウトとは以下のようなものを指しています

よくあるリスト型レイアウト１

よくあるリスト型レイアウト２

これらのレイアウトの場合、以下のチェック項目が挙げられます

テキストが複数行になったときを考慮できているか

それぞれのレイアウトで具体的にどこをチェックすればいいのか順に見ていきましょう

テキストが複数行になったときを考慮できているか（よくあるリスト型レイアウト１）

このレイアウトの場合、Flexboxで横並べをすることが多いです

Flexboxではalign-itemsの初期値がnormalなのですが、align-items:stretchと同じ動作をしてしまいます

そのため、コンテンツ内のどれか一つの縦方向長さが伸びると他のアイテムもそれに連動して伸びてしまいます

これを回避するためにはalign-items:flex-startにしておけばOKです

テキストが複数行になったときを考慮できているか（よくあるリスト型レイアウト１）

テキストが複数行になったときを考慮できているか（よくあるリスト型レイアウト２）

このレイアウトの場合、Flexboxのalign-items:centerを使用して、リストの●とテキストの上下中央を揃えているコーディングが多いと思います

しかし、それだとテキストが複数行になった際に、●とテキストが上下中央に揃うのでデザイナーが意図したものと異なる場合があります（これでOKの場合もあるので要相談）

回避策としては、疑似要素を使いabsoluteで配置することです

align-items:flex-startを使用すればいいと思われますが、これだとスマホでみたときにうまく配置されていなかったりするので経験上、「疑似要素＋absolute」でコーディングするとよいです

テキストが複数行になったときを考慮できているか（よくあるリスト型レイアウト２）

テーブル型レイアウト

続いてテーブル型レイアウトでのチェックポイントです

テーブル型レイアウトとは以下のようなものを指しています

よくあるテーブル型レイアウト

これに対しては以下のチェック項目が挙げられます

最小幅が確保されているか

具体的に見ていきましょう

最小幅が確保されているか

テーブル型レイアウトをコーディングする際には、tableタグを使用するかと思います

tableタグを使用した場合、テーブルのセルの長さが他のセル内の文字量の増減に合わせて、良い感じに伸びたり縮んだりします

それが原因で、本当は折り返したくない文言があるセルが、他のセル内が原因で縮んでしまいデザイン通りにならないことがあります

これを回避するためには、widthを指定すればOKです

最小幅が確保されているか

これでコンテンツ編は終わりになります

こうみるとFlexbox関係がとても多いですね^^;

Flexboxはとても便利でサイト制作では必ずとっていいほど使います

便利なのですがCMSを考慮した場合、落とし穴がたくさんあるので注意して使用したいですね

また、CMS開発中にこのような崩れが起きてしまうというよりは、静的コーディグ時にあらかじめテストされていると大変素晴らしいと思います

さて続いては、SEO対策についてです

SEO編

サイトをつくるにあたって重要なことがSEO対策です。

WordPressの場合、もっともお手軽にその対策をするためにはAll in One SEO Packを使用します

詳しい設定内容はWebマーケティング業界のレジェンドであるバズ部さんの以下の記事を参考にしてください

All in One SEO Pack の設定方法と使い方
上記の記事はとても優れています

しかし、細かいところまではカバーしきれていないので、ここではそれについてご紹介します

※2020年末にAll in One SEO Packがメジャーアップデートされ、UIや機能面が大きく変わりました

UIはオシャレで見やすくなったのですが、有料の範囲が増えてしまい、ちょっと使いづらくなりました^^;

以前のバージョンを使う方法は公式サイトに行き、
ページ下部にある以下赤枠から以前のバージョンをダウンロードできます
昔のバージョンに慣れているかたはダウングレードするのもいいかと思います
All in One SEO Pack

下層ページでh1タグが１つか

１ページにh1タグは１つというのがスタンダードです（※）

※ h1は１ページに１つ
これについては、必ず１つじゃないとダメということはありません

Google のジョン・ミューラー氏は
「 h1 はページの中で好きなだけ使っていいし、あってもなくても検索には影響はない」
という趣旨の内容をウェブマスター向けの動画にて語っているからです

１ページにh1タグは１つというルールは個人、会社単位のルールに沿って決めればいいと思います

TOPページではロゴがh1タグのサイトが多いと思いますが、
下層ページでもロゴがそのままh1タグで囲まれている可能性があります

下層ページではほとんどの場合、タイトルをh1タグで囲むため、ロゴがそのままh1タグで囲まれていると下層ページにh1タグが2個あることになります

なので、下層ページのロゴのタグがh1ではなくdivタグなどになっているか確認しましょう

回避策としては、以下のコードを記述してあげればOKです

<?php $tag = is_home() ? 'h1' : 'div';?>
<<?php echo $tag;?> class="logo">
  <a href="<?php print home_url('/'); ?>/">
    <img src="<?php print get_template_directory_uri(); ?>/path/to/logo.png" alt="ロゴ">
  </a>
</<?php echo $tag;?>>

<?php $tag = is_home() ? 'h1' : 'div';?>

<<?php echo $tag;?> class="logo">

</a>

</<?php echo $tag;?>>

やっていることは単純で、TOPページ（すなわちis_home()のとき）は、$tagという変数にh1という文字列を入れ、そうではないときはdivという文字列を入れてそれをprintで出力しています

アーカイブページでメタタグがしっかりと出力されているか

All in One SEO Packはとても優秀なのですが、アーカイブページではOG系のメタタグとディスクリプションタグが出力されません

そのため、header.phpに以下を記述する必要があります

  <?php
   $template_url = get_template_directory_uri();

  //アーカイブページでは以下のメタタグが出力されないので手動で記述する
    if(!is_singular() && !is_home()) :
      $title = wp_get_document_title();
      $link = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
      $description = get_bloginfo('description');
  ?>
  <meta name="description" content="<?php echo $description; ?>">
  <meta property="og:title" content="<?php echo $title;?>">
  <meta property="og:url" content="<?php echo $link;?>">
  <meta property="og:image" content="<?php echo $template_url;?>/path/to/ogp.png">
  <meta property="og:site_name" content="<?php bloginfo('name'); ?>">
  <meta property="og:description" content="<?php echo $description;?>">
  <meta property="og:locale" content="ja_JP">
  <meta property="og:type" content="article">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="<?php echo $title;?>">
  <meta name="twitter:description" content="<?php echo $description;?>">
  <meta name="twitter:image" content="<?php echo $template_url;?>/path/top/ogp.png">
  <?php endif;?>

<?php

$template_url = get_template_directory_uri();

//アーカイブページでは以下のメタタグが出力されないので手動で記述する

if(!is_singular() && !is_home()) :

$title = wp_get_document_title();

$link = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];

$description = get_bloginfo('description');

<?php endif;?>

if文にもある通り、この出力をおこなうのはis_singular()ではないときと、is_home()ではないときです

is_singular()は、is_single()、is_page()、is_attachment()のときにtrueとなります

それの否定なのですべてのアーカイブページ（タクソノミーアーカイブなども含む）で出力されることになります

固定ページのdescriptionタグの中身が最適化されているか

All in One SEO Packを使っている場合、固定ページのOGPのdescriptionの中身は、デフォルトで、固定ページのcontentの内容を１６０文字抜粋したものと同じになります

固定ページごとに管理画面でディスクリプションを設定していれば問題ないのですが、設定していないことがほとんどなので、最適化してあげます

具体的には、管理画面で設定されていればその内容を出力し、何も設定が無い場合はデフォルトのディスクリプションとしてTOPページと同じディスクリプションを出力してあげます

以下の記述をfunctions.phpにすればOKです

// 固定ページのSEO設定（ogp関連）
function aioseop_meta($value, $sns, $field) {
  global $post;
  $aios_des = get_post_meta($post->ID, '_aioseop_description', true);

  if($field == 'description' && $aios_des === '') {
    if(is_page()) $value = get_bloginfo('description');
  }
  return $value;
}
add_filter('aiosp_opengraph_meta', 'aioseop_meta', 10, 3);

// 固定ページのSEO設定（ogp関連）

function aioseop_meta($value, $sns, $field) {

global $post;