Blueskyアカウント作成

Blueskyアカウントを作りました。

Hello world!Blueskyにアカウントを作りました。

GiantRodent (@giantrodent.bsky.social) 2024-11-23T03:56:09.593Z

これから当ブログに投稿したら自動でBluesky にポストする予定です。
Jetpack プラグインのJetpack ソーシャル機能にBluesky が追加されたのでそれを使います

アカウント登録のメモ

アカウント作成時の登録情報

  • ホスティングプロバイダー ※Bluesky Social(default)
  • メールアドレス
  • パスワード
  • 生年月日
  • ユーザーハンドル ※先頭@
  • メールアドレスにアカウント登録の通知メールが送信されないので設定のページを見ると、メール送信ボタンがあったのでそれをクリックしたらメールが届き認証された
  • 設定のプライバシーとセキュリティで2要素認証を有効にしたらメールでの2要素認証が有効になった。この時メールが送られてこなかったのは、メールアドレスの認証をしていたからなのかも?

ハンドルを所有しているドメインに変更

アカウント作成時はハンドルを @giantrodent.bsky.social で登録しましたが、所有しているドメイン madoverload.com のDNS のTXT レコードにBluesky 側から指定された情報を埋め込み、アカウントをドメインと紐づけて認証させることで、ハンドルを @madoverload.com に変更します。

設定の アカウント > ハンドル で”ハンドルを変更” のページを開き、[自分のドメインを持っています→] をクリックすると、TXT レコードに登録する情報が表示されます。

DNS サーバーの管理画面で表示された情報を登録します。
このブログのドメインで使っている権威DNS サーバーはCloudflare を使っているので、以下の画面はClooudflare のDNS リソースレコードの登録画面です。

※ Contentの値を”(ダブルクオテーション)で囲み忘れたので、この後”で囲みました
※ Contentの値はパスワードのようなランダムな感じの値なので秘匿する必要がありそうですが、DNS レコードは公開される情報なのでマスキングせずに掲載しています

DNS の登録が反映されているか下記のコマンドで確認します。

% dig _atproto.madoverload.com txt +short
"did=did:plc:myx4t5vr2twkfmf7fabpkkcl"

Bluesky の設定画面に戻ります。

使用するドメインを入力すると、ボタンが[DNSレコードを確認] に変わるのでクリックします。

ドメインを確認しました!” と表示され、ボタンが[madoverload.comに更新] に変わるのでクリックします。

プロフィールページを見ると、ハンドルが@madoverload.com に変わっていました。

あとがき

TXTレコードに設定した値「did=did:plc:myx4t5vr2twkfmf7fabpkkcl」の正体は?
そして、Bluesky アカウントのID、名称 はどんなもの?

  • did
    • Blueskyのアカウントに対して一意に付与されたID
    • 先頭の”did=” を除いた部分がdidの値
    • アカウントを削除しても使い回されることはない
  • ハンドル
    • 基本的にドメイン名を使った、didを示す表示用の名称
    • 自身が所有・管理するドメイン名を使うことができ、変更が可能
    • プロフィールページのURLに使われる
  • 表示名
    • アカウントの表示用の名称で別のアカウントと重複が可能
    • 絵文字も使うことができ、容易に変更が可能

参照

WordPress にCloudflare を導入

はじめに

WordPress の当ブログにCloudflare を導入した際の手順の記録です。
WordPress はさくらのインターネットさくらのレンタルサーバ上に構築されています。
とりあえずCloudflare のCDN を導入したという程度の内容です。

手順

1. Cloudflare のアカウント作成

Cloudflare のサイトにアクセスしてサインアップのリンクをクリックします。

Cloudflare - Create Account

メールアドレスパスワードを入力して[Create Account] をクリックします。

Cloudflare > ダッシュボード

管理画面が表示されました。

先程入力したメールアドレス宛てにメールアカウントを確認するためのリンクが記載されたメールが届くので、メールが届いたらリンクをクリックします。

2. サイトの追加

管理画面の上部にある[Add site] をクリックします。

Cloudflare > サイトの追加

登録するサイトのドメイン名を入力して[Add site] をクリックします。
当ブログを登録するのでmadoverload.com と入力しました。

Cloudflare > Freeプラン

プランを選択します。
今回はFree プランにするので、Free を選択して[Continue] をクリックします。
クリックすると登録するサイトのDNSレコードのスキャンが始まるので、そのまま終わるまで少し待ちます。

Cloudflare > DNSレコード(スキャン結果)

スキャンが終わると、スキャン結果が表示されます。

  • A レコードのContent にはIPv4 のアドレス、AAA レコードにはIPv6 のアドレスが表示されています(さくらのレンタルサーバで割り当てられているIPアドレス)

今回、下記のように変更しました。

Cloudflare > DNSレコード(変更後)
  • A レコードのContent は編集前と同じIPv4 のアドレス、AAAA レコードのContent は編集前のIPv6 のアドレスと同じです
  • ウェブサイト向けのレコードはCloudflare でキャッシュされるようにProxied に、それ以外のメール関係のレコードはキャッシュさせずDNS としてのみ扱われるようにDNS only にしました

変更後、[Continue] をクリックします。

3. ネームサーバの変更

ネームサーバの変更を求めるページが表示されました。

Cloudflare > Change your nameservers

当ブログのWordPress はさくらのレンタルサーバ上に構築しているので、さくらのレンタルサーバ側で設定されているmadoverload.com のネームサーバ情報を、Cloudflare のページ上に表示されているネームサーバ(プライマリとセカンダリの2つの .ns.cloudflare.com)に変更します。

さくらのレンタルサーバ側の設定変更

さくらのレンタルサーバのコントロールパネルを開き、[ドメイン/SSL] > [ネームサーバ設定] をクリックしてドメインコントロールパネルを開きます。

さくらインターネット 会員メニュー > さくらのドメイン一覧

[さくらのドメイン] > [さくらのドメイン一覧] に表示されている当ブログのドメインmadoverload.com の”Whois” をクリックします。

さくらのレンタルサーバ > Whois > ネームサーバ

[Whois] > [ネームサーバ] の[ネームサーバを編集] をクリックして、Cloudflare のネームサーバ(.ns.cloudflare.com)に変更します。

さくらのレンタルサーバ > Whois > ネームサーバ(変更後)

ネームサーバの変更は反映されるのに数時間かかるようです。
反映されたらCloudflare からメールが届くとのことなので、反映されるまでの間にCloudflare 側の各種設定を行います。

4. Quick Start Guide

Cloudflare の管理画面にQuick Start Guide が表示されていたので、この案内に従って設定を進めます。

Cloudflare > Quick Start Guide

[Get started] をクリックします。

Automatic HTTPS Rewrites

Cloudflare > Improve security > Automatic HTTPS Rewrites

混在コンテンツエラーという、https で提供されているウェブサイト上の画像やリンクなどがhttp とhttps が混在することで起きるエラーにならないようにするために、http のコンテンツをhttps に自動で書き換える設定です。

ON のままにしておきます。

Always Use HTTPS

Cloudflare > Improve security > Always Use HTTPS

サブドメインを含めた全てのhttp リクエストをhttps にリダイレクトさせる設定です。
オリジンサーバのリダイレクトも有効になっているとリダイレクトループエラーが起きるので、当機能を有効にする場合はオリジンサーバのリダイレクトを無効にしておくことが推奨されています。

OFF だったのでON にしました。

