h1タグ

このページの記事目次 (タグ: h1タグ の検索結果)

執筆ガイドライン1、タイトルは短く

タイトルには2種類ある??


HTML的にはタイトルタグ<title></title>見出しタグ<h1>/<h1>の2種類があるようです。

タイトルタグと見出しタグは同じという意見もあるみたいです。このテンプレートを作ってくださったparuparuさんは凄い人で、当ブログでは、使い分けがなされていました。



タイトルと見出しの違い、自然検索の場合


執筆ガイドライン1-1、Titleとh1タグの違い

タイトル<title></title>は、「会社をサボりたいときは、潔くサボる! 【 外国人ライフ 】 - FC2」の部分です。検索した人に俯瞰的なサイト情報を提供できるようになっています。

見出しタグ<h1></h1>は、「潔くサボる」の部分です。検索されたキーワードが表示されています。



タイトルと見出しの違い、サイト内検索の場合


Titleとh1タグの違い(サイト内検索)

サイト内検索の場合は、タイトル<title></title>は、検索用語と関連記事の番号リスト、ブログ名で構成されていました。そのページがどのような情報を表示しているかがわかります

見出しタグ<h1></h1>は、「暇つぶし」の部分です。検索されたキーワードが表示されています。



タイトルと見出しの違い、個別記事ページの場合


個別記事の場合、タイトルタグと見出しタグは同じ情報を示していました。
なるほどね~。これまで気にしたことがなかったけれど、面白いですね。



当ブログでの執筆ガイドライン


と言っても、私にできることと言えば、記事を書くことだけで、後はテンプレートがやってくれるのでした。ただ、記事タイトルが見出しやキーワードとしても機能することがあるので、できるだけ短くスッキリさせた方がよさそうです。実際、しばらくやってみないと感触が分からない感じです。

当ブログでは、目標20文字以内、最大30文字までと言うことにします。


Template 17、h1タグは1ページに1つだけ

h1タグをページに2つつけるとエラーが出る

Markup Validation Serviceのエラーメッセージより

Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).

⇔h1タグは最高位のヘッディングだけに使うことを検討してね。(全てのh1タグは多くのスクリーンリーダーや他のツールから最高位のヘッディングとして扱われるからね。)

ネット上には、「THML5になってからは、h1タグをセクションごとに入れてもよし!」みたいなことが書いていました。しかし、実際のところh1タグを一つ増やしてみたら、こんなエラーが…
やはりページに1つが妥当なんじゃないでしょうか?

当ブログのh1タグ

テンプレート修正17-1

無知だったとはいえ、h1タグの中に、いろいろ詰め込んじゃっています。記事名+ブログ名+ロゴです。

他のプロブロガーさんたちや、Google、W3Cサイトのh1タグを除きにいったら、大抵「サイト名」をh1タグに指定しているようでした。
当ブログも素直に従っておけばいいものを、逆に素直に従うためのカスタマイズはいつでもできるからという理由で、ブログタイトルではなく、ページタイトル(FC2では、<%sub_title>だとおもう。)をh1に指定するスタイルを継続することにしました。

Template 20、h1タグ内容変更

  • h1タグは<%sub_title>のみにする。
  • ブログ名は最上部右側にh2タグで、ロゴもそちらに移動
  • ブログ紹介文はh3で最上部左側

テンプレート修正17-2

当ブログh1タグ
<section id="container_header">
<div id="feed"><a class="feed-button" href="./?xml" target="_blank" title="RSSフィード"></a></div>
<!--not_index_area--><div class="container_title"><h1><%sub_title></h1></div><!--/not_index_area-->
<!--index_area--><div class="container_title"><h1><%blog_name></h1></div><!--/index_area-->
<!--/id=container_header--></section>

当ブログh2とh3タグ
<div id="layout_top">&nbsp;</div>
<div id="container">
<header class="site_header"><h2 class="f_right"><a href="<%url>" title="ブログ名「<%blog_name>」"><%blog_name>&nbsp;<img src="http://blog-imgs-102.fc2.com/l/a/g/laggy2015/noronorofaviconmini.png" alt="のろのろ" width="15" height="12" /></a></h2><h3><%introduction></h3></header>

申し訳ありません。 お探しの記事は現在、この ユーザータグ (Keyword) を設定していない可能性があります。 右の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。