【ha-Basic】h1タグの出力方法の見直しを行いました

【ha-Basic】h1タグの出力方法の見直しを行いました

少しSEOを意識した対応です。

このテーマのベースとなるテーマでのh1タグの扱いは以下のようになっていました。

  • サイトタイトルはh1タグで出力
  • 固定ページ・投稿のタイトルはh1タグで出力

これでも大丈夫かとは思うのですが、h1タグは「こんなこと書かれているページですよ!」という意味合いで通常1ページに1つであることが望ましいらしい(これは検索エンジンの評価の問題なのでなんとも言えない部分ではある・・・)ということと、h1タグの下にはそのページの内容があることが望ましい(つまりサイトタイトル下にメニューや画像があるのはあまり好ましくない)ということで、対応しました。

これについてはSEOに重要なタグ12個の正しい使い方の記事を参考にしました。

まず現状は

  • トップページがブログ一覧の場合はサイトタイトルの1か所
  • トップページが固定ページの場合はサイトタイトルとページタイトルの2か所
  • 固定ページと投稿、タグページ、カテゴリーページはサイトタイトルとページタイトルの2か所

とこんな感じになっていたので以下のように修正しました。

  • トップページがブログ一覧の場合はサイトタイトルをh1にする
  • それ以外の場合はサイトタイトルをspanにして、ページタイトルをh1にする

こうすれば1ページに1か所のh1タグという条件なのでそのように修正しました。

h1タグの重複を避けるための設定内容

「header.php」の修正

もともとページタイトルについてはh1で出力されているので、サイトタイトルの扱いのみ条件で対応しました

<?php if ( is_single() || is_page() || is_tag() || is_date() || is_search()) : //投稿と固定ページ、アーカイブページのタイトル?>
<div class="site-title">
<span><a href="<?php echo home_url(); ?>">
<?php bloginfo( 'name' ); ?>
</a></span>
</div>
<?php endif; ?>
<?php if ( is_single() || is_page() || is_tag() || is_date() || is_search()) : //投稿と固定ページ、アーカイブページのタイトル?>
<div class="site-title">
<h1><a href="<?php echo home_url(); ?>">
<?php bloginfo( 'name' ); ?>
</a></h1>
</div>
<?php endif; ?>

「style.css」「a-color-style.css」の修正

これに伴い、サイトタイトルがspanの場合とh1の場合ができるためCSSを修正、それに伴ってカラー設定用のCSSも修正

「style.css」

/* 固定ページ・投稿の場合(固定ページをトップページにした場合も含む) */
.site-title span {
font-size: 1.8em;
margin: 0;
/*padding: 10px 5px 0;*/
}

.site-title a {
display: block;
text-decoration: none;
color: #333;
font-weight:bold;
}

/* トップページが投稿一覧の場合のみ */
.site-title h1 {
font-size: 1.8em;
margin: 0;
/*padding: 10px 5px 0;*/
}

.site-title h1 a {
display: block;
text-decoration: none;
color: #333;
font-weight:bold;
}

「a-color-style.css」

.site-title a {
color: #333;
}

.site-title h1 a {
color: #333;
}

トップページを固定ページにした時のページタイトルは・・・

最終的な問題として、トップページを固定ページにしたとき、本文にページタイトルを表示したくない場合もあると思います。そんなときには追加CSS(「a-insert-css.css」)へ

/* トップページ(固定ページ)の固定ページタイトルを非表示 */
body.home h1 {
display: none;
}

を追記することで、htmlにはきちんとh1タグが出力されるけど表示はしないという風にできます

※display:noneで非表示にすることが正しいのか?については今後の研究課題であります。

あとがき

私が勝手に師と仰ぐ「Simplicity2」ではこれに対して施策がきちんとされていて、サイトタイトルはh1タグ、投稿や固定ページのページタイトルはh2タグで出力されるようになっていました。やはりいろいろ考えられていて素敵なテーマだと改めて思いました。

ただ、ページごとに言いたいのは「ページタイトルだろう」と私は考え、↑のような仕様にしました。

これに対するSEOの影響はいかに!?

だんだん使用しているサイトを増やしているので1つの修正によってすべてに適用するのがちょっと大変になってきましたけど、いいことはいい!で今後も微調整は行っていこうと思います。

未完成すぎるテーマで申し訳ありませんが、温かい目で見守ってやってください。

自身のサイトも確認してみましょう

前述したようにこの設定が正しいかどうかの判断は検索エンジンが行うことですので、必ずしもSEOに有効であるということは言えません。

でも、この記事をたまたま読んで「自分のサイトはどうなってるんだろう?」と思われた方はブラウザでソース表示してどのように表示されているか確認しておきましょう。

もしもこの記事の方法の方が納得!!と思われるのであれば、この記事で紹介しているコードはWordPressにおける出力タグの汎用コードしか使っていませんので大抵の場合コピペで変更できます。
※変更前にはバックアップを取り、変更後は必ず出力されるソースの再確認をしてください

余談 テーマを自作してみるといろいろなことに気づきますね。また、phpの知識やCSSの知識、SEOについてもまさに自分の責任においていろいろ勉強でき、カスタマイズできるようになりますからWordPressに限らずサイト作りの知識深耕には欠かせないと実感しています。

皆さんも機会があれば誰かがリリースしているテーマの改造ではなく、自分用のテーマ、作ってみてください。そのためのベースとしてha-Basicはこうして何かを追加したり変更したりした履歴を余すところなく紹介していっていますので、テーマ作りのきっかけとしてもってこいなんじゃないかなぁと自負しております。

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。

年齢:40代 趣味/園芸・ペット・卓球