オリジンサーバであるさくらのレンタルサーバ側のリダイレクトが有効になっていたので無効にします。

  1. コントロールパネルを開き、[ドメイン/SSL] > 対象ドメインの[設定] をクリック
  2. [ドメイン設定] > [HTTPS転送設定] > [HTTPSに転送する] のチェックをOFF にして[保存する] をクリック
さくらインターネット > ドメイン設定 > HTTPS転送設定

Auto Minify

Cloudflare > Optimize performance > AutoMinify

HTML、CSS、JavaScript ファイルを自動圧縮する設定です。

OFF のままにしておきます。

Brotli

Cloudflare > Optimize performance > Brotli

Brotli アルゴリズムを使って圧縮するための設定です。
この設定で行われる圧縮は、Auto Minify に加えて行われるもののようで、HTTP レスポンスのcontent-type ヘッダを見て圧縮する対象を判断するとのことです。

ON のままにしておきます。

Cloudflare > Quick Start Guide > Summary

最後、Summary で設定した内容を確認したら[Finish] をクリックします。

6. SSL/TLS

サイドバーの[SSL/TLS] をクリックします。

Cloudflare > SSL/TLS

Cloudflare とオリジンサーバ間の接続のSSL/TLS のモードを選択します。
4つのオプションから、http, https のどちらにするか、オリジンサーバから提示されたSSL 証明書がどのように検証されるようにするかを選択します。
オリジンサーバへの悪意のある接続を防ぐために、Full, Full(Strict) のどちらかにすることが推奨されています。

Flexible からFull に変更します。

7. Page Rules

Cloudflare でキャッシュするページのルールを設定します。
Free プランではルールを3つ設定することができます。

今回はWordPress 向けのルールを設定します。

Cloudflare > Rules > Page Rules

サイドバーの[Rules] > [Page Rules] のページを開き、[Create Page Rule] をクリックします。

ルール1. WordPress の管理画面をキャッシュしない

