読者です 読者をやめる 読者になる 読者になる

おきがるみがる

お気軽&身軽に生活・仕事・趣味を楽しむ雑記ブログです。一応スナップ写真がメインです。

【はてなブログのSEO】見出しH2タグと画像のALT属性について

f:id:shimehitsu14:20170226092041j:plain

商店街の中の薬局のポップ。「5分ちょいでできる健康チェック」があるとのこと。

モノクロ写真だと少し怪しさを感じちゃいますねw 無料らしいのでちょっと気になる方はお試しあれ。


運営しているブログが検索エンジンで上位に表示されやすくする設定や記事の書き方をSEO対策と呼ばれています。

SEO対策には様々な手法があり、時代によって変化し続けていますが、

  • 見出しタグを適切に使う
  • 画像にALT属性を追加する

という細かな配慮がSEO対策の一部になっています。

ところが、はてなブログでは仕様上、この2つの事項について一筋縄では対策できなくなっています。

これらのSEO対策の意味と、はてなブログでの仕様との対策方法、そしてそれを採用するか否かを僕なりに考えてまとめました。

見出しタグでSEO対策

見出しとは、まさにこの文章のすぐ上にある「見出しタグでSEO対策」が見出しです。「ここからこのテーマについて書いてるよ〜」という目印ですね。

そして見出しはそのまま目次にすることができます。このブログでは全記事に見出しを挿入し、最初の見出し直前に目次(見出し一覧)を設けています。

なぜ見出しをつけるのかと言いますと、読む人からすれば「どこに何が書いてあるのか」がわかりやすく、且つ「言いたいことは何なのか」がハッキリします。

そして検索エンジンにも「何について書かれているのか、この記事が伝えたいことは何なのか」を教えることができますから、SEO対策に有効と言われています。

見出しタグの使い方

見出しタグはH1〜H6で構成されます。HとはHeadlineの頭文字です。HourとかHentaiではありません。

数字が小さいほど大きな見出しで重要度が高いです。そして数字を大きくする際に順番を抜かしてはいけないというルールがあります。

例えば「H1→H3→H4」とH3以降を使うならばH2を抜かしてはダメ。「H1→H2→H3→H4」と使うのが正しいです。

逆走したり、複数回使うのはOKです。「H1→H2→H2→H3→H3→H4→H2→H2」みたいな感じでもOKです。この時、H3はH2を掘り下げる見出し、H4はH3を掘り下げる見出しという位置付けになります。

上の「見出しタグの使い方」という見出しはH3で設定しています。「見出しタグでSEO対策」というH2をさらに説明するする見出しとして使っています。

この記事ではもう1つH2タグを使っており、記事の後半にある「画像のALT属性でSEO対策」という見出しです。見出しタグから画像のALT属性に関する話題に変わったところで、H2タグで見出しを

ただし、H1だけは記事の中で1回しか使えないというルールがあります。多くのブログでは記事タイトルにH1の見出しが使われておりますので、H2以降を使って見出しをつけていくことになります。

はてなブログのエディターではH2が存在しない

f:id:shimehitsu14:20170222190917p:plain

はてなブログのエディターには見出しをつける機能がついています。

「大見出し」「中見出し」「小見出し」とあるのですが、あろうことか、大見出しはH3、中見出しはH4、小見出しはH5と、H2が存在していません。

一方で、記事タイトルはH1の見出しが使われていますので、「順番を抜かすな」というルールを見事に破っています。

どうしてこんな仕様なのか調べてみると、はてなブログの前身であるはてなダイアリーの仕様に準拠した結果とのこと。

見出しがSEO対策に一役買っているというのは周知の事実なのにも関わらず、この仕様を変えないということは、天下のはてなブログ様は大した影響が無いと考えているのでしょうか。

でもH2タグを抜かしてH3からってのは少し気持ち悪いですし、これのせいで本来されるべき評価をされないというのは歯がゆいですよね。対策はあるのでしょうか。

H2タグは手打ちでどうぞ

エディター上ではH3タグからしか用意されていませんが、手打ちであればH2タグは使えますし、スタイルシートが設定されていれば見出しのデザインも変わります。

この記事を含め、このブログで使っているH2タグはすべて手打ちで入力しています。

