「最初のサーバー応答時間を速くしてください」対策で PageSpeed 点数改善

PageSpeed Insights の表示で、「最初のサーバー応答時間を速くしてください」あるいは「Reduce initial server response time」をせよと指示されるケースの対策です。

Reduce initial server response time
Reduce initial server response time

原因

英語のメッセージでしたら「Reduce initial server response time」を直訳すれば、「最初のサーバー応答時間を速くしてください」ということです。

つまり、このメッセージはサーバーの応答時間が遅いという指摘になります。

改善対策

サーバーの応答が遅いので、サーバーの応答速度を上げるのがよいです。
レンタルサーバーでしたら上位のプラン、VPS やクラウドサーバーならチューニングを行うのが良いでしょう。

WordPress ならキャッシュプラグイン

WordPress の場合はキャッシュプラグインの導入がよいです。
キャッシュプラグインとして以下をご紹介します。

これらプラグインでは WordPress のキャッシュを作成したり、CSS や HTML などの圧縮を実現してくれます。

検索順位チェックツール「Serposcope」とは、その使い方

無料で使える Serposcope は検索順位チェックツールの中でも珍しい存在です。
その他多くの検索順位チェックツールは有料ツールとなるからです。

とはいえ、Serposcope は無料で使える上に役立つ強力なツールです。
ぜひ Serposcope を活用して SEO に役立ててください。

Serposcope のインストール

ダウンロード から Serposcope をインストールして回答します。
インストールファイルがあるのでインストールしてください。

Serposcope の起動方法

Mac

ターミナルから java ファイルを直接起動します。
起動方法は以下のような構文を使います。

java -jar serposcopeのパス

java コマンドが使えることが前提条件になります。
私の場合は、Downloads ディレクトリに配置しているので、以下のように起動しています。

cd ~/Downloads && java -jar serposcope-2.12.0.jar

起動したら、http://127.0.0.1:7134/ というアドレスにブラウザでアクセスします。Serposcope の画面が表示されたら成功です。

キーワードの追加

キーワードを1つ追加

GROUPS > 各グループ > ADD SEARCH からキーワードを追加できます。

キーワードを一括追加

ADD SEARCH から BULK IMPORT で一括のバルクインポートが可能です。

REGEXEXTRACT で文字列抽出を Google スプレッドシートで実行

Google スプレッドシートで文字列を正規表現で抽出する方法です。
正規表現は記法を知っている必要がありますが、文字列を扱うには強力な手法です。

REGEXEXTRACT の使い方

REGEXEXTRACT では正規表現で文字列抽出できます。

=REGEXEXTRACT("対象の文字列", "正規表現")

以下は、A19のセルからアルファベットを抽出する例です。

=REGEXEXTRACT(A19, "([A-Za-z]+)")

参考

REGEXEXTRACT – ドキュメント エディタ ヘルプ

SUBSTITUTE で文字列削除を Google スプレッドシートで実行

Google スプレッドシートで文字列を削除する方法です。

SUBSTITUTE の使い方

SUBSTITUTE ではセルの範囲、置換する文字列、置換後の文字列の3つを指定します。

=SUBSTITUTE(セルの範囲,"置換する文字列","置換後の文字列")

以下は、「喫煙」という文字列を削除する例です。

=SUBSTITUTE(B2,"喫煙","")

参考

SUBSTITUTE – ドキュメント エディタ ヘルプ

Contact Form 7 の使い方

Contact Form 7は WordPress に問い合わせページの設置を支援するプラグインです。

Contact Form7は簡単に設置できるため、世界中で使われています。

  • 初心者でも導入設定が簡単
  • 高機能で様々な部品をサポート
  • 有名プラグインのため信頼感が高い

Contact Form 7は何しろ設定が簡単で、他の手段と比較してすぐに導入できる点がメリットとして大きくなっています。
当記事では、Contact Form 7を単に利用するだけでなく、セキュリティを高め使用する方法についてもご紹介します。

使い方

WordPress の管理画面から「お問い合わせ」を選択します。
Contact Form 7の画面が開くので、「新規追加」を押下します。

フォーム作成

フォームの作成画面が開きます。

このままですぐにフォームを使用することができます。

セキュリティ対策

Contact Form 7で問い合わせページを設置すると、セキュリティ対策が必要です。
ContactForm 7のような有名プラグインは常に、スパムメールからの攻撃にさらされているからです。

承諾確認チェックボックスでスパム対策

承諾確認チェックボックスを追加することで、チェックなしでフォームを送信できなくします。

同意条件に、承諾確認で表示したい文言を入力します。

承諾確認を利用することで、セキュリティを高めるだけでなく、フォームの情報の利用について記載したりフォームの立ち位置を明確にする助けになるでしょう。

reCAPTCHA (v3) でスパム対策