Cloudflare > Page Rule 1
  • URL > madoverload.com/wp-admin/*
  • Cache Level > Bypass
  • Disable Performance

ルール2. WordPress のプレビューページをキャッシュしない

Cloudflare > Page Rule 2
  • URL > madoverload.com/*&preview=true*
  • Cache Level > Bypass
  • Disable Performance

ルール3. 上記ルール以外のページをキャッシュする

Cloudflare > Page Rule 3
  • URL > madoverload.com/*
  • Cache Level > Cache Everything
  • Edge Cache TTL > 4 hours
Cloudflare > Page Rules (Position)

登録した3つのPage Rule を登録した順番に並び替えます。(優先度の高い順に並び替えます)

8. Cloudflare のWordPress プラグイン

Cloudflare 社が提供するWordPress 用プラグインです。

このプラグインをWordPress にインストールするとページの読み込みの高速化、SEOの改善、DDoS攻撃やWordPress固有の脆弱性からの保護など、何かとメリットがあるようです。
他にも、Cloudflare のユニバーサル SSL が有効になっている場合に発生するリダイレクトループを防止するヘッダーの書き換えもしてくれます。
ユニバーサルSSL が何のことか分からなかったので思い調べると、どうやらSSL/TLS の設定のことのようで、Flexible, Full, Full(strict) のいずれかにしていたら有効になっているということのようです。

Cloudflare のWordPress 用プラグインのインストール

WordPress にCloudflare のプラグインをインストールします。
今回はWordPress の管理画面の[プラグイン] > [新規追加] で検索したら見つかったので、[今すぐインストール] をクリックしてインストールしました。

Cloudflare WordPress プラグイン > インストール

インストールが完了したらプラグインを有効化して、Cloudflare プラグインの管理画面を表示します。(サイドバーの[設定] > [Cloudflare])

Cloudflare WordPress プラグイン > 有効化

Cloudflare の認証を求めるページが表示されました。
前述の手順「1. Cloudflare のアカウント作成」で既にCloudflare のアカウントを作成しているので、”Sign in here” のhere をクリックします。

Cloudflare WordPress プラグイン > API Credentials 入力

Cloudflare のアカウント作成時に登録したメールアドレスと、Global API Key またはAPI Token を入力して[Save API Credentials] をクリックします。

Global API Key は、Cloudflare の管理画面の[My Profile] > [API Tokens] > [API Keys] > [Global API Key] の[View] をクリックすると表示されるのでこれを入力します。

Cloudflare WordPress プラグイン > ダッシュボード

Cloudflare プラグインの管理画面が使える状態になりました。

Home の一番上に表示されているApply Recommended Cloudflare Settings for WordPress が[Apply] をクリックするだけでWordPress 向けの推奨設定を適用してくれるようで便利そうでしたが、どのような設定をするのかを一つ一つ確認すると時間がかかりそうだったので、今回は適用しないでおきました。

後ほど時間がある時に設定内容を確認したいので、適用される設定の内容が記載されたページのリンクを貼っておきます。

9. Cloudflare が有効になる

Cloudflare の管理画面を見ると、Overview のページに “Great news! Cloudflare is now protecting your site” と表示されていました。

Cloudflare > 有効化 1

左上の[← madoverload.com] をクリックすると、Home 画面のmadoverload.comActive になっています。

Cloudflare > 有効化 2

Cloudflare のアカウント作成時に登録したメールアドレスに、Cloudflare から”Status Active” と記載されたメールが届いていました。
前述「3. ネームサーバの変更」で行ったネームサーバの変更が反映されたようです。

DomainToolsmadoverload.com のWhois 情報を調べるとIP Location が”Cloudflare inc.” になっていました。

Cloudflare がCDN として期待した通りに動作しているか確認します。

  • ブラウザで登録したウェブサイトが正常に表示されるか確認する
  • 登録したドメインのメールアドレスにテストメールを送り受信できるか確認する

問題なければひとまず、Cloudflare の導入が完了です。

あとがき

トラブルと解消方法

上手くいかなかったことがあったので、記録として残しておきます。
一応、今回は下記の方法で解消させることができたという情報です。

  • リダイレクトループ
    • Cloudflare が”Active” になったらオリジンサーバ(WordPress)のページが表示されなくなった。Chrome では”リダイレクトが繰り返し行われました”、Safari では”多くのリダイレクトが発生しています”というメッセージが表示されるようになった。
    • SSL/TLS をFlexible → Full に変更したら解消された(ページが表示されるようになった)
  • WordPress のプレビューページの不具合
    • WordPress のプレビューページが表示されなくなった(プレビューページのタブは開くがページの内容が全く表示されない)
    • CloudflareのWordPressプラグインをインストールしたら解消された(プレビューのページが表示されるようになった)

どうしてCloudflare を導入したのか

CDN を導入することでページの読み込みを高速化できると思われますが、当ブログのアクセス数は1日に100件未満、アクセス元の99%以上が日本なので必要性は全くなかった。なので、これまでWordPress CDN も導入していなかった。

昨年の年末にCloudflare がYubiKey を$10 で購入できるキャンペーンをCloudflare で有効なゾーンを持っているユーザー向けにやっていることを知り、急ぎ年末にCloudflare を導入した次第です。
なお、この特別キャンペーンは2022年12月31日で終了しています。

これを機会にCloudflare のCDN のことをもっと知ることができればと思っています。

参照

さくらのレンタルサーバ新サーバーに移行

さくらインターネットさくらのレンタルサーバが「表示速度および処理能力が従来の最大5倍となる新サーバー」の提供を始めました。

提供開始は2022年2月16日で、既存のユーザ向けの新サーバーへの移行ツールの提供は7月13日に始まりました。

New さくらのレンタルサーバ

当ブログはさくらのレンタルサーバを使っていてパフォーマンスを改善したかったので、新サーバに移行することにしました。
移行ツール自体は管理画面でボタンを押せばよいだけの単純なものでしたが、移行にあたり前提事項など確認する必要があったので記録しておきます。

事前確認

さくらのレンタルサーバの公式サイトに移行ツールについての説明が書かれていましたが、解説ページのリンクをクリックするとどのページを読んでいるのかよく分からなくなり混乱してきたので、WordPress を使っている自分に関係していそうなことを箇条書きしておきます。

  • 対象者
    • 旧仕様のさくらのレンタルサーバ(2022年2月16日11:00以前に提供していたサーバー)に契約している
  • 条件
    • 同一プランへの移行のみ
    • サーバー上のすべてのコンテンツが新サーバーに移行される
    • 移行後は旧サーバーにアクセスできなくなる
  • 移行ツールを利用できない対象者
    • MySQL4.0、5.1、5.5を利用中(5.7にアップグレードする必要がある)
    • バックアップ&ステージングを利用中(バックアップ&ステージングの利用解除を行う必要がある)
    • 料金未納によりサーバーが停止中
  • 移行による変更点
    • クイックインストールまたは手動でインストールしたWordPress は、参照先データベース情報が「mysqlNNN.db.sakura.ne.jp」から「mysql57.アカウント名.sakura.ne.jp」に変わる
    • PHP7以上でcgiモードを利用している場合、モジュールモードに切り替わる
    • サーバーのIPアドレスが変わる
  • 移行作業の制約事項など
    • 移行される日時は数時間の幅があり正確に指定できない
    • 移行準備時間中は、サーバーコントロールパネル、Webメールへのログイン及び各種操作が利用できない(最大2時間目安)
    • 移行作業が開始するとサーバーの全機能が利用できなくなる(時間はデータの容量、ファイル数により異なるが、10GBで40分、100GBで約4時間程度を想定)

移行の操作手順

  1. サーバーコントロールパネルにログイン
  2. サイドメニューの[サーバ情報] > [移行ツール]
  3. [移行の申し込みに進む] ボタンをクリック
  4. 同意のチェックをONにし、[移行ツールを実行する] ボタンをクリック(8/14 22:04)
  5. 申し込みが完了するとコントロールパネルから強制ログアウトされる
    • “サーバ移行中です”と表示されるので[ログイン画面へ移動] ボタンをクリック
    • しばらくしてウェブページにアクセスすると、”現在、メンテナンス中です”と表示される
  6. 移行が完了すると、完了メールが送信される(8/15 0:00 に受信した)
    • 移行に失敗した場合、コントロールパネルにエラーメッセージが表示される

移行完了後の確認

  1. 翌朝、8時頃にWordPress のトップページを表示しようとしたら「このサーバは、さくらのレンタルサーバで提供されています」というページが表示された。そのまま放置して昼頃に再度表示するとWordPress のページが表示された
    • Jetpack のダウンタイムのモニターで検知された通知メールを見ると、23:46 にサイトのダウンを検知し、23:59にサイトのオンラインを検知していた(約13分のオフライン)
  2. WordPress のページが表示されたが、Chrome で表示するとアドレスバーのURL は”https” で始まり、”保護されていない通信” と表示されるようになった
    • Safari、Firefox、Brave Browser では保護された通信として表示される
    • スマホ版のChrome では保護された通信として表示される
    • 解消できないか少し調べたけれど原因を特定できなかったので、とりあえずこのまま放置することにした (解消できたので以下に訂正)
    • デベロッパーツールのSecurity タブを開くと、”Resources – active content with certificate errors” と表示されていたので、下記の手順を行って解消した
      1. デベロッパーツールのApplication タブを開き、サイドバーのApplication > Storage に[Clear site data] ボタンと”including third-party cookies” チェックボックスがあるので、チェックをONにしてボタンをクリック
      2. ブラウザのタブを閉じて、新しいタブを開きURLを入力すると、”保護されていない通信” が表示されなくなった(解消)
      3. デベロッパーツールのSecurity タブを開くと、”Resources – all served securely” と表示されていた
保護されていない通信(パソコン版Chrome)
デベロッパーツールのSecurityタブ(Resources - active content with certificate errors)
(デベロッパーツール) “Security” タブ > This page is not secure (broken HTTPS). > Resources – active content with certificate errors
(デベロッパーツール) “Application” タブ > サイドバーの”Application > Storage”
デベロッパーツールのSecurityタブ(Resources - all served securely)
(デベロッパーツール) “Security” タブ > This page is secure (valid HTTPS). > Resources – all served securely

あとがき

新サーバへの移行後、リンクをクリックした時の反応が明らかに良くなっている。

パソコン版Chrome で”保護されていない通信” と表示されてしまうのが悲しい。常時SSL化の時もChrome は前のめりだったので、今回も何かしらの仕様に引っ掛かっているのかもしれない。
解消させる上で参考になるかもしれないサイトのリンクを以下、貼り付けておいて今回はここまでとする。
(解消できたので以下に訂正)

パソコン版Chrome で”保護されていない通信” と表示された原因は、サイトの何かしらの情報がキャッシュに残っていたことが原因だったようです。
Command + Shift + R のハード再読み込みと、デベロッパーツールのモードで使える”キャッシュの消去とハード再読み込み” を試したけれど、その時はタブを閉じて新しいタブで表示させるということをしなかったので、もしかしたらそれで解消できていたのかも?気になるけれど気にしないことにします。

Google のSEO対策

Google の検索結果に自身のウェブサイトが表示されるようになりましたが、SEO対策については行きあたりばったりでやっていたので、一度立ち止まってGoogle のSEO についての基本的なことを整理しておこうと思います。
WordPress のブログ立ち上げの流れなので、WordPress と絡めた整理になります。

1. はじめに

Google の検索結果に自身のウェブサイトが表示されるようにするためには、Google にインデックス登録してもらう必要があります。
クローラ等によりウェブサイトのページが検出されますが、検出されたページは内容を分析された上でGoogleインデックスに登録されます。

インデックスとは

ウェブサイトのURLを登録するGoogleの大規模なデータベースのことをインデックスと呼びます。インデックスに登録されると検索結果に表示されるようになります。

ちなみに、インデックスという用語は、Google検索セントラルというGoogle のSEO関連のサポート用のページで下記のような使い方をされていました。

  • (Googleは)定期的にウェブを探索し、見つかったサイトを Google のインデックスに登録しています
  • Google はインデックスに追加するサイトを自動で探しています

また、インデックスを使った以下のような表現もあります。

  • Googleインデックス
    • Googleのインデックスのこと
  • インデックス登録
    • クローラが検出したページの内容を把握しようとするプロセスのこと
    • インデックス登録をリクエスト:ウェブサイトの運営者がGoogleにインデックスの登録を依頼すること

2. Google がウェブサイトを検出する方法

Google がウェブサイトのページを検出する方法は、いろいろな方法があるようですが、ここでは下記の3つのパターンに分けて整理してみようと思います。

  • Googleのクローラによるウェブサイトの検出
  • ウェブサイトの運営者からのインデックス登録の依頼
  • ウェブサイトからの更新の通知

それぞれ、章を分けて説明します。

3. Google のクローラによるウェブサイトの検出

Googleのクローラは、既知のウェブサイトのリンクをたどる等により新しいページや更新されたページを検出します。

クローラとは

正式には「ウェブクローラ」。
定期的にウェブを探索して、新しいページや更新されたページを検出するプログラムのことをクローラと呼びます。
また、クローラに関連する用語に以下のようなものがあります。

  • クローリング
    • クローラがウェブを探索すること
  • クロール
    • 「クローリング」と同じ意義
  • クローラビリティ
    • ウェブサイトのページが クローラからアクセス可能なこと、および正しく認識されること
  • Googlebot
    • Google のクローラの総称

クローラによるページの検出は以下の方法で行われます。

  • 既知のページのリンクをたどって検出
  • ウェブサイトの運営者から提出されたサイトマップのURLを元に検出

既知のページのリンクをたどって検出

ウェブサイトが他のブログやウェブサイトでリンク付きで紹介されていると、そのリンクのURLをたどってクローラがページを検出します。

ウェブサイトの運営者から提出されたサイトマップのURLを元に検出

Google Search Console を使ってウェブサイトのサイトマップのURL をGoogle に送信すると、クローラがサイトマップに記述されているページのURL にアクセスしてページを検出します。

4. ウェブサイトの運営者からのインデックス登録の依頼

Google Search Console を使ってインデックス登録したいページのURL をGoogle に送信すると、クローラがそのURL にアクセスしてページを検出します。

5. ウェブサイトからの更新の通知

外部のウェブホストなどからの、新しいページや更新されたページがあることの通知を受けて、クローラがそのページのURL にアクセスしてページを検出します。

調べてみると、この方法がインデックス登録に有効に働くのか良くわからないですが、仕組み自体がなくなっている訳ではないので記載しておきます。

更新情報サービス(XML-RPC ping)

WordPress は標準で、投稿の新規作成や更新をすると、更新情報サービスの設定で登録したURL に向けてXML-RPC ping を送信して、投稿の新規作成や更新があったことを通知する機能があります。
※ XML-RPC ping は、リクエストボディをXML で記述したPOST のHTTP リクエスト

更新情報サービスは、サイドメニューの[設定] > [投稿設定] で登録することができます。

サイドメニューの[設定] > [投稿設定] > 更新情報サービス

デフォルトで”Ping-o-Matic” というWordPress Foundation が運営している更新情報サービスのURLが登録されています。

ここに、他の更新情報サービスのURL を追加すれば、追加したURL にもping が送信されるようになります。

WordPress.org の「更新通知サービス」のページに、例として更新情報サービスのURLがたくさん掲載されていますが、”停止しているものもあるかもしれませんのでご注意下さい” と注意書きがあるので、単純に全てコピペすればOKという訳ではなさそうです。

試しにいくつかのURLにアクセスしてみると、301エラー(Moved Permanently)や404エラー(Not Found)が返ったり、ドメインの名前解決ができないものがありました。現在ではあまり活用されていない仕組みなのでしょうか。

ちなみに、Google は2014年頃にブログ検索というサービスが終了した時点でpingを受けなくなっているようです。

個人的には、意味のない通信を送出するのはあまり気持ちの良いことではないので、当ブログには元々登録されていたPing-o-Matic だけ登録した状態にしておくことにしました。

WebSub(旧名:PubSubHubbub)

WordPress の標準機能ではないですが、プラグインを追加することで前述の「更新情報サービス(XML-RPC)」と同じような、投稿の新規作成や更新をすると、投稿の新規作成や更新があったことを通知するWebSub(旧名:PubSubHubbub)という仕組みを使うことができます。

WebSub のことを簡単に記載しておきます。

  • WebSub はPublisher、Subscriber、Hub の三者で構成される
  • ブログの場合、Publisher(ブログ)、Subscriber(Google)、Hub(Hubサービス) という位置づけになる
  • Publisher が投稿を追加するとHub に通知され、通知を受けたHub はSubscriber にPublisher の投稿が追加されたことを通知する

WordPress のプラグインは下記の2つがよさそうでした。

  • WebSub (FKA. PubSubHubbub)
    • PubSubHubbub Team が開発している
    • WordPress 5.9 リリースの翌日に5.9の対応版がリリースされた(最終更新日:2022/1/27)ので、継続してメンテナンスされていることが期待できる
    • デフォルトの通知先:Google PubSubHubbub Hub、SuperFeedr、WebSubHub
  • PuSHPress
    • Automattic 社がプラグインの開発に関わっている
    • プラグインにHub が組み込まれているので、WordPress からの通知はSubscriber に直接送られる(他のプラグインは、WordPress →Hub →Subscriber の経路で送られる)

当ブログでは、WebSub (FKA. PubSubHubbub) プラグインを使うことにしました。
通知先のHub は、サイドメニューの[設定] > [WebSub] で登録することができます。

WordPressの管理画面 サイドメニューの[設定] > [WebSub]

デフォルトで3つのHub のURL が登録されていました。
一番上の”https://pubsubhubbub.appspot.com” は”google” という文字がないですが、Google のHub のようです。

6. Google Search Console について

過去の投稿でGoogle Search Console を使ってサイトマップの送信とインデックス登録について記載しているので、ここではGoogle Search Console の便利なツールについて簡単に記載します。

サイトマップの登録

サイトマップのURL をGoogle に登録することができます。
登録しておくと、Google はサイトマップに更新がないかを定期的に確認するようになります。

URL検査(インデックス登録)

ウェブサイトの特定のURL に対して、Google にインデックス登録を依頼することができます。
インデックスに登録するかどうかは、Google がページを分析して決定するので、依頼すれば必ず登録される訳ではないです。

robots.txt テスター

robots.txt に対して、以下のチェックをすることができます。

  • robots.txt の構文とロジック上の問題がないかのチェック
  • ウェブサイト上の特定のURLに対して、Google のクローラをブロックできているかのチェック

後者は、例えばGoogle画像検索で表示されたくない画像のURLに対して、Googlebot-Image クローラをブロックできているかのテストができます。

モバイルフレンドリーテスト

ウェブサイトの特定のURL に対して、以下のチェックをすることができます。

  • モバイルデバイスでのページの使いやすさのテスト
  • クローラがページにアクセス可能で、コンテンツを正しく認識できるかのテスト

7. あとがき

SEO の基本を整理しよう、ということでGoogle のSEO対策についてざっと整理してみました。なんとなく要点はつかめたような気がしています。

これまでSEO ということでGoogle のことを取り上げていましたが、今後はMicrosoft のBing のSEO対策など、横に展開することもしていきたいと思います。

参考

WordPressのサイトマップ

WordPress のサイトマップについて調べてみました。

サイトマップとは

サイトマップは、ウェブサイトの投稿やページ、その他のファイルの情報を記述したファイルで、Google などの検索エンジンがこのファイルを読み込むことで、ウェブサイトの情報を効率的に収集することができるようになります。

サイトマップにはオプションとして、コンテンツがいつ更新されたのかや、ウェブサイトがどれぐらいの頻度で更新されているのか等の検索エンジンにとって有益な情報を記述することもできます。

サイトマップの記述ルール等の仕様は、大手検索エンジンのGoogle、Yahoo、Microsoft で標準化を行っています。

  • Sitemaps.org − Sitemap.org (スポンサー:Google、Yahoo、Microsoft)

WordPress 標準のサイトマップ

WordPress は標準でサイトマップが出力されるようになっています。
以前はプラグインが必要でしたが、どうやらWordPress 5.5 で出力されるようになったみたいです。

サイトマップの場所は、ルートの”wp-sitemap.xml” です。
当ブログのサイトマップは下記のURLになります。
※ “sitemap.xml” にアクセスすると”wp-sitemap.xml” にリダイレクトされるようになっていました。

ブラウザからアクセスすると、下記のように表示されます。

WordPress標準のサイトマップ

なお、デフォルトのままでは問題や改善すべき点があったので、以下その対応について記載します。

ユーザ名を非表示にする

デフォルトでは”wp-sitemap-users-1.xml” というサイトマップにWordPress に登録しているユーザのユーザ名が表示されてしまうので、function.php を更新してこのサイトマップを非表示にします。
※ ユーザ名が漏洩すると、攻撃者に管理画面でユーザ名を固定したパスワードのブルートフォース攻撃の機会を与えてしまうので、ユーザ名の漏洩はセキュリティの観点であまり望ましくないことと考えています。

function.php に下記を追記します。(末尾に追記しました)

/**
 * Removing Certain Sitemaps
 * users
 */
