2019/04/06

FC2ブログでページ毎にDescription(ディスクリプション)を設定する方法

Description(ディスクリプション)とは、WEB検索サービス(googleやyahooなど)の結果で、タイトルの下に表示される文章です。

※設定方法をすぐ見たい人はここを押しててください。
※JavaScriptでDescriptionを設定する方法を書いています。
※FC2ブログでの紹介ですが、同じようなことをすれば別のブログサイトでも可能です。

Descriptionを付けたい理由

ブログをやっていると、どうしてもアクセス数が気になります。 特にブログを初めてのころは全然アクセスがなく0という日もあります。 今の私がまさにその通りです。(^^;) ※ふと思ったのですが、だれも見てもらえない間は独り言を言っているようなものだと気が付きました。(笑)

少しでもアクセスを伸ばしたいため、まずはWEB検索の表示結果を改善していきたいと思います。小さなことからコツコツとです。

Description(ディスクリプション)って何?

まず、Description(ディスクリプション)とは、冒頭に記載した通り、WEB検索の結果一覧で表示されるそのページの説明文です。

何も設定していない場合は、Googleが検索された文字を元にある程度判断して、本文の中の文章を表示してくれますが、できれば自動で表示される内容ではなく、自分が表示したい文章を表示して見たいですよね。 そちらの方が、検索結果に並んだ時に見てもらえる確率が上がるような気がします。

※ちなみに、Descriptionを設定していても、検索内容からGoogleが最適と判断すれば、本文中の文言が検索結果に表示されることもあるそうです。さらにいうと、タイトルも自動で変えて表示することもあるらしいです。 Googleって頭いいですね!

FC2ブログでのDescriptionは?

では実施にFC2ブログに投稿した際のDescriptionはどうなるのかを確認してみました。 どうも、ブログの作成に「ブログの説明」へ記載した文言が設定されるようです。

※「ブログの説明」の確認は、ブログの管理画面にログインし、画面右上のほうにある「環境設定」をクリックすると「ユーザー情報の設定」内に表示されます。

どのブログの記事でも同じ文言が設定されるようで、記事毎にDescriptionの文章を分けて出すことはできないようです。 参考までにFC2ブログでDescriptionの設定をGoogleで検索してみましたが、ぱっとでてきたのはどの記事でも同じ固定の文言とする方法でした。 残念ながら、私がやりたいこと(記事毎に設定する)とは違う内容でした。

どうやってDescriptionを設定する?

さらにいろいろと調べていったところ、JavaScriptでDescriptionを設定できることがわかりました。 このJavaScriptと言うのは、WEBブラウザ(InternetExplorerやSafariなど今この記事を見ているアプリ)上で、画像を動かしたり、文字を変更したりできるものです。 JavaScriptで設定するのは、プログラミングになりますが、決まった内容を決まった手順で設定していくだけなので、特に難しくなかったです。 ちなみに、Googleが検索時に表示してくれる内容は、JavaScriptで書き換えた後の内容になっていました

※下記の文字列をChrome(WEBブラウザです。ここから取得できます)のURLを入力する欄に入れてEnterを押すと、Googleに登録されているこのサイトの一覧が表示されます。クリックすると該当記事に行きますが、一覧に表示されているものと同じ内容の文言は記事内にないことがわかります。
site:https://nknot.jp/

記事ごとにJavaScriptでDescriptionを書き換える手順

ブログの記事毎にDescriptionを書き換える手順です。

※カテゴリー一覧やトップページはこの方法できません。やろうと思えばできそうなので、別の記事で書くかもしれません。
※descriptionが出力されないテンプレートを使用している方は対応できません。

全体の流れ

下記の流れで設定を行います。見ればわかりますが、ブログの記事の書き方は今までどおりで、最後にDescriptionの設定を行います。
  1. ブログの記事を書く
  2. JavaScriptをコピー(後程かいてある文字をコピー)
  3. ブログの記事に貼り付け
  4. Descriptionに書きたい文言を設定
  5. ブログの記事を保存

1.ブログの記事を書く

これは今までどおり普通に好きなように記事を書いてください。画像を使ってもらってもいいですし、何をしても大丈夫です。

2.JavaScriptをコピー

下に記載されいてる「―この下から―」「―この上まで―」の間にある文言を選択してコピーしてください。

※「―この下から―」「―この上まで―」の文言はコピーしません。

―この下から―

<script type="text/javascript"> var dc="この文字を削除して書いてください。(最初と最後の"は消さないでください。)"; var url_str=location.href; if(url_str.match(/blog-entry-/)){   if (typeof(dc) != "undefined") {      var tag = $('head').children();     for(var i = 0;i < tag .length;i++){       if(tag.eq(i).attr('name') === 'description'){         tag.eq(i).attr('content',dc);       }     }   } } </script>

―この上まで―

3.ブログの記事に貼り付け

ブログの記事に貼り付けてください

どこでもいいですが、最後に貼り付けたほうがわかりやすいと思います。 ここで気を付けてほしいのですが、HTMLとして貼り付ける必要がありますFC2ブログだと、「本文を編集」エリアのツールメニューにある「W」(右から2つ目)を押していない状態で貼り付けてください。 もしくは、「W」を押している状態だと、次の行の左側に表示される「ソース」を押してから貼り付けてください。

うまく貼り付けられると、プレビューや実際の記事にはこの文字列は表示されません。
※表示されないのが正しいです。表示されないだけで、ちゃんと残っています。

4.Descriptionに書きたい文言を設定

「この文字を削除して書いてください。(最初と最後の"は消さないでください。)」の文字を削除し、Descriptionに書きたい文言を設定(入力)してください。

文字数はスマホでの検索結果は100文字くらいだそうなので、100文字を少し超えるくらいまでがよさそうです。もちろん長く書いても、切れて表示されないだけなので書いても問題ないです。PCは200文字以上表示されたりします。 また、下記点は気を付けてください。

  • 記号は使わない
  • 改行を入れない
  • 文言はクォーテーション「"」で囲む

5.ブログの記事を保存

最後にブログの記事を保存して公開してください。 これを忘れると全てが台無しになります。(笑)

次にプレビューや公開された記事を見てみて、Javascriptや、Descriptionの文言が表示されていないことを確認してください。 表示されている場合は、失敗しています。 失敗している場合は、たぶん「3.ブログの記事に貼り付け」で失敗していると思いますので、見直してください。

ちなみにGoogleの検索へはすぐには反映されません。数日はかかる可能性があります。 ※ある程度早く反映してれるようにすることもできますが、別の記事で書きます。

うまく設定できれば、自分がアピールしたい文言をGoogle検索の結果に表示されるようになるので、いっぱいクリックしてもらい、サイトに来てもらえるようになるといいですね!

関連記事