はてなブログのエディターで「見たままモード」を使っている人は、H2タグを使う時だけHTMLに切り替えてタグを打ってください。

「そんなのめんどくさいわ!!」

って方は、今日からMarkdownモードで記事を書きましょう。慣れると圧倒的に楽ですよ!

Markdownなら見出しの手打ちも楽々

HTMLでH2タグを打とうとすると、

<h2>H2の見出し</h2>

9文字タイプしなければなりません。見出しの多い記事だとこれだけで膨大な作業ですし、見出しのレベルを変える時は2ヶ所訂正しないといけません。めんどー!

しかし、Markdownであれば、

##H2の見出し

で済みます。見出しのレベルの数だけ#を頭にくっつければOK。簡単ですね〜!

これのいいところは、スマホで記事を編集する時もストレスが少ないこと。#を複数打つなんてお茶の子さいさいですからね。

Markdownの導入は新しく覚えることが多いかもしれませんが、そんなに難しいものではありませんし、他のサービスでも採用されているので応用することができますよ!

タイトル下の「ブログの説明」にもH2タグが……

結構見出しのデザインって気になりますよね。僕が今使っているこのはてなブログのデザインテーマは見出しのデザインで選びました。

実は他にも気に入ったデザインテーマがあったのですが、見出しのデザインがダサかったのです。

そこでH2タグのCSSを書き換えて好みのデザインにしたところ、なぜかブログタイトル下にある「ブログの説明」のデザインが変わりました。

「???」と混乱。どうやらブログの説明にもH2タグが適用されているようです。

「どうしてそんなところにH2タグがあるのだ?」とか「もしかしてブログタイトルはH1タグなのか?」という疑問はさておき、H2タグを記事中で使いたい人はデザインの制約を受けることになりますので注意です。

あるいは記事中のH2タグだけデザインを変えることができれば問題ありませんがね。その辺は僕も研究不足です。

画像のALT属性でSEO対策

画像を記事内に貼り付ける場合は、ALT属性を設定するとSEOに効果があると言われています。

コンピュータの進歩はめざましいものがありますが、画像に何が描かれたり写っているかを完璧には理解できません。

そこでALT属性を設定することで、貼り付けられた画像がどんな画像なのかをコンピュータ(検索エンジン)に説明することができます。ゆえに画像検索にも表示されやすくなることでしょう。

また、コンピュータのみならず人に対しても優しく、画像が表示されない場合の代替テキストとして使われたり、目の不自由な人が使用する音声読み上げ機能ではALTタグの内容が読み上げられます。

「画像の代わりとなるテキスト」という位置付けでってことで、ALTは「Altanate(オルタネイト)」が語源と考えていいでしょう。つまり、読みは「アルト」ではなく「オルト」でしょう。ちなみにキーボードのALTキーも「オルトキー」ですよ。

ALTタグの使い方

例えば、犬の画像を貼り付ける場合、HTML上では、

<img src="dog.jpg" alt="犬">

と、画像タグの中にALT属性を挿入して「犬」と画像を説明してやります。また、「どんな犬の画像なのか」を説明すべく、より具体的且つシンプルに説明すると良いらしいです。

他には画像のURLも内容に適したものにするのがSEO的には効果があるそうですね。TITLE属性もありますが、画像ではALT属性の方が優先される傾向にあるようです。

はてな記法ではALT属性が設定できない

はてなブログで画像を投稿すると、はてなフォトライフにアップロードされ、記事にははてな記法というはてなブログ独自の記法で画像タグが挿入されます。

とても簡単にアップロードと記事への挿入ができちゃうのですが、URLが数字の羅列(一応アップロードした年月日がベースだけどわかりにくい)になる上に、ALT属性が設定できません。

このままでは検索エンジンや読者のみならず、記事を書いている本人も「あれ、これ何の画像だ?」となってしまいます。僕自身、時々何の画像かわからなくなってプレビュー画面で確認することがよくあります。

URLについては対策がありませんが、ALT属性については有志によって設定できる手段が発明されているようです。

はてなブログでALTタグの設定方法

www.aritai.net

参考にしたのはこちらのブログです。はてなブログでALTタグを設定する方法は2通りあるようです。

はてなフォトライフ2HTML

