FC2ブログのタイトルタグやメタタグまわりのカスタマイズ方法

metaタグ

FC2ブログのテンプレートをカスタマイズする時に1番最初にやっておきたい事が、タイトルタグと、メタタグまわりのカスタマイズです。ブログの表舞台にはあまり出てこないものですが、重要なタグになるのでしっかり設定しておきましょう。

今回は、タイトル、ディスクリプション、キーワードのカスタマイズ方法をご紹介しています。

title(タイトル)のカスタマイズ方法

HTMLでは、<title>タグは、必ず記述しておかなければいけない大切なタグです。

Googleなどの検索エンジンから訪問される方にとっては、このタイトルこそが、あなたのサイトのはじめてのコンテンツとなります。

あまりよくないタイトルタグ

テンプレートによってタイトルタグが以下のようになっているものがあります。

<title><%blog_name><!--not_index_area--> | <%sub_title><!--/not_index_area--></title>

この場合、実際のHTMLでは「ブログ名 | 記事タイトル」という形になります。ブログ名や記事タイトルが長い場合、一番大事な記事タイトルが検索結果で省略されてしまい、どんなことが書かれているページかわからなくなってしまいます。

このようなタイトルタグになっている場合は、次で紹介するタイトルタグに修正しておきましょう。

よくあるFC2テンプレートのタイトルタグ

FC2のテンプレートでは、<title>タグが以下のようになっているものが多いです。

<!--not_index_area--><%sub_title> | <!--/not_index_area--><%blog_name>

実際のHTMLはこのような形になります。

<!-- トップページ -->
<title>記事タイトル | ブログ名</title>

<!-- 個別記事ページ -->
<title>記事タイトル | ブログ名</title>

<!-- カテゴリページ -->
<title>カテゴリ名 | ブログ名</title>

<!-- 月別一覧ページ -->
<title>年月日の数字 | ブログ名</title>

<!-- ユーザータグ一覧ページ -->
<title>ユーザータグ名 | ブログ名</title>

<!-- 検索結果ページ -->
<title>検索ワード | ブログ名</title>

<!-- 全記事一覧ページ -->
<title> | ブログ名</title>

<!-- トップページから2ページ以降 -->
<title> | ブログ名</title>

細かくタイトルタグを設定する方法

もう少し細かくタイトルタグを設定したい場合、以下のようにすると良いと思います。

<!-- トップページ -->
<!--index_area-->
<title><%blog_name></title>
<!--/index_area-->

<!-- 個別記事ページ -->
<!--permanent_area-->
<title><%sub_title> | <%blog_name></title>
<!--/permanent_area-->

<!-- カテゴリ一覧ページ -->
<!--category_area-->
<title><%sub_title>カテゴリの記事一覧 | <%blog_name></title>
<!--/category_area-->

<!-- 月別一覧ページ -->
<!--date_area-->
<title><%now_year>年<%now_month>月の記事一覧 | <%blog_name></title>
<!--/date_area-->

<!-- ユーザータグ一覧ページ -->
<!--tag_area-->
<title><%sub_title>タグの記事一覧 | <%blog_name></title>
<!--/tag_area-->

<!-- 検索一覧ページ -->
<!--search_area-->
<title><%sub_title>の検索結果一覧 | <%blog_name></title>
<!--/search_area-->

<!-- 全記事一覧ページ -->
<!--titlelist_area-->
<title>全記事一覧 | <%blog_name></title>
<!--/titlelist_area-->

<!-- トップページから2ページ以降 -->
<!--not_index_area--><!--not_permanent_area--><!--not_category_area--><!--not_date_area--><!--not_tag_area--><!--not_search_area--><!--not_titlelist_area-->
<title><%blog_name> - <%current_page_num>ページ目</title>
<!--/not_titlelist_area--><!--/not_search_area--><!--/not_tag_area--><!--/not_date_area--><!--/not_category_area--><!--/not_permanent_area--><!--/not_index_area-->

ちなみに、スマホ版FC2ブログでは、全記事一覧、ユーザータグ一覧、検索一覧ページはありません。

description(ページの説明文)のカスタマイズ方法

FC2ブログのテンプレートでは、descriptionが以下のようになっているものが多いです。

<meta name="description" content="<%introduction>" />

実際のHTMLでは全てのページがこのような形になります。

<meta name="description" content="環境設定のブログの説明に設定したテキスト" />

descriptionのテキストは、Googleなどの検索結果のタイトルの下に表示されるものになります。全てのページが同じ説明文というのはどのようなページかわかりづらく、よくないですよね。

トップページ以外、descriptionを削除する方法

descriptionは必須のタグではないので、トップページ以外削除してしまう方法があります。

<!-- トップページ -->
<!--index_area-->
<meta name="description" content="<%introduction>" />
<!--/index_area-->

このようにしていてもGoogleなどでは、適切な部分のテキストを表示してくれます。適切なdescriptionでなければ削除してしまう方が良いです。

とりあえずdescriptionを指定しておきたい方向けの方法

追記の部分は使っているし、でも個別記事ページくらいはdescriptionを指定しておきたいなーという方向けのカスタマイズです。

<!-- 個別記事 -->
<!--permanent_area-->
<meta name="description" content="<!--topentry--><%topentry_discription><!--/topentry-->" />
<!--/permanent_area-->

これで、ページの本文の最初の200文字がdescriptionになります。記事の冒頭で、ページ全体の内容を説明している書き方をされている方には有効かもしれません。

個別記事のdescriptionを設定する方法(※)

記事投稿の「追記の編集」部分を使っていない方向けのカスタマイズになるのですが、追記部分にページの説明文をテキストのみで記入して、descriptionにしてしまうという方法です。

<!-- 個別記事 -->
<!--permanent_area--><!--topentry--><!--more-->
<meta name="description" content="<%topentry_more>" />
<!--/more--><!--/topentry--><!--/permanent_area-->

(※)みちょ様から情報を頂きました! 「環境設定 > ブログの設定」で「拍手ボタンの設定:なし」「高速表示の設定:利用しない&広告を表示しない」の設定をしておく必要があります。 これらを表示する設定(初期設定のまま)をしていると、<%topentry_more>に不要なモノが入ってしまいます・・・。

この方法は<body>内の<%topentry_more>を削除しなくてはいけなかったり、面倒な作業が増えるので、あまりおすすめしません・・・。

keywords(キーワード)のカスタマイズ方法

keywordsは、必須のタグでは無い上に、検索エンジン側からみても必要ないものと言われています。それでもトップページくらいは指定しておいても損はないかと思うので、その方法をご紹介します。

<!-- トップページ -->
<!--index_area-->
<meta name="keywords" content="キーワード1,キーワード2,キーワード3" />
<!--/index_area-->

タイトル、メタタグまわりのHTMLまとめ

細かいことは抜きで、とりあえずこれだけ指定しておけば良いかなと思うHTMLです。

<!-- タイトル -->
<title><!--not_index_area--><%sub_title> | <!--/not_index_area--><%blog_name></title>

<!-- ディスクリプション -->
<!--index_area-->
<meta name="description" content="<%introduction>" />
<!--/index_area-->

<!-- キーワード -->
<!--index_area-->
<meta name="keywords" content="キーワード1,キーワード2,キーワード3" />
<!--/index_area-->

しっかりタイトルタグの表示を指定していても、実際の記事のタイトルがわかりづらいものだったら意味が無いので、表示される内容にも気をつかって記事を書いていきたいですね。

Pagetop
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。