add_filter(
    'wp_sitemaps_add_provider',
    function( $provider, $name ) {
        if ( 'users' === $name ) {
            return false;
        }
        return $provider;
    },
    10,
    2
);

これで、“wp-sitemap-users-1.xml” が出力されなくなりました。

“wp-sitemap-users-1.xml” が表示されなくなった

最終更新日を表示する

デフォルトでは最終更新日が出力されないので、function.php を更新して出力されるようにします。
※ 最終更新日がないと、検索エンジンのクローラがコンテンツがいつ更新されたのかや、ウェブサイトがどれぐらいの頻度で更新されているのか等が判断できないので、表示した方がよいみたいです。

function.php に下記を追記します。(末尾に追記しました)

/**
 * Adding Additional Tags to Sitemap Entries
 * lastmod
 */
add_filter(
    'wp_sitemaps_posts_entry',
    function( $entry, $post ) {
        $entry['lastmod'] = date('c', strtotime($post->post_modified_gmt));
        return $entry;
    },
    10,
    2
);

これで、下記のように最終更新日が表示されるようになりました。

最終更新日が表示されていない
最終更新日が表示されるようになった

なお、後述「サイトマップのカスタマイズについて」で案内しているリンク先に最終更新日を追加するサンプルコードが記載されていますが、そのままだと日付の書式がW3C Datetime フォーマットになっていなかったので、W3C Datetime フォーマットで出力されるようにしました。
(Google Search Console でサイトマップのステータスが、”無効な日付” でエラーになっているのがこれで解消されました)

