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

公開日:2019年5月17日 Ver1.0の更新情報

【スポンサーリンク】








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

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

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

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

これについては
「https://w-just.com/blog/seo-tag-358.html」
の記事を参考にしました。
※参考サイトはSSLに対応していないため、リンクとして表示していません。興味のある方は直接アドレスバーへコピーしてごらんください。

まず現状は

  • トップページがブログ一覧の場合はサイトタイトルの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; ?&gt

「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つの修正によってすべてに適用するのがちょっと大変になってきましたけど、いいことはいい!で今後も微調整は行っていこうと思います。

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

いつでもご相談・お見積りの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。