BLOG

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

2021/03/24

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

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

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

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

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

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

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

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

コンテンツ編

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

カード型レイアウト

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

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

よくあるカード型レイアウト1
よくあるカード型レイアウト2

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

  • 記事数が増減しても崩れないか

  • 文字数が長いときを考慮できているか

  • どんな画像のサイズが来ても比率を保って表示されるか

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

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

順々に見ていきましょう

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

リスト型レイアウト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

テーブル型レイアウト

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

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

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

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

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

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

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

テーブル型レイアウトをコーディングする際には、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や機能面が大きく変わりました
All in One SEO Pack
UIはオシャレで見やすくなったのですが、有料の範囲が増えてしまい、ちょっと使いづらくなりました^^;

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

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

1ページにh1タグは1つというのがスタンダードです(※)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

おわりに

今回紹介した検証時チェックポイントは意外に気づきにくい部分ですが、サイトのクオリティに関わるとても重要な部分です

WordPress構築の際には、管理画面の情報を動的に出力するコードを書くことに集中してしまいがちですが、実はそれだけじゃないということがお分かりいただけたかと思います

こういった細かい部分にも気を付けてクオリティの高いサイトを納品していきましょう!^^