忍者ブログのカスタマイズに挑戦！
タイトルタグ（<title>）はSEOにおいて最重要項目といっても過言ではありません。ブラウザの左最上部に表示されれ、検索結果時にはタイトルとして表示されます。
ここにどのようなキーワードを埋め込むかで検索結果は変わってきます。
特にブログサービスで注意したいのは、個別記事のタイトルです。トップページは通常ブログのタイトルがそのまま反映されます。
しかし、個別ページのタイトルはテンプレートにより異なりますが、よくあるパターンとして
・ブログタイトル：個別タイトル
・個別タイトル：ブログタイトル
のようにブログタイトルと個別タイトルを並列させるパターンが多いです。
ブログタイトルが短ければそんなに問題はありませんが、長いと個別タイトルはさらにながくなり、狙ったキーワードの出現率も落ちてしまいます。
本来、検索エンジン側ではトップページ、個別ページの認識はありません。単純に被リンクが多く集まるトップページが検索にヒットしやすいだけです。
そこで個別ページも直接ヒットさせるためにタイトルタグの表示方法をカスタマイズしてやります。
このテンプレートのタイトルタグのソースは
▼元ソース
・ブログタイトル 記事タイトル
<title><!--$g_title--> <!--$g_page_title--></title>
個別ページのタイトルタグは「ブログタイトル 記事タイトル」となっていますが、これを「記事タイトル」のみにしたいと思います。
▼カスタマイズソース
・記事タイトル
<title><!--$g_page_title--><!--if_page--><!--$g_title--><!--/if_page--></title>
<!--$g_page_title-->が記事タイトルの独自タグ、<!--$g_title-->がブログタイトルの独自タグとなっています。
ポイントは記事タイトルに検索キーワードをきちんと埋め込む、各ページ適切なタイトルをつけることが大切です。
これにより日記系の何でもありのブログでも各ページ適切なタイトルをつけることにより、個別ページにもヒットしやすくなります。
ここにどのようなキーワードを埋め込むかで検索結果は変わってきます。
特にブログサービスで注意したいのは、個別記事のタイトルです。トップページは通常ブログのタイトルがそのまま反映されます。
しかし、個別ページのタイトルはテンプレートにより異なりますが、よくあるパターンとして
・ブログタイトル：個別タイトル
・個別タイトル：ブログタイトル
のようにブログタイトルと個別タイトルを並列させるパターンが多いです。
ブログタイトルが短ければそんなに問題はありませんが、長いと個別タイトルはさらにながくなり、狙ったキーワードの出現率も落ちてしまいます。
本来、検索エンジン側ではトップページ、個別ページの認識はありません。単純に被リンクが多く集まるトップページが検索にヒットしやすいだけです。
そこで個別ページも直接ヒットさせるためにタイトルタグの表示方法をカスタマイズしてやります。
このテンプレートのタイトルタグのソースは
▼元ソース
・ブログタイトル 記事タイトル
<title><!--$g_title--> <!--$g_page_title--></title>
個別ページのタイトルタグは「ブログタイトル 記事タイトル」となっていますが、これを「記事タイトル」のみにしたいと思います。
▼カスタマイズソース
・記事タイトル
<title><!--$g_page_title--><!--if_page--><!--$g_title--><!--/if_page--></title>
<!--$g_page_title-->が記事タイトルの独自タグ、<!--$g_title-->がブログタイトルの独自タグとなっています。
ポイントは記事タイトルに検索キーワードをきちんと埋め込む、各ページ適切なタイトルをつけることが大切です。
これにより日記系の何でもありのブログでも各ページ適切なタイトルをつけることにより、個別ページにもヒットしやすくなります。
PR
まずは見出しタグの設定から。
ブログのタイトルを<h1>に指定します。
▼元ソース
<div id="TopTitle">
<a href="<!--$g_url-->"><span class="TopTitleFont"><!--$g_title--></span></a>
</div>
ブログのタイトル部分を<h1>でくくり、spanでフォント指定されていますがこれを削除します。
▼カスタマイズ・ソース
<div id="TopTitle">
<h1><a href="<!--$g_url-->"><!--$g_title--></a></h1>
</div>
次に記事タイトルを<h2>に指定します。
▼元ソース
<div class="EntryTitle">
<a href="<!--$entry_link-->"><span class="EntryTitleFont"><!--$entry_title--></span></a>
</div>
記事のタイトルを元ソースのclass指定を流用し、<h2 class="EntryTitleFont">～<h2>でくくり、spanタグを削除します。
▼カスタマイズ・ソース
<div class="EntryTitle">
<h2 class="EntryTitleFont"><a href="<!--$entry_link-->"><!--$entry_title--></a>
</div>
こえで1度テンプレートを保存しますが、忍者ブログの場合はテンプレート保存時に保存方法を選べますので、念のために「新規保存」にチェックを入れ、テンプレートの名称を「GRAY01（任意の名称）」とでもして「送信」してください。
保存できたらブログを確認してください。
レイアウトが崩れていると思いますので、スタイルシートもカスタマイズします。
ブログタイトルのスタイルシート
■元ソース
/*ページタイトル文字色の設定*/
.TopTitleFont { font-size: 16px; font-weight: bold; text-decoration: none; margin-top: 200px; }
.TopTitleFontをh1に換え、margi-top: 200pxを0pxにします。
■カスタマイズ・ソース
/*ページタイトル文字色の設定*/
h1 { font-size: 16px; font-weight: bold; text-decoration: none; margin-top: 0px; }
※<h2>に指定した記事タイトルはclass="EntryTitleFont"を流用したのでそのままでOKです。
これを保存してやれば、ほぼ元デザインと同じレイアウトになります。
以上、見出しタグの設定でした！
ブログのタイトルを<h1>に指定します。
▼元ソース
<div id="TopTitle">
<a href="<!--$g_url-->"><span class="TopTitleFont"><!--$g_title--></span></a>
</div>
ブログのタイトル部分を<h1>でくくり、spanでフォント指定されていますがこれを削除します。
▼カスタマイズ・ソース
<div id="TopTitle">
<h1><a href="<!--$g_url-->"><!--$g_title--></a></h1>
</div>
次に記事タイトルを<h2>に指定します。
▼元ソース
<div class="EntryTitle">
<a href="<!--$entry_link-->"><span class="EntryTitleFont"><!--$entry_title--></span></a>
</div>
記事のタイトルを元ソースのclass指定を流用し、<h2 class="EntryTitleFont">～<h2>でくくり、spanタグを削除します。
▼カスタマイズ・ソース
<div class="EntryTitle">
<h2 class="EntryTitleFont"><a href="<!--$entry_link-->"><!--$entry_title--></a>
</div>
こえで1度テンプレートを保存しますが、忍者ブログの場合はテンプレート保存時に保存方法を選べますので、念のために「新規保存」にチェックを入れ、テンプレートの名称を「GRAY01（任意の名称）」とでもして「送信」してください。
保存できたらブログを確認してください。
レイアウトが崩れていると思いますので、スタイルシートもカスタマイズします。
ブログタイトルのスタイルシート
■元ソース
/*ページタイトル文字色の設定*/
.TopTitleFont { font-size: 16px; font-weight: bold; text-decoration: none; margin-top: 200px; }
.TopTitleFontをh1に換え、margi-top: 200pxを0pxにします。
■カスタマイズ・ソース
/*ページタイトル文字色の設定*/
h1 { font-size: 16px; font-weight: bold; text-decoration: none; margin-top: 0px; }
※<h2>に指定した記事タイトルはclass="EntryTitleFont"を流用したのでそのままでOKです。
これを保存してやれば、ほぼ元デザインと同じレイアウトになります。
以上、見出しタグの設定でした！