hタグをSEO対策する話

2019年5月4日
2019年6月1日
アフィリエイト
194回
0件

アフィリエイト

昨日の夜、メルマガ登録をしているアフィリエイターさんからのメールで
添付記事があったので飛んでみた。

すると、ヘッダーの上の方に、
記事のキーワードが書かれていた。

SEOライティングのために、
一ヶ月で200ページ以上見てきたけれど、
上位表示されているもののいくつかに
同じような書き方をしているものがあった。

激戦区のキーワードにも関わらず、
10ページ程度で上位表示されてるから何かあると思っていた。

ここで、ビビッと。

メルマガアフィリエイターのソースコードを見てみることに。

すると驚くべきことがわかった。

このSEO対策を取り入れる際の
試行錯誤と備忘録としてこの記事を書く。

真面目系SEO対策：きちんとhタグを構造化してまじめにSEO対策してる人

ゴリゴリ系SEO対策：hタグを駆使して、対策してる

仮説としては、相対性。

hタグ SEO対策

試行錯誤

ワードプレスでこれが実践できるかわからないので
とりあえずやってみる。

やること

ヘッダー上部に記事ごとのキーワードを入れるorロゴ画像のAlt属性を記事ごとに変える
header.phpの<!–logo–>がトップ記事は<h1>、詳細記事は<p>になるので、記事ごとに<h1>になるようにする

これができれば、ゴリゴリ系SEO対策ができるかと。

ただ、デフォのwordpress設定ではできなさそう。

header.phpで、サイトタイトルを引っ張ってくる記述になっているから。

この記述をうまく変えれば、理想通り動くのではないか。

必要に応じてphpの勉強もしつつやっていこうと思う。

検証①header.phpのalt属性を、meta keywordsの引数から引っ張ってくる

現状、デフォでは

alt="<?php bloginfo('name')

となってる。

このbloginfoをmeta keywordsで記事ごとに引っ張って来れないかというもの。

まず、既存の機能でmeta keywordsを簡単に差設定できるように
All in SEOのキーワード設定を有効にする

→meta keywordsを設定しているのに、プラグインとテーマの干渉からか表示される場合とされない場合があった。
試行錯誤したが、原因解明するには時間がかかると判断したため、やめた。

もし解消の方法を知ってる人がいれば、
コメントにて教えてほしい。

検証②素直にヘッダーのロゴ上部にキーワードを入れられないか検証

仮説：h1タイトルを小さくしてしまって、logoの上に配置する

h1タグを小さくする方法

子テーマの中にある
style-user.cssに下記コードを追記する

.heading-primary{
  font-size:1.8rem;
  margin-bottom:10px;
}
.heading-primary span{
  font-size:1rem;
  margin-left:10px;
  font-weight:normal;
}

ただ、これだと全部（カテゴリーページなど）のタイトルも小さくなってしまうよう。

個別ページのタイトルだけ小さくしようと検証してみるものの、書き加える場所が分からない。

人が書いたソースコードを弄れるスキルを身につけたい。

とりあえず、今回はh1はキーワードでじゃなく、SEOライティングする。

相対性の配分だけ変えておくことにする。

けれど、悔しい。

ロゴ上にh1タグを置きたい。

引き続き、休憩の代わりに検証を続けることにする。

＜余談＞

wordpressの場合、
ロゴのAlt属性はadmin画面のメニューバー
設定から行う模様。

→これは、サイト全体でSEO価値を高めるために
ロゴのAlt属性に狙うキーワードを入れておくのが目的。

現状、ロゴをh1で囲うのは大変そう。

＜再試行＞

ロゴ上にh1タグを配置する方法

https://ferret-plus.com/7818

この記事を参考にカスタマイズしていく

まずはこれ、
http://kachibito.net/wordpress/theme-customizing-1st-step.html

wordpressの構造がわかる

編集しなければならないページがわかる。

これを読んだところ、
まず、index.phpの中にある

<div class="dividerBottom">
<h1 class="heading heading-primary"><?php the_title(); ?></h1>

このh1タグの中身を、header.phpの中にあるheader classの下、
<div class = “container container-header”>の上に
刺し込めば。

記事ごとのタイトルがh1タグでロゴ上に来るのではなかろうか

で、index.phpから抜いた記述は、代わりに記事のh2に変えてかないといけない…とおもったが、あとの<?php the_content(); ?>に含まれるので不要かと思われる→変更が必要(後述)。

やってみよう。

できた。

修正版は、次の記述をheader.phpの中にあるheader classの下、
<div class = “container container-header”>の上に刺し込んで。

	  <div class = "container upper-logo">
		  <h1><?php the_title(); ?></h1>
	  </div>

親テーマのcssに