tar.blogru.me

はてなフォトライフ2HTMLでは、ブックマークレットという、ブラウザのブックマークから実行するプログラムを利用してALT属性を挿入します。

画像をアップロードしてから、はてなフォトライフにアクセスし、このブックマークレットを実行すると画像の挿入タグが自動生成されます。

生成されたタグはHTMLでして、はてな記法では設定できないALT属性もHTMLであれば入力できます。これを記事中に貼り付けて、ALT属性を入力するという手順ですね。

はてなフォトライフ2HTMLは、はてなフォトライフにアップされた画像のURLを抽出し、HTMLタグで生成するという仕組みです。

ただ、おそらくこの機能はパソコンでしか利用できませんね。それにはてなフォトライフにアクセスするのが少し面倒です。画像の数が多いと記事を書く時間が長くなってしまいます。

主にパソコンで記事を書く人で、投稿する画像が少ない、あるいはALT属性を設定する画像を限定するという人であれば使えるツールだと思います。

はてブロimageTitle

psn.hatenablog.jp

はてブロimageTitleは、はてなフォトライフ2HTMLよりも簡単にALT属性の設定ができそうです。

Google Chromeの拡張機能を利用しており、こいつを入れるだけで、はてなブログの通常のエディター内でALT属性を設定できるようです。

はてなフォトライフ2HTMLと比較して、エディター内で作業が完結するのはとても良いのですが、拡張機能をインストールしたGoogle Chromeでしか作業ができないのがマイナスですね。

環境次第でALT属性は使えるが……

はてなフォトライフ2HTMLとはてブロimageTitleは、いずれも有志による非公式な技であり、ブラウザなど環境次第で使えるものでした。

画像のALT属性はSEO対策の為には積極的に取り入れたいものの、僕は2つとも利用を見送りました。

その理由は利用できる環境が限られているからです。僕はスマホや自宅以外のパソコンから記事を編集することも想定しているので、自宅のパソコンからでないと作業を完結できないというのは避けたいのです。

ALT属性は絶対に必要かと言われると僕はそうは思いません。SEOに関して言えば、ALT属性を設定しなくても画像検索に表示されます。音声読み上げ機能を使って閲覧されている人には申し訳ありませんが、はてなブログがALT属性を必要と判断して実装してくれるのを僕は待ちます。

おわりに

SEO対策はついつい事務的な作業だと思いこんでしまいますが、「こうすれば読みやすいな」というところをしっかり抑えれば検索エンジンの評価は自然と高くなります。

見出しもALT属性も、読みやすさを補う1つの要素に過ぎません。これらを抑えてもSEOが完璧とは言い切れませんし、逆にこうした細かい努力の積み重ねが成果となって現れることもあり得ます。

制限がある中で、できる限りのSEO対策をしていきたいですね。

それにしても、H2タグとALT属性についてはブロガー界隈ではかなり有名なSEO対策のはずなのに、はてなブログは結構無頓着ですね。

はてなブログはSEOに強いと言われているブログサービスですし、その自負は当然あるでしょう。そんな会社がわざわざ見過ごしているのには何か理由があるのでしょうか。気になります!

2/27追記 ALT属性公式仕様になったようです!

この記事の投稿後、はてなブックマークに寄せられたコメントで知ったのですが、2/24からの仕様変更でALT属性を追加できるようになったようです! 教えて頂きありがとうございました^^

staff.hatenablog.com

この記事を書いている段階で変わっていたのですね。タイミング良いのやら悪いのやらw

[f:id:はてなID:画像のファイル名:plain:title=TITLE属性:alt=ALT属性]

と、画像投稿後に追記することでOK。指定しなければ各属性は画像のファイル名になるようですが、「=」の後ろに何も書かなければ空欄で返すことができるようです。

はてなフォトライフにアップされた画像のファイル名は数字の羅列でSEO的によろしくなさそうなので、せめて空欄にしてやることで何か報われるかもしれませんね。

それにしても、画像投稿数が多い人はこれから全部修正ですかね? 大変ですな〜。僕もぼちぼち直していきます。

そんなわけではてなブログにおけるALT属性問題は一件落着です。ただ、ツールを作ってくれた有志の方々の役目が終わってしまって何だか切ないですね。