サイトマップのカスタマイズについて

他にも、カスタムサイトマップの追加や、特定の投稿やページの除去、サイトマップ自体を完全に表示しないようにするなど色々できるみたいです。
詳しくは、以下のサイトをご参照ください。

サイトマップまわりの仕組み

robots.txt

robots.txt は、検索エンジンのクローラに対して、サイトのどの URL にアクセスしてよいかを伝えるものです。
robots.txt の場所は、ルートの”robots.txt ” です。
当ブログのrobots.txt は下記のURLになります。

WordPress 標準のサイトマップが出力される状態でrobots.txt を見てみると、下記のようにサイトマップのURLが記述されていました。
この記述により、クローラがサイトマップファイルを見つけることができるようになります。

Sitemap: https://madoverload.com/wp-sitemap.xml

robots メタタグ

robots メタタグは、HTMLページのheadタグ内に「<meta name=’robots’ 〜」と記述するもので、ページ単位で検索エンジンに対して、登録の是非や、ユーザに対して検索結果をどのように表示してもらいたいのかを指定するものです。
当ブログのHTMLページのrobots メタタグは下記の記述になっていました。

<meta name='robots' content='max-image-preview:large' />

WordPress の設定

WordPress の設定画面で、検索エンジンのクローラにサイトマップやページを読み込んでもらいたいかどうかを設定することができます。
管理画面の[設定] > [表示設定] の”検索エンジンでの表示” で行います。

管理画面の[設定] > [表示設定]

“検索エンジンがサイトをインデックスしないようにする” のチェックをOFFにしていると、サイトマップ、robots.txt、robots メタタグはこれまで説明した状態になっていました。

試しにチェックをONにすると、下記の状態になりました。

  • サイトマップのURLにアクセスすると、”お探しのページが見つかりません”というWordPressのページが表示される
  • robots.txt から「Sitemap: https://madoverload.com/wp-sitemap.xml」が消える
  • robots メタタグが下記の記述になる(noindexはページをインデックスに登録してもらいたくない、nofollowはページのリンクを辿ってもらいたくない)
<meta name='robots' content='noindex, nofollow' />

当ブログはもう初期設定も終え、投稿もいくつかしているのでチェックをOFFにして検索エンジンのクローラを受け入れる状態にしておきますが、ブログの開設中はチェックをONにしておいた方がよかったのかもしれません。
(とはいえブログを開設して1ヶ月経ちますが、ドメイン名をググってもヒットしませんでした)

サイトマップをGoogle に送信する

当ブログは開設して1ヶ月になりますが、誰も存在を知らない状態です。Twitter への自動投稿でブログのURLを貼るようにしましたが、アクセス数が0という日も普通にあります。

せっかくサイトマップが出力されるようになっているので、Google にサイトマップの存在を知らせてインデックスに登録してもらうよう働きかけてみたいと思います。

調べてみると、Google Search Console にサイトマップを送信することで、それができるようです。
以下、その手順を記載します。

1. Search Console にブログを登録する

サイトマップをGoogle Search Console に送信する為には、Search Console に自身のウェブサイトのドメインまたはURLを登録して、そのウェブサイトが自身に所有権があることを証明する必要があります。
具体的な手順は省略しますが、今回は下記で行いました。

  • プロパティタイプの選択:URLプレフィックス
  • 所有権の確認:指定されたHTMLファイルをダウンロードして自サイトにアップロード

2. Search Console にサイトマップを送信する

Search Console にウェブサイトを登録すると、Search Console の管理画面が表示されます。
サイドメニューの[インデックス] > [サイトマップ] をクリックすると、”新しいサイトマップの追加” というサイトマップのファイル名を入力するフォームが表示されるので、ファイル名を入力して[送信] ボタンをクリックします。

サイドメニューの[インデックス] > [サイトマップ]

サイトマップの送信が完了すると、下記のメッセージが表示されます。

[OK] ボタンをクリックすると元の画面に戻り、送信する前は何も表示されていなかった”送信されたサイトマップ” に、今回送信したサイトマップが表示されます。
送信してすぐはステータスが”取得できませんでした” となっていましたが、1〜2分待つと”成功しました” に更新されました。

サイドメニューの[インデックス] > [サイトマップ]

ここで、送信したサイトマップをクリックすると、読み込まれたサイトマップの処理結果を確認することができます。

読み込まれたサイトマップ(エラーあり)

ステータスがエラーになっているサイトマップがあるので、エラーになっているサイトマップをクリックすると詳細情報が表示されます。

サイトマップの詳細情報(エラー)

サイトマップの読み込みはできるようですが、「親タグ:url、タグ:lastmod」の日付の値に問題があるということです。

このエラーは、前述「最終更新日を表示する」に記載した最終更新日の日付の書式がW3C Datetime フォーマットになっていなかったことが原因によるもので、W3C Datetime フォーマットで出力されるようにすることで解消することができました。

読み込まれたサイトマップ(エラーなし)

エラーが解消されたサイトマップをクリックすると、詳細画面も”サイトマップは正常に処理されました” となっていました。

サイトマップの詳細情報(正常)

なお、エラーの原因を解消しても直ぐにはステータスが更新されず、24時間経ってから見てみるとステータスが”成功しました” に更新されていました。
試しに、送信した日にSearch Console に登録したサイトマップを削除し、再度”新しいサイトマップの追加” をしてみたのですが、エラーのままだったので、この登録はキャッシュに登録されて定期的に処理されているのかもしれません。

