ブログのSEO（その2）

f:id:suzuka0141:20190307201239j:plain
こんばんわ！ぼくです。
日曜日の夜ですね！世の中のサラリーマンが絶望する時間帯に突入です。

ぼくも漏れなく絶望しております。
特に月曜日は役職者の会議が営業時間前からあるのでいつもより早くいかなければいけません。最悪です。

まぁでも入社2～3年目くらいまでは今よりももっと憂鬱で、日曜日の深夜0時頃になると毎週外の自販機でコーヒー（ジュース）を買って、車道と歩道の間にあるでっぱりみたいなところに座って頭抱えてましたからね。
今はだいぶ幸せですｗ

もう一つ気が重いのが今日のSEOの記事です。
前回（その1）なんて記事を書くもんだから（その2）を書かないと次へ進めません。
記事の内容も全然書いてて楽しくないので失敗したなぁという感じ。

投げやりな内容になってしまったらごめんなさい。
ブログで考えるSEO対策について2回目行ってみようと思います！元気出していこー

前回記事
retire-life.hateblo.jp

ブロガーがどうにかできるSEO

前回記事でも言いましたが、改めて。
ブログでどうこうできるSEOは多くないので
「あんまり気にしなくていいよ」

気を付けておくとちょっとクールだけど、Google様はぼくらの無知なんてお見通しですからね。ミスってても大丈夫。

HTMLのマークアップを正しいものにしよう

いきなりですよ。
HTMLってのは勉強しないとちょっとやそっとじゃわかるようにならないのでもうここでお手上げの人も多いはず。
そしてぼくはお手上げの人たちを救済できません。ぼくもお手上げ。

マークアップをきれいにするということはぼくの考えではSEOをアテにしたものではありません。
メインはアクセシビリティに対応するためです。
アクセシビリティに対応することが、マシンリーダビリティに対応することであって、SEO的にもちょっと恩恵が受けられる。そんな程度のものかなと。

そもそもHTMLについて正しく書ける人はごく稀です。
これはWebの仕事をしている人であってもそうなのです。完璧に理解している人というのはマニアなのです。
HTMLは多少おかしな書き方をしてもきれいにWebページを見せることができます。HTMLは2割くらい知ってればWebページができます。

Googleさんもその辺は理解していて、HTMLがおかしいところがあっても正しく解釈するように検索エンジンを作っているし、ミスをペナルティとして検索順位に影響を与えるようなことはないと言っています。

ブログでよく使うHTMLのタグ

ブログって文字がほとんどで、あとはたまに画像があるくらいのものです。
本当に簡単なレベルなのでこのくらいはお手上げの人も頑張って読んでもらえると嬉しいです。

<h1>：見出しです。1のところには順番に数字が入ります。
<img>：画像です。
<p>：普通のテキストです。パラグラフです。

ちょっと簡単に書きすぎたかもしれなけどまぁいいや。
3つ！3つなら覚えられそうじゃん。

見出し

もうこれ知らない人いないかもしれないですけどね、見出しです。

h1、h2、h3、h4、、、
て感じで数字が小さくなるほど小見出しになります。

で、これをつかうルールはたぶんこの2つ。

大きいものから順番に使う
番号を飛ばしてはいけない

つまり、h2はh1に包括された内容であり、h3はh2に包括された内容になります。

h1：学校に行った
h2：1時間目は国語
h3：国語の先生はぼく
h2：2時間目は英語
h4：英語の先生はキミ
h1：放課後は仕事に行くよ

こんな感じ？
検索エンジンとしてはh1から重要なものと認識します。
なので記事のタイトルになるようなh1というのはSEOを意識すると重要なんですね。検索流入を狙いたいキーワードを見出しに混ぜ込みましょう。

めちゃくちゃ簡単なんですけど、ここで問題があります。はてなブログトラップです。

はてなブログではブログタイトル「忙殺逃避」と記事タイトル「ブログのSEO（その2）」が両方ともh1となっています。
これは問題ありません。かつてはh1は1ページに一個だけにしないといけないという噂がありましたが大丈夫です。

続いて、各記事の中でh2に当たる見出しを見ると...
おや？無いですか？h3になっていませんか？

はてなブログでは編集モードがいくつか用意されていますが、たぶんどの編集モードでも下記のような便利機能的なものがありますよね。
一般的にこれをウィジウィグエディタといいます。WYSIWYGエディタです。（What You See Is What You Get）

f:id:suzuka0141:20190310185708j:plain

はてなブログでこの「見出し」というところのプルダウンを押して、h2のつもりで「大見出し」を選択すると「###」と入力されます。
HTMLでは<h3\>ほにゃほにゃ</h3\>となります。

そうなんです。h3なんです。h2がないんですね。
はてなブログに用意されたWISYWIGで見出しを入れようと思うとh2をどうやっても入れられません。
「番号を飛ばしてはいけない」というルールを破ってしまいますね。

なのでh2見出しを入力するときは皆さん自分で「##」と書くようにしましょう。

画像

画像ははてなブログの編集モードにあるものを使って特に問題ないです。

[f:id:XXXXXX:XXXXXXXX:plain]
こんな感じの記載になると思います。HTMLになると下記のような感じですね。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/XXXXX/XXXXXX/XXXXX.jpg"
alt="f:id:XXXXX:XXXXXX:plain" 
title="f:id:suzuka0141:20190308220113j:plain" class="hatena-fotolife" itemprop="image">

ちょっと嫌だなぁと思うところが1点あるのですが、面倒ですしSEOにはほとんど影響がないと思うので無視です。

嫌だなぁというのは、altというところにはてなフォトライフにアップされた時に採番された画像の番号や自分のアカウントIDが入ってしまっているところです。
本来altは画像が何を表しているのか、画像が見えない人にテキストで説明するためのものなのでこんなものが入るはずじゃあないんです。せめて空っぽが良いのですが。無視しましょう(笑)

パラグラフ

通常のテキスト文章ですね。何か気を付ける点があるとすれば「改行」です。

改行は普通にエンターキーでぽんぽんと入れていると思うのですが、HTMLでは
となります。
これが1つだと本来の改行の意味で問題ないのですが、スペースを空けるためだけdに
を連続して何個も入れるというのは本来のHTMLとしてはNGです。

1つの文章（パラグラフ）の中で、改行の意味で
を使うのは当然正しい使い方なのですが、あくまで改行なので余白（という装飾）が必要なのであればそれはスタイルシートでしっかり定義してあげるべきなのです。
Googleもこれを検索順位にどう反映させてやろうということは考えないと思いますけど、1つのつながった文章の中の改行なのか、ただの余白用の改行なのかというのは判断してくれないわけです。

ちなみにぼくのブログは

こうやって隙間があるときは改行ではなく

スタイルシートで

に広めのマージンを取ってあげてます。