reCAPTCHA とは、スパムボットなどの攻撃からサイトを防御する仕組みのことです。

Contact Form 7ではスパム対策としてこの reCAPTCHA を導入する仕組みがあります。

Googleアカウントで、サイトを登録

reCAPTCHA は Google のサービスになるので、reCAPTCHA から Google アカウントを登録します。

ドメイン、reCAPTCHA のタイプを指定します。

Google reCAPTCHA追加画面

サイトキーとシークレットキーがコピーできるようになります。

WordPress の管理画面から、Contact Form 7のインテグレーションを押下します。

Contact Form 7のインテグレーション

reCAPTCHA という項目があるので、「インテグレーションのセットアップ」ボタンを押下します。

Contact Form 7の reCAPTCHA インテグレーション

「変更を保存」ボタンを押下します。

これで、reCAPTCHA が有効化されます。
reCAPTCHA (v3)ではreCAPTCHA v2 にあった「私はロボットではありません」のチェックボックスが不要になります。有効化されるだけで reCAPTCHA 対応済みのフォームとなります。

参考: reCAPTCHA (v3) | Contact Form 7 [日本語]

まとめ

Contact Form 7 は、お問い合わせフォームを作るための基本的機能が揃っているプラグインです。

この記事では、Contact Form 7のスパム対策などセキュリティ強化についても紹介しました。

ぜひ利用してお問い合わせページを用意してください。

the_excerpt() の使い方

投稿の抜粋を表示するためのタグです。

使い方

the_excerpt()を呼ぶだけで使えます。

<?php the_excerpt(); ?>

注意

日本語の記事を扱うため、基本的に WP Multibyte Patch と一緒に使うのがいいです。

リンクのカスタマイズ

the_excerpt()はデフォルトではリンクをだしてくれないので、「続きを読む」のようなリンクを作るには、functions.php の編集が必要です。

https://wpdocs.osdn.jp/%E3%80%8C%E7%B6%9A%E3%81%8D%E3%82%92%E8%AA%AD%E3%82%80%E3%80%8D%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA#the_excerpt.28.29_.E3.81.A7.E8.A1.A8.E7.A4.BA.E3.81.95.E3.82.8C.E3.82.8B.E3.80.8C.E7.B6.9A.E3.81.8D.E3.82.92.E8.AA.AD.E3.82.80.E3.80.8D.E3.81.AE.E5.A4.89.E6.9B.B4

参考

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_excerpt

Google の検索表示結果をカスタマイズする

Google で検索した検索結果をカスタマイズしたい、よりコンテンツをユーザー正確に伝えたいと考えている方も多いでしょう。

この部分をどこから調べるのかといえば SearchConsole からになります。

ヘルプセンターを探そう

検索での見え方 – Search Console ヘルプ から検索エンジン表示をコントロールする様々な施策の手法を確認できます。

簡単にご紹介しましたが、SearchConsole で表示をカスタマイズするための機能が用意されています。

まずは構造化データなど表示周りから手を付けてみるのがおすすめです。

Bootstrapで使えるテキスト装飾部品たち

Bootstrap(ブートストラップ) は世界中で使われている Web 制作のライブラリです。
Bootstrap · The most popular HTML, CSS, and JS library in the world.

制作に便利な Bootstrap ライブラリですが、ウェブ上のテキストやコンテンツをちょっとおしゃれに見せるのに使えるクラスが多く含まれています。

装飾につかえる部品

Bootstrap の中でも装飾にすぐ使える HTML 部品をご紹介します。

  • アラート
  • カード

アラート

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

アラートの表示例

カード

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

カードの表示例

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

サイトに Google オプティマイズ でコロナ対応バナーをだす

新型コロナウィルスの影響で、営業時間を変更したり、業務内容の変更を余儀なくされている方は多いでしょう。

Google オプティマイズ を使うと、サイトにコロナ対策を周知するバナーをだすことができます。

コロナ対策のエクスペリエンスを作成

オプティマイズのエクスペリエンスから、「COVID-19のバナー」を作成します。

COVID-19のバナー

バナーの編集画面

バナー編集画面からバナーのデザインや文言を修正します。

COVID-19バナー編集画面

編集が済んだら「完了」を押下します。

バナーの確認

バナーが確認できたら成功です。

Google Tag Manager の導入はプラグインでやろう

Google Tag Manager の WordPress への導入はプラグインを利用しています。

タグマネージャーの導入プラグイン

Google Tag Manager for WordPress

いろいろ細かく設定できるプラグインです。

Google Tag Manager for WordPress – WordPress プラグイン | WordPress.org 日本語

Google Tag Manager

シンプルでタグマネージャーを追加するだけのプラグインです。

Google Tag Manager – WordPress プラグイン | WordPress.org 日本語