先日、ついに当ブログが30記事に到達したのでこれまでの総括を記事にしましたが、記事数の割にPV数が伸びていません。
読まれない記事を量産するのも悲しいので過去の数記事にSEO対策をしました。
その内容を以下にまとめておきます。
記事数30突破というタイミングでSEO対策をする理由は、
・今ならまだ過去記事の量がリライトできる範囲内
・記事を書くこと自体には慣れてきたので、その次のレベルで勝負したい
というところです。
この記事を読むことで、巷で言われているSEO対策のうち一般的なものはすべて確認することができるように構成したつもりです。
また、はてなブログの運営者でありGoogle Search Consoleに登録していれば、この記事に沿えばこれらのSEO対策ができます。
SEO対策とは
SEOとは、Search Engine Optimizationの略です。Search Engineとは検索エンジン：GoogleやYahoo等の検索システムのことですね。Optimizationとは最適化。つまり、検索エンジンからの検索に上位表示されるように自分のブログ（サイト）を最適化する、ということです。
あなたが何かを解決するためにGoogleやYahooで何かを調べたとき、検索結果の何ページまで見るでしょうか？1ページ目に表示されたサイトで解決してしまえば、2ページ目以降は見ないでしょう。また、1ページ目で解決に至らなかったとしても、2ページ目を見るのではなく別の検索ワードで再検索することもあるでしょう。
要は、検索結果の1ページ目に如何に自分のサイトを表示させるか、がPV数アップには大切です。
10個のSEO対策
1. モバイルフレンドリー
昨今はデスクトップ型のPCやノートPCのみならず、スマホ等のモバイル端末からのブログ閲覧が増えてきているので、”スマホから見やすいページ構成になっているか”ということが大事で、検索順位への影響があるようです。
縦スクロールのみで閲覧できるか、インタースティシャル広告（本文にオーバーレイやポップアップして表示される全画面広告）を使っていないか、スマホで見たときに画像がちゃんと見えるか、といったことです。
ブログの各記事がモバイルフレンドリーかどうかは下記のサイトで確認できます。
トップページ（）と各記事のページをすべてテストしました。
すると、すべてのテスト結果が下記のようにモバイルフレンドリーであるということでした。
また、Google Search Consoleのモバイルユーザビリティ画面でもエラーは0でしたので、本ブログにおいては今のところモバイルユーザビリティについては問題ないようです。
2. ドメインの選定
ドメインって何？という方は下記に解説記事があります。
端的に結論を書くと、
・トップレベルドメインにおいて、ジェネリックトップレベルドメイン（=分野別トップレベルドメイン）：gTLD（「.com」「.info」「.net」「.org」等）はSEOに関係無いとのことです。つまり、何を選んでも検索順位に影響は無いということです。
・対して、国別コードトップレベルドメイン：ccTLD（「.jp」「.us」等）は、SEOに影響することがあるようです。例えば、対象の読者が日本にいる人たちなのにブログのccTLDが「.us」（アメリカ合衆国）だったりすると検索順位向上に不利になってしまうようです。ただ、対象が日本であればccTLDを「.jp」にしておけば大きな問題では無いように思います。
そして肝心の当ブログのトップレベルドメインですが、「.tokyo」です。
これは、新gTLD（新しいジェネリックトップレベルドメイン）というものに属するようでgTLDと扱いは変わらないようです。
Google ウェブマスター向け公式ブログ: 新しいトップレベル ドメイン（gTLD）に対する Google での取り扱いについて
ホッとしました。
記事数が増えてからドメインを変更するのはしんどいので、ドメインについてはブログ運営開始当初からもっと調べておけば良かったと思いました。
3. ドメインエイジ
ドメインの使用期間のことですね。当ブログでいうと2019年1月1日に運営がスタートしていますので、現在2019年5月8日では4ヶ月ちょっとということになります。
このドメインエイジですが、長ければ長い方が検索順位向上に有利な気がしますがそうではないようです。
【SEO】「ドメインの登録期間（ドメインエイジ）が長いほど上位表示に有利」ではなく「実績のあるドメインだから上位表示で有利となる」 - 検索サポーター
結局は、そのドメインの過去の実績が重要とのことです。
淡々と良記事を書いて、自分のドメインを育てていく、という感じですね。
このことからも、前述の「ドメインの選定」を失敗すると、ドメインを変更するとしてもせっかく育てたドメインを捨てることになるのでかなり痛いです。
ドメインの選定は慎重に行い、あとはそれをじっくりと育てる、ということですね。
4. Descriptionの設定（スニペットの設定）
検索結果のページタイトルの下に表示される文章のことです。この部分をスニペットと呼び、Descriptionに設定した内容が表示されます。
Descriptionにはブログの内容を簡潔に表す概要を設定することができ、未設定の場合は自動生成されます。
SEOに直接的な影響は無いようですが、検索結果にページが表示されたときに目に入るので、読者を惹きつけることができればPV数アップに繋がるかもしれません。（もちろんタイトルの方が影響は大きいと思います。）
はてなブログProでDescriptionを設定する方法を解説します。
記事の編集画面において、右端の歯車マーク「編集オプション」をクリックします。編集オプションの項目の中に、「記事の概要」という項目があります。これがDescriptionに相当し、変更することでスニペットの文章を変えることが可能です。
この画像の「記事の概要」を見ていただくと、その内容が前出の検索結果画像のスニペットに表示されていることが分かります。
下記のように編集して更新しておきました。
5. 画像にAlt属性を記述する
ブログは様々な環境から閲覧されるので、ブラウザ設定等の問題で画像が表示され無い場合があります。そのときに、代わりのテキストを表示することでブログを可読な状態に保ちます。
はてなブログ編集画面のHTML編集で見ると、例えば以下が対象の場所となります。
画像の内容をテキストで説明する形でalt属性を記述しました。
これで、Googleの検索エンジンも画像をテキストで認識できるようになり、SEO対策となります。
この作業をすべての画像に対して行います。
6. サイトマップの作成
サイトマップとは、読んで字のごとく「サイト内のページ全体の地図」のことです。
これをGoogle Search Consoleに登録しておくことで、Googleの検索エンジンにブログ内の地図をお知らせすることができるので、記事を投稿したときにGoogleに見つけてもらえるまでのスピードが上がります。
以下で、はてなブログのサイトマップをGoogle Search Consoleに登録する方法を説明します。
Google Search Consoleにログインし、左サイドバー内の「サイトマップ」をクリック。
下の画像のように、自分のブログトップページURLに続けて
・「sitemap.xml」と打って送信。
・次は、「sitemap.xml?page=1」と打って送信。
・さらに、「sitemap_page.xml」と打って送信。
あとはただ待つだけです。
送信直後の画面は以下のように、「取得できませんでした」となりますが気長に待ちます。
追記（2019.6.17）
現在は「成功しました」となっています。
約1ヶ月ほどかかりましたので気長に待ってください。
7. ナビゲーションメニュー
グローバルメニュー、ナビゲーションバーと同じ意味です。
大枠はこちらの記事を参考にさせていただきました。
(コピペしたものを少し編集しているので、HTMLコードとCSSコードは下に載せておきます。)
はてなブログにグローバルメニュー（ナビゲーションバー）をつけてみよう - つなろっく
はてなブログでグローバルメニューとトグルメニューを両立させレスポンシブスタイルにするカスタマイズ - Yukihy Life
固定グローバルナビゲーションでアクセス倍増！コピペで簡単！ - Bambi's BLOG @ hatena
トグルメニューが出てこない場合はこちらを参照ください。（当ブログでは、トグルメニューは使わず、画面サイズが一定以下になった場合はボトムメニューに切り替えることにしました。）
はてなブログテーマ「Naked」でトグルメニューが開かない時の対処法 - ユウブログ
ボトムメニューについてはこちらが参考になります。
【レスポンシブ】スマホ固定フッターメニュー★ボトムナビゲーションでアクセスUP！ - Bambi's BLOG @ hatena
ほぼ上記ブログよりコピペですので、引用を使いながらコードを記します。
はてなブログにおいて、「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」にHTMLコードを書いてください。
そして、「デザイン」→「カスタマイズ」→「{}デザインCSS」にCSSコードを書いてください。
また、上記参考サイトを確認すれば、各ブログに合わせてカスタマイズすべき部分が分かりますので、書きコードは適宜編集してください。
下記コードは、上記ブログからのコピペを合わせ技したようなものです。コピペ用コードを掲載いただいているブログ管理者様に感謝するとともに、本ブログをご覧いただいている皆様には是非上記ブログにも訪れていただければと思います。
HTMLコード
<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='https://www.gonzales.tokyo/'>HOME
<li><a href='https://www.gonzales.tokyo/archive/category/%E8%87%AA%E5%B7%B1%E7%B4%B9%E4%BB%8B'>自己紹介</a></li>
<li><a href='https://www.gonzales.tokyo/archive/category/%E6%8A%95%E8%B3%87'>投資</a></li>
<li><a href='https://www.gonzales.tokyo/archive/category/%E3%83%88%E3%83%AC%E3%83%BC%E3%83%89'>トレード</a></li>
<li><a href='https://www.gonzales.tokyo/archive/category/%E3%83%96%E3%83%AD%E3%82%B0'>ブログ</a></li>
<li><a href='https://www.gonzales.tokyo/archive/category/%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF'>ネットワーク</a></li>
<li><a href='https://www.gonzales.tokyo/archive/category/%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%83%81%E3%82%A7%E3%83%BC%E3%83%B3'>ブロックチェーン</a></li>
<li><a href='https://www.gonzales.tokyo/archive/category/%E3%83%86%E3%83%AC%E3%83%93'>テレビ</a></li>
<li><a href='https://www.gonzales.tokyo/archive/category/%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9'>ビジネス</a></li>
<li><a href='https://www.gonzales.tokyo/archive/category/%E7%A2%BA%E5%AE%9A%E7%94%B3%E5%91%8A'>確定申告</a></li>
</div>
</ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
$(".menu-toggle").on("click", function() {
$(this).next().slideToggle();
});
});
$(window).resize(function(){
var win = $(window).width();
var p = 768;
if(win > p){
$("#menu").show();
} else {
$("#menu").hide();
}
});
</script>
<!-- bottom navigation -->
<ul class="bottom-menu">
<li>
<!--ホーム -->
<a href="https://www.gonzales.tokyo/">
<i class="blogicon-home"></i><br><span class="mini-text">ホーム</span></a>
</li>
<li class="menu-width-max">
<!-- カテゴリ -->
<a href="#"><i class="blogicon-list"></i><br><span class="mini-text">カテゴリ</span></a>
<ul class="menu-second-level">
<!-- カテゴリ項目 -->
<li><a href="https://www.gonzales.tokyo/archive/category/%E8%87%AA%E5%B7%B1%E7%B4%B9%E4%BB%8B">自己紹介</a></li>
<li><a href="https://www.gonzales.tokyo/archive/category/%E6%8A%95%E8%B3%87">投資</a></li>
<li><a href="https://www.gonzales.tokyo/archive/category/%E3%83%88%E3%83%AC%E3%83%BC%E3%83%89">トレード</a></li>
<li><a href="https://www.gonzales.tokyo/archive/category/%E3%83%96%E3%83%AD%E3%82%B0">ブログ</a></li>
<li><a href="https://www.gonzales.tokyo/archive/category/%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF">ネットワーク</a></li>
<li><a href="https://www.gonzales.tokyo/archive/category/%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%83%81%E3%82%A7%E3%83%BC%E3%83%B3">ブロックチェーン</a></li>
<li><a href="https://www.gonzales.tokyo/archive/category/%E3%83%86%E3%83%AC%E3%83%93">テレビ</a></li>
<li><a href="https://www.gonzales.tokyo/archive/category/%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9">ビジネス</a></li>
<li><a href="https://www.gonzales.tokyo/archive/category/%E7%A2%BA%E5%AE%9A%E7%94%B3%E5%91%8A">確定申告</a></li>
</ul>
</li>
<li>
<!-- 読者登録 -->
<!-- ~hatena.ne.jp/はてなID/URL(http://部分は無し)/subscribe -->
<a href="https://blog.hatena.ne.jp/gonzales1919/www.gonzales.tokyo/subscribe" target="_blank">
<i class="blogicon-hatenablog"></i><br><span class="mini-text">読者登録</span></a>
</li>
<li>
<!-- ツイッター-->
<!-- screen_name=自分のツイッターID" ←＠マーク以降のID -->
<a href="https://twitter.com/intent/follow?screen_name=Gonzale11602907">
<i class="blogicon-twitter"></i><br><span class="mini-text">Follow</span></a>
</li>
</ul>
CSSコード
/* <system section="theme" selected="life"> */
@import "/css/theme/life/life.css";
/* </system> */
#menu {
/*position: relative;*/
position: fixed;
left: 0;
top: 0;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
/*padding-left: 0px;*/
/*height: 40px;*/
}
.menu-inner{
width: 968px;
margin: 0 auto;
height: 40px;
background: #343838;/*グローバルメニュー背景色*/
}
#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: left;
}
#menu li a {
padding-left: 15px;
padding-right: 15px;
display: block;
color: #ffffff;/*グローバルメニュー文字色*/
font-size: 80%;
font-weight: bold;
line-height: 40px;
}
#menu li:hover a {
color: #00DFFC;
background: #ffffff;
transition: all .5s;
}
.menu-toggle{
display: none;
}
@media screen and (max-width:968px){
.menu-inner{
width: 768px;
}
}
/*========================
smartphone bottom menu
========================*/
.mini-text{font-size:10px;}/*文字大きさ*/
ul.bottom-menu {
position: fixed;
left:0;
bottom:0;
width: 100%;
height:45px;/*高さ*/
margin:0;
padding:0;
background-color:#f5f5f5;/*背景色*/
border-top:2px solid #808080;/*バーの上の線*/
border-bottom:2px solid #808080;/*バーの下の線*/
z-index:30;}
ul.bottom-menu li {
float:left;
width:25%;
background-color:#f5f5f5;/*背景色*/
list-style-type:none;
text-align:center;
font-size:25px;/*アイコンのサイズ*/}
.bottom-menu li a {
display: block;
color:#808080;/*アイコン＆文字の色*/
padding-top:10px;
padding-bottom:5px;
line-height:10px;
text-decoration:none;}
.bottom-menu li a:hover {
color:#a9a9a9;/*マウスオーバー時の色*/}
/* === 展開メニュー === */
ul.menu-second-level {
visibility: hidden;
/*opacity: 0;*/
opacity: 1;
z-index:1;}
ul.menu-second-level li a{
border-top:1px dashed #a9a9a9;/*展開の枠点線*/
font-size:15px;/*展開メニューの文字サイズ*/
line-height:30px;/*文字の縦幅*/}
.menu-second-level li a:hover {
height:100%;
background: lightgrey;/*マウスオーバーの色*/}
li.menu-width-max ul.menu-second-level {
position: absolute;
bottom: 47px;/*高さ*/
left: 0;
box-sizing: border-box;
width: 100%;
padding:0;}
li.menu-width-max:hover ul.menu-second-level {
bottom: 47px;/*高さ*/
visibility: visible;
opacity: 1;}
li.menu-width-max ul.menu-second-level li {
float: left;
width: 100%;
border: none;}
/*PC表示の際はボトムメニューは表示しない*/
@media(min-width: 768px){
.bottom-menu{display:none; }
}
/*スマホの時だけ*/
@media(max-width: 767px){
/*ボトムメニュー付けたのでフッタを底上げする*/
#footer{margin-bottom:48px;}
}
/* <system section="background" selected="default"> */
/* default */
/* </system> */
.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #1056a2;
border-bottom: 1px solid #1056a2;
}
8. スマホ閲覧時のレスポンシブデザイン設定
スマートフォンでもPCと同じデザインでブログを表示します。これで上で設定したHTMLやCSSがスマホにも引き継がれます。
「デザイン」→「スマートフォン」→「詳細設定」のレスポンシブデザインにチェックを入れて変更を保存します。
9. パンくずリストの準備
パンくずリストとは、これです。
「デザイン」→「カスタマイズ」→「記事」と進みまして、 「パンくずリスト」の「記事ページにパンくずリストを表示する」にチェックを入れて保存するだけです。
10. 記事タイトルの設定と記事構成
やはり記事タイトルは重要です。
しかし、これについては正解にたどり着くのは非常に難しいと思っています。日々タイトルを工夫するようにして、自身で正解を手繰り寄せる必要があると思います。
とはいえ、巷で言われているキーポイントを下記にまとめておきます。基本は下記を意識しつつ、練習するのが良いと思います。
・タイトルにキーワードを入れる
・クリックしたくなるタイトルをつける
・記事を読むメリットを書く
・数字を入れる
・どんな人がターゲットなのかを書く
・流行りの言葉を入れる
タイトルとは異なりますが、見出しにもキーワードを入れつつ、見出しを見ればおおよそ内容が検討つくような記事構成にすればさらに良くなると考えています。
ソーシャルサービスへの展開
GoogleやYahooからの検索流入を増やすことも大切ですが、SNSからの流入もPV数アップが期待できます。そこで、SEO対策とは異なりますがツイッターを始めました。
ブログ更新時はツイートしてお知らせしようと思いますので、是非フォローをお願いします。
まとめ
今回は、SEO対策として一般的なものについて書きました。
記事タイトルの設定や記事構成、画像のAlt属性、Descriptionの設定は、記事を書く度にこまめにやらなければ、記事数が増えてから修正するのは大変になります。
また、特に記事タイトルは日々意識しながらブログを書くことで、キャッチーなタイトルを創造する力がつくと思いますので、ブログに限らず有益だと思います。
複数の内容を詰め込んだので長い記事になってしまいましたが、ここまで読んでくださった方、ありがとうございます。