サイトマップの再送について調べてみると、Search Console のヘルプに「サイトマップを変更した場合でも、Google がすでに認識しているサイトマップを再送信する必要はありません。Google は、次にサイトをクロールしたときに、変更を検出します」という記載がありました。
これは、再送は即時に反映される訳ではないということの裏返しの表現なのかもしれません。

あとがき

サイトマップを表示させるためにはプラグインの導入が必要と思っていましたが、調べてみるとプラグインがなくてもなんとかなりました。
ただ、プラグインを入れたからこそできることというのがあるかもしれないので、もし必要にかられたら導入を検討したいと思います。

サイトマップのGoogle への登録が成功し、エラーもなくなりましたが、今回の作業が完了した後にドメイン名をググってもヒットしませんでした。
はたして、いつになったら検索結果に表示されるのでしょうか。。

参考

WordPress→Twitter の導線

WordPress のブログからTwitter への導線について考察してみます。
ブログを見に来てくれた人がTwitter をやっていることに気づき、ツイートを見に来たり、アカウントをフォローする流れが感覚的にできる状態になっているのかを整理したいと思います。

Twitter のフォロアーになってくれれば、タイムラインに流れるTwitter へのブログの自動投稿が目に入り、ブログに来てくれることにつながるので、ブログとTwitter の両方を運用するのであれば意識しておいた方がよさそうです。

1. Twitter をやっていることに気づく

ブログのトップページや投稿のページを開いた時は、PCとスマホともに画面上にTwitter をやっていることがわかるボタンやアイコンは表示されていないです。
ただ、投稿を読んで気に入ってくれた時に気づいてもらえれば良いというのと、デザイン上もページが表示された時にあまり雑音がない状態にしておきたいので、これでよいことにします。

上記の「投稿を読んで気に入ってくれた時に気づいてもらえれば良い」という点で、投稿の下には共有ボタンを表示するようにしてあります。

また、PCではサイドバーが右に表示されるので、投稿を読んでいる途中でサイドバーにあるTwitter ボタン(フォローボタンとメンションボタン) に気づいてもらえるかもしれません。

あと、ページの先頭になければ末尾に探しに行くという行動を想定して、ページの末尾のフッター部にTwitter アイコンを表示してあります。

2. Twitter のツイートを見に来たり、アカウントをフォローする

投稿の共有ボタン

投稿の下に共有ボタンを表示してあります。
投稿の先頭に配置してもよいのかもしれませんが、投稿を読み終わった時にそのままシェアという行動に移れるので、ここに配置するのが自然かと思います。

共有ボタンをクリックすると、Twitter のツイートするウィンドウが開き、そこには投稿のタイトルとURLが既に入力された状態になります。

サイドメニューのTwitterボタン(フォローボタン)

サイドバーに“@RodentGiantさんをフォロー” というボタンを表示してあります。
このボタンのデザインから、このボタンをクリックすればフォローする流れにつながると予想できると思います。

ボタンをクリックすると、Twitterアカウントのページが開き、[フォロー] ボタンが表示されるようになっています。

サイドメニューのTwitterボタン(メンションボタン)

サイドバーに”@RodentGiantさんへツイートする” というボタンを表示してあります。
このボタンのデザインから、このボタンをクリックすれば@RodentGiant 宛にツイートする流れにつながると予想できると思います。

ボタンをクリックすると、Twitter のツイートするウィンドウが開き、そこには”@RodentGiant” が入力された状態になります。

このTwitter ボタンはTwitter Publish で生成したHTMLコードをウィジェットに貼り付けて表示しています。

ページ末尾のTwitterアイコン

ページの末尾のフッター部にTwitter アイコンを表示してあります。
鳥の絵だけの文字がないアイコンのデザインなので、このアイコンをクリックすればTwitter のアカウントのページが表示されると予想できると思います。

このアイコンはWordPress 標準のソーシャルリンクメニューを使って表示しています。
以下、表示させる手順を記載します。

  1. [外観] > [メニュー] をクリック
  2. [メニューを編集]タブの[メニュー構造] を編集する
    • Twitter 以外(Facebook、Instagram、メール)のカスタムリンクを削除
    • Twitter のURLに自身のTwitter アカウントのURLを指定
  3. [メニュー設定] の[メニューの位置] にある”ソーシャルリンクメニュー” のチェックを入れて、[メニューを保存] ボタンをクリック

※ 上記の手順だけでなく、[外観] > [カスタマイズ] > [メニュー] > [サブメニュー] でも同じ設定ができます。

3. その他

投稿の本文へのツイートの埋め込み

直前の投稿「Twitter Publish」で記載した方法で、Twitter の特定のツイートを投稿に埋め込むことができるので、ここからTwitter のツイートのページを表示させることができます。

位置づけがなんとなく上記「2. Twitter のツイートを見に来たり、アカウントをフォローする」と違うのでその他として記載しておきました。

  • 自分以外のTwitter アカウントのツイートの埋め込み
    • クリックすると、その人のツイートが表示される
    • 投稿に誰かのツイートを掲載したい時に使う
  • 自分のTwitter アカウントのツイートの埋め込み
    • クリックすると@RodentGiant のアカウントのツイートが表示される
    • 自分のツイートを掲載したい時に使う(やる機会があまりなさそう)

あとがき

投稿の共有ボタンを表示する方法について、今回は記載しませんでした。機会があったら書こうと思います。

参照

Twitter Publish

自身のブログやホームページにTwitter のツイートやボタンを埋め込む方法として、Twitter社がTwitter Publish というサービスを提供しています。
Twitter Publish − Twitter

使い方

1. URLを指定

“What would you like to embed?” と表示されているので、埋め込みたいページのURLを入力して[→] をクリック。

URLを指定

2. タイムラインの埋め込み(左)かTwitter ボタン(右)か選択

“Here are your display options” と表示されているので、”Embedded Timeline”(左)か”Twitter Buttons”(右)のどちらかをクリック。

選択(タイムラインの埋め込み、Twitterボタン)

3. タイムラインの埋め込み

“Embedded Timeline” を選択すると、
埋め込み用のHTMLタグが表示されるので、下の方に表示されているプレビューでよければ、[Copy Code] ボタンをクリックして、自身のブログ等に貼り付けます。
※ [Copy Code] ボタンをクリックすると、クリップボードにHTMLタグがコピーされます。

“set customization options” という青文字がリンクになっているので、このリンクをクリックすると、デザインをカスタマイズすることができます。
デザインを選択するオプションが表示されるので、適宜変更して[Update] をクリック。

4. Twitter ボタン

Twitter Buttons” を選択すると、
“Select the button you’d like to use” と表示されるので、”Follow Button”(左)か”Mention Button”(右)のどちらかをクリック。

選択(フォローボタン、メンションボタン)

4-1. フォローボタン

“Follow Button”(左)を選択すると、
埋め込み用のHTMLタグが表示されるので、下に表示されているプレビューでよければ、[Copy Code] ボタンをクリックして、自身のブログ等に貼り付けます。
※ “set customization options” のリンクからデザインのカスタマイズが可能

4-2. メンションボタン

Mention Button”(右)を選択すると、
埋め込み用のHTMLタグが表示されるので、下に表示されているプレビューでよければ、[Copy Code] ボタンをクリックして、自身のブログ等に貼り付けます。
※ “set customization options” のリンクからデザインのカスタマイズが可能

実際の埋め込み結果

実際にこのページに埋め込んでみました。
埋め込むと以下のように表示されます。

タイムラインの埋め込み

