[Ha-Basic] Revised h1 tag output method

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

公開日:2019年5月17日 制作備忘録
Knowledge Base Wordpress ha-Basic テーマ
☆☆ この機能は【ha-Basic】テーマ バージョン1.1で実装(対応)済みです ☆☆
少しSEOを意識した対応です。

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

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

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

これについては
「http://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;
}

【ha-Basic】json-LDを使った構造化データについて

【ha-Basic】複数カテゴリーに登録している投稿のカテゴリー表示デザインを見直しました

SEO対策!?も兼ねてモバイル検索結果に表示させる画像タグを追加してみました


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

最終的な問題として、トップページを固定ページにしたとき、本文にページタイトルを表示したくない場合もあると思います。そんなときには追加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はこうして何かを追加したり変更したりした履歴を余すところなく紹介していっていますので、テーマ作りのきっかけとしてもってこいなんじゃないかなぁと自負しております。

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

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

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


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報