.upper-logo{
  font-size:1.8rem;
  margin-bottom:10px;
}
.upper-logo span{
  font-size:1rem;
  margin-left:10px;
  font-weight:normal;
}

を追記すればOK。

ただ、これだけだと太字になってしまうので
細字にしたいな。

128行目の<h1>を<h2>に変える作業。

ただ、引数がどう設定されてるのかがわからないので。

single.phpの196行目<? php the_content(); ?>の中身の
h2タグだけを128行目に持ってこられれば最高。

できるかわからんけど。

…できた。

アイキャッチ上の<h1>を<h2>に変える方法は
https://unskilled.site/wordpressdetoukounaiyou/
を参考にした。

親ページのfunction.phpで関数を定義する。
下記コードを追加。

function get_h2tag() {
    //グローバル変数を使う為の宣言
    global $post;
    //マッチングで<h2>タグを取得する
    preg_match_all('/<h2>.+<\/h[2]>/u', $post->post_content, $matches);
	 //取得した<h>タグの個数をカウント
    $matches_count = count($matches[0]);
    if(empty($matches)){
        //<h2>タグがない場合の出力
        echo '<span>Sorry no index</span>';
    }else{
        //<h2>タグが存在する場合に<h2>タグを出力
        for ($i = 0; $i < $matches_count; $i++){
            echo  $matches[0][$i];
        }
    }     
}

で、single.phpの128行目を

<h2 class="heading heading-primary"><?php get_h2tag(); ?></h2>

に変える。

そしたら、<h1>が<h2>に変わる！！！

よし。

タイトルと記事中のh2が重複するから
記事の中の<h2>を消さなあかんな。

次のコードを追加CSSに入れたら
h2を隠し文字にして非表示にすることはできる。