プロフィールページのURL(https://twitter.com/RodentGiant)

ツイートページのURL(https://twitter.com/RodentGiant/status/1481924474740293645)

Twitterボタン(フォローボタン)

Twitterボタン(メンションボタン)

WordPress での利用

WordPress へのHTMLタグの埋め込み

[Copy Code] ボタンをクリックしてクリップボードにコピーしたHTMLタグは、WordPress ではカスタムHTMLのブロックに貼り付けるだけで、ページに埋め込むことができます。

WordPress の埋め込みブロックの機能

なお、WordPress には埋め込みブロックという便利な機能があるので、埋め込みたいTwitter のページのURLを指定するだけで簡単に、Twitter Publish で作ったHTMLタグを使うのと同じように表示させることができます。
デザインのカスタマイズをしたい場合はTwitter Publish を使う、あまり凝らずに簡単に貼り付けたい場合は埋め込みブロックを使う、というように使い分けをしてもよいのかもしれないです。

参照

WordPressのユーザーのアバター

WordPress のユーザーのアバターを設定します。ここでいうアバターはアイコン画像のことで、管理画面のログインユーザや投稿の投稿者の表示などで使われます。

WordPress のユーザーのアバターは、Gravatar というサービスにアカウントを作りアイコン画像を登録することで、WordPress 上に表示されるようになります。管理画面でアイコン画像をアップロードして設定するということはできないようです。

Gravatar とは

Gravatar の公式サイトに「Globally Recognized Avatar」と説明があります。登録したアバター(アイコン画像)が世界中の色々なウェブサービス(Slack、GitHubなど)で認識されて、アカウントと紐付けて自動で表示される、という感じでしょうか。
運営はAutomattic というWordPress.com を運営している会社が行っています。この会社はプラグインのAkismet やJetpack の運営も行っていて、2018年にはTumblr社を買収しているので、世間的にはある程度の信頼を得ている会社なのではないかと思われます。
Gravatar(公式サイト)

Gravatar のアカウント登録

Gravatar のアカウント登録は、WordPress.com アカウントを使って行います。つまり、既にWordPress.com アカウントを持っている人はそのアカウントを使ってGravatar のアカウントを登録することができますが、持っていない人は新たにWordPress.com アカウントを登録する必要があるということになります。
WordPress.com(公式サイト)

具体的にアカウント登録の方法は、以下の3つのパターンがあります。

  • 既にWordPress.com アカウントを持ってる人向け
  • 新たにWordPress.com アカウントを登録する人向け(メールアドレスとパスワードを使ってアカウントを登録)
  • 新たにWordPress.com アカウントを登録する人向け(GoogleまたはAppleのアカウントを使ってアカウントを登録)

Gravatar のアカウントを登録するためには、まずはGravatar のウェブサイトにアクセスします。
WordPress の管理画面で、
[ユーザー] > [プロフィール写真] の [Gravatar でプロフィール画像の変更が可能です] のリンクをクリックしてGravatar のウェブサイトにアクセスすることができます。

既にWordPress.com アカウントを持ってる人向け

既に持っているWordPress.com アカウントを使ってGravatar のアカウントを登録します。

  1. Gravatar のトップページにある[Gravatar を作成] ボタンをクリック
  2. [すでに WordPress.com のアカウントをお持ちですか?] のリンクをクリック
  3. 持っているWordPress.com アカウントでログインします。(下記のいずれか)
    • メールアドレスまたはユーザー名とパスワードを使ってログイン
    • GoogleまたはAppleのアカウントを使ってログイン
  4. “Sign in to Gravatar with WordPress.com Connect” で[Sign in with WordPress.com] ボタンをクリック
  5. WordPress.comからメールが送られてくるのでメール本文の[有効化]ボタンをクリックすると、Gravator のアカウントが登録されます

新たにWordPress.com アカウントを登録する人向け(メールアドレスとパスワードを使ってアカウントを登録)

Gravatar のウェブサイト上で、メールアドレス、ユーザー名、パスワードを入力してアカウントを登録する方法です。登録完了後のGravatar へのログインは、登録したメールアドレスまたはユーザー名とパスワードを入力して行います。いわゆるパスワード認証です。

アカウントの登録は以下の手順で行います。

  1. Gravatar のトップページにある[Gravatar を作成] ボタンをクリック
  2. “WordPress.com アカウントを使用して Gravatar にサインアップする” と表示されているページで下記を入力して[アカウントを作成] ボタンをクリック
    • メールアドレス
    • ユーザー名
    • パスワード
  3. “Sign in to Gravatar with WordPress.com Connect” で[Sign in with WordPress.com] ボタンをクリック
  4. WordPress.comからメールが送られてくるのでメール本文の[有効化]ボタンをクリックすると、WordPress.com とGravator のアカウントが登録されます

新たにWordPress.com アカウントを登録する人向け(GoogleまたはAppleのアカウントを使ってアカウントを登録)

WordPress.com とGravatarのアカウントのパスワードを管理したくない人向けです。Gravatarを使う為にはWordPress.com アカウントを持つ必要がありますが、WordPress.com アカウントはGoogle またはApple のアカウントを使ってログインすることができるので、これを利用します。いわゆるソーシャルログイン(SNS認証)です。

手順としては、(1) Google またはApple のアカウントを使ってWordPress.com アカウントを作成してから、(2) 上記”既にWordPress.com アカウントを持ってる人向け” の手順でWordPress.com アカウントでGravatar にログインしてGravatarにサインアップ(Gravatar のアカウントを登録)する、という流れになります。

  • WordPress.com アカウントの作成
    1. WordPress.com のウェブサイトにアクセスします。(ブラウザのアドレスバーに https://wordpress.com を入力してWordPress.com のページを開くなど)
    2. 右上の[始めてみよう]ボタンをクリック
    3. “ここからスタート。まず、WordPress.com アカウントを作成してください” と表示されているページで、下記のいずれかの方法でアカウントを作成する。(細かい手順は省略します)
      • メールアドレス、ユーザー名、パスワードを入力して作成
      • GoogleまたはAppleのアカウントを使って作成
    4. ドメインを選択します
      • 選択窓に任意の名称を入力します。入力した名称が未登録だと、入力した名称をサブドメインとした「入力した名称.wordpress.com」のような無料のドメインが選択できます。
    5. プランを選択します
      • パーソナル、プレミアム、ビジネス、eコマースなど有料のプランが目立って表示されていますが、[無料サイトで開始] のリンクから無料のサイトを選択することが可能です。
    6. WordPress.comからメールが送られてくるのでメール本文の[今すぐ認証]ボタンをクリックすると、WordPress.com のアカウントが登録されます
  • Gravatar アカウントの登録
    • 上記”既にWordPress.com アカウントを持ってる人向け” 参照

Gravatar のアバターを登録

Gravatar アカウントの登録が完了したら、自身のアバター(アイコン画像)をアップロードします。
わたしがアップロードした画像はこちらです。

Capybara dim
Capybara(dim)

ちなみに、Google のカウントにプロフィール写真を登録しておくと、Gravatar アカウントを登録した際にその画像が登録されます。

画像は複数アップロードしておいて選択することができるので、気分でアバターを変えたい場合は使いたい画像をすべてアップロードしておいて、変えたくなったら都度変更するという使い方もよさそうです。

Gravatar への画像の追加は、いろいろなところでできるようです。
・右上のアイコンをクリックして表示されるメニューから[画像を追加] をクリック
・メニューの[マイプロフィール]をクリックし、サイドバーの[フォトギャラリー] を選択して[新規画像を追加]ボタンをクリック
・メニューの[マイGravatar] をクリックし、”2. 新規画像を選択”の”新規画像を追加” のリンクをクリック

Gravatar に画像を追加する方法は下記の4種類の方法があります。
・新規アップロード
・過去のアップロード
・URLから
・ウェブカメラから

この中から”新規アップロード” の手順を記載します。

画像を新規アップロードする手順

  1. [ファイルを選択] ボタンをクリックして端末上の画像ファイルを選択し[次へ] をクリック
    • アップロードする画像のサイズは10MBという制限があります
  2. アップロードした画像の切り抜きを行います。
  3. レーティングの選択
    • 年齢を確認するオプションで、画像が誰に対して表示するのに適切であるのかを指定します。
    • 通常は”G” を選択すると思いますが、子どもには不適切な場合や人によっては不快に感じる可能性がある場合は”G” 以外を設定します。
      • G:誰に対してもOK
      • PG:失礼な振る舞い、挑発的な服装、冒涜的な言葉、軽い暴力を含む
      • R:冒涜的な表現、激しい暴力、ヌード、薬物の乱用等を含む
      • X:ハードコアな性的画像や非常に不快な暴力を含む
  4. 画像に割り当てるメールアドレスを選択
    • 割り当てる場合は、対象のメールアドレスにチェックを入れて、[選択したアドレスに使用する] をクリック
    • 割り当てない場合は、[この画像はまだ使用しない] ボタンをクリック

WordPress 上にアバターを表示する

WordPressのユーザーとGravatarのアカウントの紐付けは登録したメールアドレスで行われる仕組みになっています。
もし、WordPressのユーザーとGravatarのアカウントのメールアドレスが同じであれは、この時点でWordPress上にアバターが表示されているのではないでしょうか?

管理画面の[ユーザー] > [プロフィール] のプロフィール写真
ログイン中の右上
投稿ページの投稿者

WordPress のユーザのメールアドレスと、Gravatar に登録されているメールアドレスが異なる場合

もし、WordPress のユーザーとGravatar のアカウントに登録されているメールアドレスが異なっている場合は、Gravatar に登録したアバターをWordPress のユーザーに紐付けることができないのでWordPress に表示されません。この場合は、WordPress のユーザーのメールアドレスを、Gravatar に追加することで紐付けることが可能です。

Gravatar のアカウントにメールアドレスを追加する手順

  1. Gravatar にログインして右上のアイコンをクリックして表示されるメニューから[メールアドレスの追加] を選択します
  2. 追加するメールアドレスを入力して[追加] ボタンをクリック
  3. Gravatar(gravatar.com ドメインのメールアドレス)からメールが送られてくるのでメール本文の認証用のURLをクリック(またはブラウザにURLを貼り付ける)すると、Gravatar アカウントにメールアドレスが追加されます
  4. メニューの[マイGravatar] をクリックして、”Gravatars を管理” の”1. 修正するメールを選択” で追加したメールアドレスを選択
  5. “2. 新規画像を選択” でメールアドレスに紐付ける画像を選択します。画像を追加したい場合は、[新規画像を追加] リンクをクリックして画像を追加してから選択します。

参照

WordPressのセキュリティ対策(WP本体)その3

WordPress本体に対して行うセキュリティ対策「WordPressのセキュリティ対策(WP本体)その2」の続きです。

サイトヘルス機能

管理画面を見ていたら「サイトヘルスステータス」というのがあるのに気づきました。

緑の丸で”良好” となっていますが、パフォーマンスやセキュリティを改善する余地があるようです。”サイトヘルス画面” のリンクをクリックすると、サイトヘルスというページが開きました。
[ツール] > [サイトヘルス] でもこの画面が開けるようです。初めて知りました。この画面には”ステータス”と”情報”の2つのタブがあり、デフォルトでは”ステータス”タブが表示されるようになっています。

サイトヘルスステータス

ステータス

セキュリティ観点の改善点が2つあるようです。
・停止中のプラグインの削除
・停止中のテーマの削除

プラグインについては、さくらインターネットのクイックインストールという機能を使ってWordPressをインストールしたのですが、自動的に幾つかのプラグインがインストールされていてそのまま放置していました。有効にするか検討してから不要なものを削除したいので、今回はこのままにしておきます。(宿題)

テーマは、先月デザインのカスタマイズをしたところで、敢えて変える理由が現状はないので停止中のものは削除することにしました。
テーマの削除は、[外観] > [テーマ] で削除したいテーマを選択して表示されるテーマの詳細画面の右下に”削除” ボタンがあるので、これで削除できます。
(今回削除したのは、”Twenty Nineteen”、”Twenty Twenty”、”Twenty Twenty-One”の3つ)

セキュリティ以外で、パフォーマンスの改善点も1つありますが、今回は対応を見送ります。(宿題)

「テスト通過 v」というボタンがあるのでこれをクリックすると、問題ないと判断された複数の項目が表示されました。セキュリティの項目は7つありました。
・サイトは他のサービスと安全に接続可能です
・このサイトは設定ではデバッグ情報を出力しません
・プラグインとテーマの自動更新は正しく設定されているようです
・WordPress.org に接続可能です
・バックグラウンド更新が動作中です
・サイトは有効なHTTP 接続を使用しています
・Authorization ヘッダーは適切に動作しています

詳しくは、公式サイトに記載されています。
サイトヘルス画面 − WordPress.ORG(日本語)

サイトヘルス情報

もう一つのタブ”情報” をクリックすると、サイトヘルス情報という画面が表示されます。

情報

ここでは、WordPress の構成に関する詳細情報が、10個の分類で表示されていて、各分類の”v”をクリックすると詳細の項目が表示されます。
・WordPress
・ディレクトリとサイズ
・現在のテーマ
・使用中のプラグイン
・停止中のプラグイン
・メディア処理
・サーバー
・データベース
・WordPress 定数
・ファイルシステムパーミッション

どうやら、レンタルサーバーの管理画面で確認していたものが、WordPress の管理画面で確認できるようです。

ここで挙げられている項目に改善点があれば、ステータスの方に表示されるという仕組みになっているようです。セキュリティ対策が最低限できているかが一目瞭然でとても親切で助かります。

あとがき

今回はここまで。
停止中のプラグインの削除が宿題として残っていますが、とりあえずこの程度の個人ブログとしては、一通りのセキュリティ対策はできたのではないかと思います。次回また何かネタがあれば投稿しようと思います。

WordPressのfavicon

WordPressのfaviconをデフォルトから自分が用意したアイコン画像に変更します。

favicon の作成と設定

[外観] > [カスタマイズ] で開いたテーマのカスタマイズ画面で、サイドメニューの[サイト基本情報] を選択するとサイドメニューに表示される「サイトアイコン」で自作のアイコン画像を選択して指定することができます。

画像のサイズは「サイトアイコンは512 × 512ピクセル以上の正方形にしてください」とのことです。

今回、このブログ向けにアイコン画像を自作してみました。画像のサイズが間違えて512 × 512ピクセルより少し大きく作ってしまったのですが、画像をアップロードした後に512 × 512ピクセルで切り抜きする機能があったので調整することができました。
自作のアイコン画像はこちら(PNG形式で作りました)↓

あとがき

自作のアイコン画像は、ブログの名前「Mad Overload」の頭文字「M」にしました。
ゲームWizardryの頭文字「W」を回転させると「M」になるので、ここでもWizardry感を出してみました。
ただ、実際に指定してブラウザのタグを見てみると、字が細くて何かしょぼい。。
気が向いたら字を太くするとか、もっといいデザインを考えようと思います。