Seesaaブログの見出しタグ(h1,h2)をカスタマイズ　SEO対策に効果あり!?

2015/02/11 2015/08/21

検索エンジンは見出しタグ、特にh1の項目を重要視して、インデックスを作成しているそうです。
人には見た目で見出し等をアピールできますが、検索エンジンには、強調したい項目に正しくHTMLタグをつけることで伝えたい情報をアピールできます(SEO)。

Seesaaブログはデフォルトでは見出しタグが結構適当につけられているため、よりよい構造にする方法をご紹介します。

Seesaaブログの見出しタグと変更の方針

変更するページはトップページ、記事ページ、カテゴリページ、タグページです。
検索ページはリンクがなく、検索エンジンの対象外なので特に変更しません。

h1タグ

h1タグは見出しタグの中でも、トップレベルのタグでSEOにおいても重要だと言われています。
ここにはタイトルに次いで強調したいことを入れるべき(タイトルと同じでもかまわないそうです)ですが、Seesaaブログでのh1タグは全てのページでブログのタイトルとなっています。

トップページはブログタイトルがh1で問題ありませんが、それ以外は各ページで強調したい事は違っているはずです。
今回の変更ではh1タグを記事ページでは記事のタイトル、カテゴリページではカテゴリ名、タグページではタグ名、過去ログページでは年月に変更します。

h2タグ

Seesaaブログではなぜか全ページで記事の日付がh2になっているので、削除します。
h2タグ以降は記事本文中の見出しに使います。
h1ではない、記事ページ以外の記事タイトルもh2に変更します。

h3タグ

Seesaaブログでは記事タイトルがh3になっています。
上記変更で記事タイトルは記事ページではh1、それ以外ではh2になります。

変更した箇所

ブログタイトル(ブログ名)、記事日付、記事タイトル、カテゴリ名、過去ログ名、タグ名の見出しを変更しました。
ブログタイトル以外は基本的には記事HTMLの編集ですが、タグページは例外で全体HTMLを編集する必要があります。

ブログタイトル

Seesaaブログでは、ブログタイトルは全ページでh1タグになっています。
h1タグは各ページで変更したいのでトップページ以外はdivに変更します。

デフォルトではブログタイトルはデザイン->コンテンツのヘッダー部(content_header)のブログタイトルというパーツに配置されています。
トップ、タグ、検索ページが同一でいいのならば、表示するページが異なるパーツを複数配置すればいいのですが、それではトップページとタグページを使い分けられないので、全体のHTMLを編集します。

コンテンツにあるブログタイトルは非表示にして、ハイライトされている部分を全体HTMLの<div id=”banner”>の下に挿入します。

<div id="banner">
<%if page_name eq 'index' %>
<h1 class="blogtitle"><a href="<% blog.page_url %>" accesskey="1"><% blog.title %></a></h1>
<% else %>
<div class="blogtitle"><a href="<% blog.page_url %>" accesskey="1"><% blog.title %></a></div>
<% /if %>
<% content_header %>
</div>

SeesaaのCSSではh1を指定して、ブログタイトルのデザインを決めているのでそのままではデザインが変わってしまいます。
そのためclassとしてblogtitleを指定しています。
デザイン設定からCSSを編集し、使用しているCSSでh1を指定してる箇所があれば、それをclass名である.blogtitleへ変更します。

記事の日付

デフォルトでは記事の日付がh2になっていますが、特に日付を見出しにしたくはないのでdivに変更します。
タグページの日付はh2がついていないので、記事HTMLのみの編集です。太字の部分を変更します。

<% if:with_date %> <div class="date"> <% article.createstamp | date_format("%Y年%m月%d日") %> </div>
<% /if %>
<div class="blogbody">

CSSもh2の指定の箇所があれば、class名の.dateの指定へ変更します。

記事のタイトル

記事のタイトルはh3になっていますが、これを記事ページではh1、その他のページではh2に変更します。
記事HTMLの<div class=”blogbody”>の直下をハイライトのように変更します。

<div　class="blogbody">

<% if:page_name eq 'article' -%>
<h1 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h1>
<% else -%>
<h2 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h2>
<% /if -%>

タグページには見出しがついていないので、これにはh2を追加します。

全体HTMLの以下の部分に太字のタグを挿入します。

<% loop:list_data -%>
<div class="tag-article">
<div class="tag-article-title"><a href="<% article.page_url %>"><h2><% article.subject %></h2></a>&nbsp;<span class="tag-article-posted">[<% article.createstamp | date_format("%Y/%m/%d %H:%M") %>]</span></div>

CSSのh3の指定の箇所は.titleへと変更します。

カテゴリ名と過去ログ月

カテゴリページには”カテゴリ:カテゴリ名の記事”という項目を、過去ログページには”xx年xx月の記事”という項目をそれぞれ追加し、h1に指定します。
記事HTMLの<% loop:list_article -%>の上にハイライトの部分を追加します。

<% if:page_name eq 'category' -%>
<h1>カテゴリ：<% category.name -%>の記事</h1>
<% /if -%>
<% if:page_name eq 'archive' -%>
<% if:archive_page_name eq 'month' -%>
<h1><% archive.createstamp | date_format("%Y年%m月") %>の記事</h1>
<% /if -%>
<% /if -%>
<% loop:list_article -%>

もともとない項目なので、ここのデザインを変更する場合、CSSにも項目を追加する必要があります。
blogtitleとtitleのみがh1なので以下のような指定の仕方でカテゴリ名も年月も同じデザインにできます。
h1:not(.blogtitle):not(.title)

カテゴリと過去ログで別のデザインにする場合はclass名を指定する必要があります。

タグ名

タグのページには”タグ/タグ名”という項目があるので、これをh1に指定します。これは全体HTMLの以下の太字のタグを挿入します。

<% if:page_name eq 'tag' -%>
<div class="tag">
<% if:tag %><h1><div class="tag-title">タグ&nbsp;/&nbsp;<% tag.word | html %></h1></div><% /if -%>

CSS変更のまとめ

h1 -> .blogtitle
h2 -> .date
h3 -> .title
カテゴリ、過去ログページ用にh1:not(.blogtitle):not(.title)を追加(クラスを追加してそれに対して指定も可)
記事ページ用h2以降のタグにCSSを指定する場合はh2:not(.blogtitle):not(.title)もしくは.text h2などで指定

変更したHTML

今回変更したHTMLを以下に公開しています。revisionを見ると変更した箇所がわかりやすいかと思います。

Seesaaブログの見出しタグ(h1,h2)をカスタマイズ SEO対策に効果あり!?