.postContents h2 {
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

ただ、目次に残ったままやから
それを消したい。

どうやるんやろ・・・

あとは大きさを変えよう。

上のタグだと、

<h2 class=~~>
  <h2></h2>
</h2>

になるっぽいので、下に変える。

<div class="heading heading-primary">
  <?php get_h2tag(); ?>
</div>

ほな、大きさをstyle.cssのheadingで自由に変えられる?

・・・変えられへん、なんでや。

まぁいいや。cssは後回し。

ここまでのhtmlの変更点をまとめると。

header.phpに挿入

  <!--l-header-->
  <header class=~~>
	  <div class = "container upper-logo">
		  <h1><?php the_title(); ?></h1>
	  </div>
	  <div class="container container-header">
  <! --logo-->

function.phpの下部に追記

function get_h2tag() {
    //グローバル変数を使う為の宣言
    global $post;
    //マッチングで<h2>タグを取得する
    preg_match_all('/<h2>.+<\/h[2]>/u', $post->post_content, $matches);
	 //取得した<h>タグの個数をカウント
    $matches_count = count($matches[0]);
    if(empty($matches)){
        //<h2>タグがない場合の出力
        echo '<span>Sorry no index</span>';
    }else{
        //<h2>タグが存在する場合に<h2>タグを出力
        for ($i = 0; $i < $matches_count; $i++){
            echo  $matches[0][$i];
        }
    }     
}

single.phpの129行目周辺を変更

<div class="dividerBottom">
  <?php if~~>
    <div class="heading heading-primary">
      <?php get_h2tag(); ?>
    </div>

<ul class="dateList dateList-main">

style.cssの下部に追記

.upper-logo{
  font-size:1.8rem;
  margin-bottom:10px;
}
.upper-logo span{
  font-size:1rem;
  margin-left:10px;
  font-weight:normal;
}

cssは
・ロゴ上のh1を細字に
・タイトルのh2を大きく
などもう少し変える必要がある。

と、問題が１つ。

topページのが最新記事のものになってしまう。

これを解消するために、
topページのindex.phpを弄る。

違うな、header.phpで
h1あるときとないときで分岐させるんや。

この記述は、

header.phpを次のように変えればOK

  <div class = "container upper-logo">
    <?php if (is_front_page()) : ?>
    <?php else : ?>
      <h1><?php the_title(); ?></h1>
    <?php endif; ?>
  </div>

ということは、同じ原理で
SEO狙う記事と狙わない記事でロゴ上に文字おくかどうかも分岐できるな。
これはまた後日。

とりあえず、CSSに移る。

変更する点は、
・ヘッダーの上の余白
・ロゴ上の文字下の余白
・タイトルに変えたh2の大きさ

ヘッダー上の余白とロゴ上文字下の余白は
wordpress/概観/カスタマイズ/追加CSS
に次の内容を追記すればOK

.l-header {
    position: relative;
    padding:0;
    background: #fff;
    z-index: 9999;
	  font-size: 1.2rem;
}

で、タイトルの文字はなぜか知らんがうまくいってた。
たぶん、”heading heading-primary”で囲んだからやと思う。

＜追記　不具合＞

上記をメインサイトに転用してみたところ、
記事カードが
<h1>と目次になってしまう事象が発生していた。

ので、
記事カードのタイトルを<title>ではなく<h2>を引っ張ってくる仕様にする必要がある。
加えて、目次を任意の位置に表示させる。
→ultimate shortcodeか、デフォのコードで対応できたはず。

twitterカードもそうかも。
→確認したところ、All in SEOの方が優位らしく、ソーシャル設定でh2にしたタイトルを記述すれば問題なし。

だが、記事カードのテンプレがどこにあるかわからず、
時間がかかりそうなのでやめる。

やり方知ってる人おったら教えてください。

代わりに

代わりに、titleは変えず、
logo上に引っ張ってくるものを<h2>の中身だけにする戦略をとる。

上記の記述だと、<h2>タグを引っ張ってきたときに<h2>も一緒も来てしまうので諦めた。

が、こんな記事があった。

https://qiita.com/mitsuhiro_K/items/d13cb896e3cf8f5dc5d5

preg_replaceというものを使うらしい。

これを、.functionに追記すれば良きかも。

h1に変える？タグなしにする？

→タグなしにする

できた。
下記コードをfunction.phpのget_h2tagの記述と入れ替える

function get_h2tag() {
    //グローバル変数を使う為の宣言
    global $post;
    //マッチングで<h2>タグを取得する
    preg_match_all('/<h2>.+<\/h[2]>/u', $post->post_content, $matches);
	 //取得した<h>タグの個数をカウント
    $matches_count = count($matches[0]);
    if(empty($matches)){
        //<h2>タグがない場合の出力
        echo '<span>Sorry no index</span>';
    }else{
        //<h2>タグが存在する場合に<h2>タグを出力
        for ($i = 0; $i < $matches_count; $i++){
		      $h2_content = preg_replace('/<h2>(.*?)<\/h2>/u', "$1", $matches[0][$i]);
            echo  $h2_content;
        }
    }     
}

これで、h2の入力した文字がロゴでh1に変換される。

header.phpも次に変える。

<div class = "container upper-logo">
  <?php if (is_front_page()) : ?>
  <?php else : ?>
    <h1><a href="./"><?php get_h2tag(); ?></a></h1>
  <?php endif; ?>
</div>

single.phpも129行目をthe_title()に戻しておく。

<div class="heading heading-primary">
  <?php the_title(); ?>
</div>

以上で、ロゴ上対策を終了！

まとめ

変更するコード

single.phpの129行目周辺を

  <div class="dividerBottom">

  <?php if~~>
    <div class="heading heading-primary">
      <?php get_h2tag(); ?>
    </div>

  <ul class="dateList dateList-main">

から

  <div class="dividerBottom">

  <?php if~~>
    <div class="heading heading-primary">
      <?php the_title(); ?>
    </div>

  <ul class="dateList dateList-main">

に変える。

header.phpの25行目周辺に追記

  <!--l-header-->
  <header class=~~>
  <div class = "container upper-logo">
    <?php if (is_front_page()) : ?>
    <?php else : ?>
      <h1><a href="./"><?php get_h2tag(); ?></a></h1>
    <?php endif; ?>
  </div>
  <div class="container container-header">
  <! --logo-->

function.phpの下部に追記

function get_h2tag() {
    //グローバル変数を使う為の宣言
    global $post;
    //マッチングで<h2>タグを取得する
    preg_match_all('/<h2>.+<\/h[2]>/u', $post->post_content, $matches);
	 //取得した<h>タグの個数をカウント
    $matches_count = count($matches[0]);
    if(empty($matches)){
        //<h2>タグがない場合の出力
        echo '<span>Sorry no index</span>';
    }else{
        //<h2>タグが存在する場合に<h2>タグを出力
        for ($i = 0; $i < $matches_count; $i++){
		      $h2_content = preg_replace('/<h2>(.*?)<\/h2>/u', "$1", $matches[0][$i]);
            echo  $h2_content;
        }
    }     
}

wordpressの概観/カスタマイズ/追加CSSに追記

.l-header {
    position: relative;
    padding:0;
    background: #fff;
    z-index: 9999;
	  font-size: 1.2rem;
}

/*h2を非表示にする記述→後述する追記のjQueryの記述により不要*/
.postContents h2 {
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

style.cssに下記を追記したが、必要かは不明

.upper-logo{
  font-size:1.8rem;
  margin-bottom:10px;
}
.upper-logo span{
  font-size:1rem;
  margin-left:10px;
  font-weight:normal;
}

結果

上記の変更で

・タイトルには今まで通り、タイトルを入れればOK

・h2見出しに入れた文字をロゴ上にh1で囲って表示できる

・h2は、非表示(スペースは残る)。ただ目次関係上、目次挿入部に置く。

となる。

課題点

・スマホ表示のときのヘッダーの余白

・目次からh2を取り除く

・h2をcssで小さくして非表示分の余白を減らす

・h2を隠し文字にしたときのSEOがどうなるか

今後できそうなこと

SEO狙う記事と狙わない記事で、
ロゴ上の表示非表示を分岐して出力できそう。

SEO上どっちが効果あるかはわからんけど
h2じゃなくてh5くらいからロゴ上にh1で引っ張ってくるとかもできそう。

＜追記＞

h2の自要素を消す方法

課題：h2を隠し文字にしたときのSEOがどうなるか
を回避するために、contentsからh2要素を除外する方法

single.phpの199行目付近に次のコードを入れる

<section class="content<?php fit_content_class(); ?>">
<?php the_content(); ?>
  <script>
  $(function() {
	  $('h2').remove();
  });
  </script>
</section>

これは、jQueryのremove関数を使った記述

  <script>
  $(function() {
	  $('h2').remove();
  });
  </script>

ここがそう。

これで、コンテンツからはh2が消えるので
隠し文字のペナルティは受けない。

しかし、なぜか目次からはh2要素が削除されていないので
引き続き検証すべし。

あと、wordpressでjQueryを使うと
なんかが重複するとかしないとか。

調べるべし。

残った課題

・目次からh2要素を除外する
→UXは落ちるが
　SEO上は問題ないと判断。
　…内部リンクに影響するか？

・wordpressとjQueryの干渉
→なんや知らんけど不具合出てないし
　うまくいってるから放置

目次問題解決の方向性（思いついたこと）

目次はcontentsの中で呼び出され、
呼び出されたcontentsには
#outline__x_xが既に振られてるから
jqueryじゃ対処できない？

てか、目次の問題は
h1に上げるキーワードをh2じゃなくて
h5くらいに記述する設定にして
目次表示階層を下げれば解決できるんやない？

…できるな。

hタグをSEO対策する完成版

single.phpの129行目周辺

  <div class="dividerBottom">

  <?php if~~>
    <div class="heading heading-primary">
      <?php the_title(); ?>
    </div>

  <ul class="dateList dateList-main">

199行目周辺

<section class="content<?php fit_content_class(); ?>">
<?php the_content(); ?>
  <script>
  $(function() {
	  $('h5').remove();
  });
  </script>
</section>

header.phpの25行目付近

 <!--l-header-->
  <header class=~~>
  <div class = "container upper-logo">
    <?php if (is_front_page()) : ?>
    <?php else : ?>
      <h1><a href="./"><?php get_h5tag(); ?></a></h1>
    <?php endif; ?>
  </div>
  <div class="container container-header">
  <! --logo-->

function.phpの下部に追記

function get_h5tag() {
    //グローバル変数を使う為の宣言
    global $post;
    //マッチングで<h5>タグを取得する
    preg_match_all('/<h5>.+<\/h[5]>/u', $post->post_content, $matches);
	 //取得した<h>タグの個数をカウント
    $matches_count = count($matches[0]);
    if(empty($matches)){
        //<h5>タグがない場合の出力
        echo '<span>Sorry no index</span>';
    }else{
        //<h5>タグが存在する場合に<h5>タグを出力
        for ($i = 0; $i < $matches_count; $i++){
		      $h5_content = preg_replace('/<h5>(.*?)<\/h5>/u', "$1", $matches[0][$i]);
            echo  $h5_content;
        }
    }     
}

wordpressから追加CSS
[注意：これの記述によって、フッター下にもヘッダーが表示されるという事象が起きた。原因はおそらくposssition:relative; 本当にこの記述が必要かは不明]

.l-header {
    position: relative;
    padding:0;
    background: #fff;
    z-index: 9999;
	  font-size: 1.2rem;
}

style.css

.upper-logo{
  font-size:1.2rem;
  padding-top:10px
}
.upper-logo span{
  font-size:1rem;
  margin-left:10px;
  font-weight:normal;
}

これで、h5に設定したキーワードが
h1で表示される！

目次はh5を表示しないように。

<追記>

これまで親テーマで編集していたが、テーマのアップデートをするとカスタマイズが消えてしまう。

なので、子テーマでファイルを作って編集すべし。

手順は

FTPから対象ドメインの/public_html/wp-content/themesにある親テーマにアクセス
そこからローカルにsingle.phpとheader.phpを落とす
で、子テーマの方にアップロードする
あとは、wordpressから子テーマを編集する！

前の記事

2019年4月30日
リライト　書けない
次の記事

2019年5月9日
検索上位のサイトを乱立する手法(仮説)