解決済
Hタグ(見出しタグ)をSEOに有利になるようにHTMLの論理構造に基づいて使用したいのですが、何かいいアドバイス(出来れば具体的に)をいただけると助かります。<(_ _)>
ライブドアブログの場合だとh2がデフォルトで
<h2 class="date"><$ArticleDate$></h2>
のように指定されてますが
あまりSEOに効果的でないと聞き
有効に使用するにはどのように修正したらいいでしょうか？
その場合、CSS、トップページ、個別記事ページ、カテゴリアーカイブ、月別アーカイブとやはり全て修正が必要ですよね？
おそらく現在の状態ですと
h1がブログタイトル
h2が日付
h3が記事タイトル
になっていると思いますが...
自分としては、
h1をブログタイトル
h2を記事タイトル
というようにしたいのですが、
あまりSEOには有効ではないでしょうか？
<titlt>～</title>にブログタイトルが設定されていると思いますが、<h1>に記載する情報を同じにすると、SEOに更に効果が期待できると聞いたこともあります。それでh1にはブログタイトルを指定するのがよいのではと思った次第です。
デザインはシンプルのZen Styleを使用してます。
ほとんどhタグについてはデフォルトの状態でさわってないと思います。
上記の内容をもとにアドバイスをいただけますと助かります。
よろしくお願いします<(_ _)>
自分のブログです↓(アフィリエイトのブログですみません..)
回答(2)
2.
「見出しタグ<h1>～<h3>と段落タグ<p>を使って階層構造を明確にする」という点に注意を払った方が良いですね。
<h1>ブログタイトル</h1> <p>ブログの説明</p> <h2>記事1 見出し</h2> <p>文章</p> <h3>小見出し1-1</h3> <p>文章</p> <h3>小見出し1-2</h3> <p>文章</p> <h2>記事2 見出し</h2> <p>文章</p> <h3>小見出し1-1</h3> <p>文章</p> <h3>小見出し1-2</h3> <p>文章</p>
これを元に、それぞれの見出しタグ内にキーワードを埋め込んで、
その下の段落は見出しに見合った内容を記述します。
更に上の階層の見出しには下の階層のキーワードを含むようにするのが基本です。
ライブドアブログは文書構造よりも表示構造に注意を払っているように見受けられるので、
おっしゃる通りh2タグの変更は効果があると思います。
これからすると、
h3タグは記事内の小見出しに使うのが良いのと、
段落タグを使って記事を書く必要があるので、
SEOを気にするならシンプルエディタでhtmlを使って
記事を書くのが必須だと思います。
因みに見出しタグはh1が最も上位表示に有効という通説はありますが、
実際には必ずしもそうではないようです。
imqさん。また、しばらく放置してしまってました..
分かりにくい質問に丁寧に対応してくださってありがとうございましたo(*^▽^*)o
本当にいろいろと勉強になりました。
1.
h1の使いすぎには注意ですが、
記事タイトルにh1なら
間違った使い方ではありませんよ。
根本的にページランクが低いとGoogleではアウトですかね。
コメント(12)
imqさま、いつも丁寧にありがとうございます（*＾-＾*） 実は、この度こちらの方のサイト↓を参照してナレッジに投稿しました。
http://blog.pekebatu.com/archives/50418718.html
それで１つお聞きしたいことがありまして、
もし、このサイトで紹介されている通り修正するとしたら、自分の場合だとCSS内のh1はそのままで
h2.date{
text-align:right;
font-size:12px;
font-weight:normal;
}
と
h3.title{
line-height:137%;
font-size:17px;
font-weight:bold;
color:#e97d37;
border:solid #330000;
border-width:0px 0px 0px 0px;
background:#e6ddf5;
}
を
.date{
text-align:right;
font-size:12px;
font-weight:normal;
}
h2.title{
line-height:137%;
font-size:17px;
font-weight:bold;
color:#e97d37;
border:solid #330000;
border-width:0px 0px 0px 0px;
background:#e6ddf5;
}
次コメントへ続く↓
のようにするんでしょうか？
自分としてはh1がブログタイトル、h2が記事タイトルのようにしたいと思っているんですが.. ただ実際のところHタグがCSS、トップページ、個別記事ページ、カテゴリアーカイブ、月別アーカイブのそれぞれでどういう関係で機能しているのかがよく理解できていません... (_ _。)
参照したサイトの例だと個別記事ページのh1を記事タイトルに指定するように紹介されていましたが...
サイトの管理者のかたに相談したほうがいいでしょうか..(´・c_･` )？
AQさんのブログですね！
とても信頼できるブログだと思いますが、
とりわけSEOについては上記のような一次ソース（自分で実証したデータ）を
公開しているサイトをお手本にするのが良いかと思います。
CSSの方ですが、いっそのことh2・h3の部分はとってしまった方が
タグに関わらずクラス名のみでフレキシブルに対応できるのでおすすめです。
h2.date → .date h3.title → .title
まめ大福さんのブログの場合、
h3が個別記事のトラックバックやコメントに使われていますね。
HTMLソースをh3からdivに直してCSSを以下のように修正します。
h3.trackbackurlttl
,h3.commenthead
,h3.trackbackhead
,h3.takecommenthead{
font-size:14px;
color:#e97d37;
}
を.trackbackurlttl
,.commenthead
,.trackbackhead
,.takecommenthead{
font-size:14px;
color:#e97d37;
margin:0;
padding:0;
}
にimqさま、ありがとうございます。(=^ェ^=)
おかげさまで、なんとなくHタグをどうやって使用すればよいのかが分かってきました。
ただ、すいません…念のためお聞きしたいのですが、imqさまがおすすめしてくださったCSSの修正については、AQさまのブログで紹介されていた方法でHTMLソースを修正した上で行うということですよね？
あと、疑問なのが自分の場合
個別記事のHTMLソースで
<h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1>
の"h1"を"div"にかえて、
<h3 class="title"><$ArticleTitle ESCAPE$><IfArticleRating><$ArticleRatingIcon$></IfArticleRating></h3>
の"h3"を"h1"にかえた場合、
CSSが
h1
.blogtitle{
width:785px;
margin:0 0 0 10px auto;
padding:15px 0 2px 0;
text-align:left;
font-size:22px;
}
のように指定されているため、 続く↓
ブラウザ上で個別記事のページを開いたときに記事タイトルの文字が大きく(22px)なってしまうということはないんでしょうか？
いつもわかりにくい質問ですいません…
実際試してみたほうが早いですかね(´^c_,^` ;)
それとあともう１つだけ…<(_ _)>ホントすいません。
段落タグ<p>は、<h3>小見出し1-1</h3>をつけなければ投稿するときに<p>を使用しなくても大丈夫でしょうか…？ 今までシンプルエディタで投稿していて全く段落タグ<p>は使用していませんでしたので今まで通り投稿するなら<h1>と<h2>だけ意識すればいいのかなと…
難しいですね…f＾_＾；
錯綜してしまうのでそれぞれ分けて考えてみますね。
以下の通りなら文字の大きさも気にせずにカスタマイズできます。
まずCSSですが、
h1.blogtitleで指定されているものは、h1タグの中でもクラスにblogtitleが指定されている物のみに適用されるスタイルです。
<h1 class="blogtitle">…</h1>
現状のh1が無い場合、
.blogtitleこれはタグに関わらずクラスがblogtitleであれば適用されます。
たとえば以下は全て有効です。
<h1 class="blogtitle">…</h1> <div class="blogtitle">…</div> <p class="blogtitle">…</p>こうしておくとHTMLの方でh1とdivを入れ替えてもスタイルが変わらなくなります。
つまり、HTMLを変更するたびにCSSにも手を入れる手間が省ける訳です。
…ということを踏まえて、
h2.titleと、敢えてh2を付ける必要はないです。
.tltleのままで大丈夫です。
HTMLの方ですが、
基本的にはほぼそれに沿った形で良いと思いますが、
どのページでもブログタイトルにh1タグを適用するのがおすすめです。
とはいうものの全ページで同じというのはあまり良くないので、
個別記事ページなら記事タイトル
<h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a> : <$ArticleTitle ESCAPE$></h1>月間アーカイブなら年月
<h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a> : <$MonthLabel ESCAPE$></h1>カテゴリアーカイブならカテゴリ名
<h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a> : <$CategoryName ESCAPE$></h1>を、それぞれ追加するのが良いですね。
あとは段落タグですね。
見出しタグよりも軽視されがちですが、
ロボットは「段落の中にページの内容が記載されている」
という判断をするので、これが結構重要なんです。
要は「このページはこういう内容です」というアピールですね。
視覚的に似たようなことができる
改行<br />やブロック<div>…</div>とは違って、
文章そのものの重み付けをするという点でSEO的に欠かせません。
具体的にはページの内容を
個人プロフィールや広告、外部リンク、その他諸々と
区別するのに段落タグが有効です。
とりあえずまめ大福さんのブログでできることを考えると
説明を段落タグで囲むのはどうでしょう。
<div class="description"><$BlogDescription$></div>を
<p class="description"><$BlogDescription$></p>に。
表示が崩れる場合はdivの中にpを入れてみてください。
<div class="description"><p><$BlogDescription$></p></div>
ちょっと小難しくなってしまいましたが、
自分のペースでできるところからやってみてくださいね!
imqさん、ありがとうございますo(*^▽^*)o
実際にいろいろと試してみたのですが、
ブログの構造(見栄え)が大きく変わってしまいまして
結局断念し元通りのままに...
AQ様のブログの通りHTMLソースを修正しCSSもimqさんのアドバイス通りやってみると、
サイドバーにあるプラグインが記事の一番下に移動してしまいその他にも諸々ありまして..（･´ω`・）
また、今回の件とは関係ないのですが、
実は自分のパソコンが古く
Windows Updateのインストールをした結果
ブラウザへの反映のされ方が変わりました。↓
ブログタイトルのある背景画像(最上部のバナー)の色が白(CSSで指定したものが反映されない状態)になり、
プラグインを囲んだ線が上下接してしまいプラグイン内の文字も大きくなりました。
見にくい..(・～・) ブラウザはIE6です。
コメント↓続く
今まで自分の目に見えていたものがてっきり他の人のPCにも見えているものだと思っていました..
多分今の状態がほとんどの人のブラウザに反映されているんじゃないかと..(´・c_･` )
またナレッジで質問しなきゃいけませんね（^-^;）
もっと勉強します。
