はてなブログを始めて22日目です。
ちょうど3週間が経過しました。
これまでに16記事を投稿しましたが、解消できない不便があるので、ここで基本的な設定を見直してみようと思います。
前提として、下書きや公開した記事の編集は、主にスマホ用のアプリを使っています。
はてなブログの見出し
SEOにおいて見出しの重要性は広く知らられています。
そして、はてなブログの見出しには<h2>がないことも有名です。
はてなブログで記事を書く際、エディタで選ぶ見出しには<h2>がありません。
仕方がないので、一旦「大見出し」の<h3>にしておいて、HTML編集に切り替えて手動で<h2>に書き換えていました。
確かにSEOの理には叶っているのですが、このやり方はとても非効率です。
アプリを使っていると、なおさら手間がかかります。
見出しを自動で書き換える
なにかよい方法はないかと思案していたところ、この問題に言及されている方がいました。
わかりやすい解説とともに、解決策として見出しを自動で書き換えるスクリプトも公開されています。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('h3').replaceWith(function() { $(this).replaceWith('<h2>'+$(this).text()+'</h2>') }); $('h4').replaceWith(function() { $(this).replaceWith('<h3>'+$(this).text()+'</h3>') }); $('h5').replaceWith(function() { $(this).replaceWith('<h4>'+$(this).text()+'</h4>') }); }); </script>
こちらを使えば、すべての「大見出し」が自動で<h2>に書き換えられます。
同様に「中見出し」と「小見出し」もひとつずつ繰り上がって表示されます。
ただし、過去の記事にも書き換えが及びます。
つまりは、今まで手動で書き換えをしたことがないブログに向いています。
さらに、応用編も公開されていました。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(function(){ if (!document.querySelector('.entry-content h2')){ $('.entry-content h3').replaceWith(function() { var tag_class_h3 = $(this).attr("class"); var tag_id_h3 = $(this).attr("id"); if ( tag_class_h3 == null) { var tag_class_plus_h3 =[]; } else { var tag_class_plus_h3 = 'class="'+tag_class_h3+'"'; } if ( tag_id_h3 == null ) { var tag_id_plus_h3 =[]; } else { var tag_id_plus_h3 = 'id="'+tag_id_h3+'"'; } $(this).replaceWith('<h2 '+tag_id_plus_h3+' '+tag_class_plus_h3+'>'+$(this).html()+'</h2>'); }); $('.entry-content h4').replaceWith(function() { var tag_class_h4 = $(this).attr("class"); var tag_id_h4 = $(this).attr("id"); if ( tag_class_h4 == null) { var tag_class_plus_h4 =[]; } else { var tag_class_plus_h4 = 'class="'+tag_class_h4+'"'; } if ( tag_id_h4 == null ) { var tag_id_plus_h4 =[]; } else { var tag_id_plus_h4 = 'id="'+tag_id_h4+'"'; } $(this).replaceWith('<h3 '+tag_id_plus_h4+' '+tag_class_plus_h4+'>'+$(this).html()+'</h3>'); }); $('.entry-content h5').replaceWith(function() { var tag_class_h5 = $(this).attr("class"); var tag_id_h5 = $(this).attr("id"); if ( tag_class_h5 == null) { var tag_class_plus_h5 =[]; } else { var tag_class_plus_h5 = 'class="'+tag_class_h5+'"'; } if ( tag_id_h5 == null ) { var tag_id_plus_h5 =[]; } else { var tag_id_plus_h5 = 'id="'+tag_id_h5+'"'; } $(this).replaceWith('<h4 '+tag_id_plus_h5+' '+tag_class_plus_h5+'>'+$(this).html()+'</h4>'); }); } }); </script>
過去記事に対しては、表示時にJavaScriptで強制的にタグの書き換えを行い、その結果をブラウザに表示させるという処置をとります。
「はてな記法」と「Markdown記法」の比較 - Milkのメモ帳
こちらのスクリプトは過去の記事には影響しません。
また、それぞれの見出しに施したCSSの効果も引き継がれます。
すでに「大見出し」を<h2>に書き換えている私には後者が適しているようです。
クローラに対して有効なのか |
---|
SEOという観点に立ち戻って考えると、基本的にクローラはコンテンツのHTMLファイルを読み込んでいます。ならば、表示上の書き換えには意味がないのかと思いきや、JavaScriptもjQueryも適切にレンダリングして、コンテンツを評価しています。 |
では、早々に実装してみましょう。
やり方はとても簡単で、上記のコードを記事の「デザイン」に貼り付けるだけです。
これで、過去の記事を心配することなく、これから投稿する記事に思った通りの見出しが反映されます。
アプリに対しての効果
ところが、残念なことに、アプリではこの貴重なコードが役に立ちませんでした。
正確に言うと、パソコン用エディタでは「大見出し」がきちんと<h2>に書き換えられていますが、アプリのプレビューには反映されないのです。
私はとても大事なことを忘れていました。
アプリで効果を指定するには、上記のコードをスマホ用のデザインにも貼り付けなくてはいけません。
アプリのプレビューでは、スマホ用の表示しか確認できないので、使えないのかと早とちりしてしまいました。
【重要】
公開されているコードは、アプリにも有効です。
- これから新しいブログを立ち上げる
- 見出しのことを知らなかった
- 今まで手動で書き換えていた
- アプリで記事を編集している
はてなブログで記事を投稿するどなたにも効果のあるSEOです。
早めに取り入れることをおすすめします。
最終更新日:2017年4月4日