どうも。つじけ(tsujikenzo)です。このシリーズでは「ノンプロ研ライティング講座初級1期を受講中にやったこと・後半戦」としてお送りしております。
今日は第8回で「ブログにメタディスクリプションを設定しよう」についてお届けします。
読者に最高の体験を
私がブログを書いているのは、読んでいただいた読者に最高の体験をしてもらうためです。しかしながら、書き手としては「読者に最高の体験をしてもらっているのか」を知ることは非常にむずかしいです。
自分のブログを客観的に評価することはできるのでしょうか。そして、改善することはできるのでしょうか。
ブログの評価をしよう
拡張機能による評価
Chromeの拡張機能に[LightHouse]という、Webサイトの表示速度や、Webサイトの品質を評価してくれるツールがあります。
(インストールの手順は割愛します)まずは、ご自分のWebサイトを表示して、拡張機能から[LightHouse]をクリックします。

起動したら[Generate Report]をクリックします。

しばらく待っていると、結果が表示されます。[Performance]が著しく悪いようです。。。💦

ページを日本語訳にしました。どうやら、ページを表示するのが遅くなっているらしく、その解決方法として「レンダリングをブロックするリソースを排除する」ほうがよさそうです。クリックして詳細を確認してみましょう。

開いて見ましたが、「重要なアセットをインライン化したり、重要性の低いリソースを延期したり・・・」。。。ぐぬぬ。

全然カタカナ語がわからなくて、ルー語かと思いました💦ひとまず冷静になりましょう。
親テーマ・子テーマを設定しよう
思い当たる節が一つありました。それは「親テーマ・子テーマを設定していない」という点です。別途記事を分けましたのでそちらを参考にしていただければ幸いです。

反映させた結果をもう一度見てみましょう。少し数値が改善されたようです。

サーバーの応答時間がよくないようなので、時間がある時に研究してみたいと思います。

とりあえずいったんこれは保留にしておきましょう。
しかしながら、「ページの表示が遅くて、読者には不便かもよ」ということを教えてもらいました。何が悪いのかを可視化することができれば、対策も取れます。まずはこういったツールを使って分析をしてみることからはじめてみましょう。
Googleの検索結果はどうか
読者が私のブログに辿り着くまでの道のりはどうでしょうか。例えば「いつも隣にITのお仕事」を検索しますと、このような検索結果が出ます。

非常にキレイな検索結果が表示がされていますね。分析すると、以下の3つの要素が大きいと思います。
- 「タイトル」
- 「メタディスクリプション」
- 「サイトリンク」

一方で、私のブログはどうなっているでしょうか。ドキドキ。

ブログタイトル「学習と成長のブログ」だけでは上位表示できませんでした💦「つじけ」を足してやっと表示されるレベルです。。。
さて、ツッコミどころは多々ありますが、まずは、隣ITさんの真似できるところと言えば「メタディスクリプション」だと思います。Webサイトの説明文にあたるところですね。
後半はメタディスクリプションの設定をしてみたいと思います。
メタディスクリプション
Webページの説明文を「メタディスクリプション」と呼びます。「スニペット」と呼ぶ場合もあるようです。
メタディスクリプションの、PC検索で表示される文字数は「130文字程度」、スマホ検索で表示される文字数は「80文字程度」のようです。
私のサイトはほとんどがPCから閲覧されているようですが、スマホからでも見やすいように「80文字」で設定したいと思います。
メタディスクリプションのシミュレーション
タイトルやメタディスクリプションなどの、検索結果をシミュレーションできるサービスがあります。
必要項目は4つです。

入力したら「検索結果をプレビューに保存」をクリックします。※画面が切り替わると入力した内容が消去されるので、メモ帳などにテキストを保存しておきましょう。

このような結果になるようです。

スマホの表示結果も見てみましょう。[プレビュー:スマホ]をクリックします。

このようになります。

このツールはあくまで「シミュレーションをしてみよう」というサービスなので、ご自身のWebサイトのメタディスクリプションを設定できるわけではありません。
お使いのサーバーやプラットフォームによって、メタディスクリプションの設定方法は異なりますので、各マニュアルなどを参照してください。
メタディスクリプションの設定
WordPressでメタディスクリプションを設定する場合は、「WordPressダッシュボード」から行います。
まずはじめに、サイト全体のメタディスクリプションを設定します。[Cocoon設定]の[タイトル]をクリックします。

[サイトの説明]と[メタキーワード]にテキストを入力します。最後に最下部の[変更をまとめて保存]をクリックするのを忘れないようにしましょう。

個々の記事メタディスクリプション
それぞれ個々の記事にも「メタディスクリプション」を設定することができます。
WordPressダッシュボードから「投稿」メニューの「投稿一覧」をクリックして、編集したい記事の「編集」をクリックします。

「SEOタイトル」と「メタディスクリプション」にテキストを入力します。

入力が終わったら右上の「下書き保存」をクリックします。

以上です。
適切に反映されたかどうかは、少し時間がかかりますので、半日~翌日などにもう一度確認してみましょう。
まとめ
さて、以上で「ブログにメタディスクリプションを設定しよう」をお送りしました。
ブログを「読んでいただいた読者に最高の体験をしてもらう」ということは、読者になる前の「最高の検索結果を提供する」ところから始まっているとも考えれらますね。
ひとつひとつ、コツコツと積み重ねていくことが必要だと感じました。