目次の設置効果か！？Googleの検索結果に見出しへのリンクが表示されるようになりました

今日、たまたま気が付いたのですけど、Googleの検索結果の表示が見慣れない形に変わりました。何でですか？？

どこのパーツのリンクこと？

最初に気が付いたのは、このページです。
https://www.google.com/search?q=sc-40ne%E3%80%8C2%E3%80%8D

キーワード　SC-40NE「2」　での検索結果です。
いつまで表示されているか分からないので、スクショを撮っておきます。
f:id:kanaxx43:20200704202522p:plain
▲スクショの下の部分のリンクです。

全部のページで表示されているのではなく、このキーワードの検索結果だけみたいです。

目次効果っぽい

この表示がされるようになった理由は定かではないのですが、最近行った変更で関係がありそうなものは、「ページ内に目次を置いたこと」でしょうか？ページ内の見出しの文字列とGoogleのテキストが一致しているので、それっぽいですね。

右下のコンテンツの目次

先日、右下のぴたっと止まるコンテンツを作るときに、ページ内の見出しから目次を自動で生成しました。
はてなブログにも目次機能はありますが、大中小見出しを全部引っ張ってくるのが鬱陶しいので使うのを止めました。最初の1レベルだけでよかったので自分で作りました。

やっていることは、

ページ内の<H3>タグを全部探して、
<H3>のテキストの内容を<H3>のidに設定し、
<li><a href="">を生成する

だけですね。

<ul id="sidebar-mokuji"></ul>

<script>
  const createMokuji = function() {
    let mokuji = document.getElementById('sidebar-mokuji');
    let midashi = document.querySelectorAll('h3');
    for(let i=0; i<midashi.length; i++){
      let h3 = midashi[i];
      let txt = h3.innerText;
      h3.id=txt;

      let a = document.createElement('a');
      a.innerHTML = txt;
      a.setAttribute('href', '#'+txt);

      let li = document.createElement('li');
      li.appendChild(a);
      mokuji.appendChild(li);
    }
    if(mokuji.childElementCount>0){
      mokuji.className = 'table-of-contents';
    }
  }
  createMokuji();
</script>

サイドバーのHTMLモジュールに置けば動きます。

表示されてみるとカッコ悪い

見出しがGoogleの検索に表示されると思っていなかったで、適当に付けてました。今の内容も検索結果に表示されてもクリックしたい感がないですね。

■現状の見出し

NTT東西の違いってあるのか？
レンタルするか？購入するか？
探してみよう

せっかくなので、見栄えする内容に変えちゃいましょう。

NTT東西の違いについて
レンタルと購入、どちらがお得か
どこで売っているのか？

しばらく様子をみましょう。

2020年7月6日1:00時点で変更内容が反映されました。
f:id:kanaxx43:20200706012149p:plain

まとめ

たまたま、見出しを置いてみて気が付いたことを書いてみました。Googleに見出しを認識させると、ちょっといいことがあるかもしれないという記事でした。

目次があるのはユーザにとってもいいことだと思うので、置かない手はないですね。わざわざプログラムを作らなくても、はてなブログの機能で見出しを作れるので、置き場所にこだわらないひとはそれを使ったほうが楽ですね。

参考にしたサイト

【SEO】Googleのモバイル検索結果に「～に移動」というページ内のid属性（アンカーリンク）が表示可能に
https://s-supporter.hatenablog.jp/entry/seo-google-mobile-search-jump-to-links

『７回目の出直し🌻』

好きなことを自分のペースで、のんびり更新