ブログ

テーマにOceanWPを使う

特徴としては以下の要素があります。

• カスタマイズのしやすさと柔軟性
• 標準でパンくずリストなどのSEO対策済み
• 軽量で見やすい

導入すると大量のカスタマイズ項目があるので少しづつ学んでいきます。

インストール後に以下のエラーが出る場合があります。

REST APIとの通信ができないとするエラーが出て、パーマリンクを更新するように言われる場合があります。

WP REST API Connection Error Detected.
Connection refused

パーマリンクの問題のほかに、サーバーの移動後に前の設定を読み込んでいることが考えられます。WP Statisticsの設定から設定をリセットします。

ちなみに、パーマリンクの設定が開けない場合があります。.htaccessのパーミッションを確認するか、.htaccessを使わない場合はmisc.phpの70行目あたりを以下の通りに変更することで一応対処できます。

if ( ! file_exists( $filename ) or file( $filename ) == false) {
        return $result;
}

Search Consoleで検索パフォーマンスを見る

WP StatisticsはクローラーやBotのアクセスも拾ってしまうので、こちらの方がデータとしては有用かもしれません。

Googleアカウントでのログインとサイトの登録が必要です。

記事のtitleタグからサイト名を消す

美味しいクッキーの作り方 - 佐竹佐恵子のブログ

ハイフンから左側はタイトルですが、右側はクッキーのレシピを求めている人には特に必要ない情報です。

カタ通さんの「タイトルタグにブログ名（サイト名）をあえて入れないSEO対策」にあるように、特定分野がサイト名になっていない限り検索エンジンを混乱させてしまうような気がするので、今回はこのハイフン以降を削除します。方法としては以下の二通りあります。

functions.phpにフィルターフックを追加する

titleタグを出力するかはテーマのfunctions.phpで決定することができます。OceanWPの場合、333行目あたりにadd_theme_support( 'title-tag' );という文があり、これで出力させています。

何も設定しなければこれで標準のtitleタグが出力されるのですが、フィルターフックを利用すると変更できます。Web Design Leavesさんの「WordPress title タグの出力」が最もわかりやすいと思います。

詳しいことは記事を読んでもらうとして、以下のコードをfunctions.phpの29行目あたりに入れてください。

function my_edit_document_title_parts( $title ) {
 if ( is_singular() ) {
  $title['site'] = '';
 }
 return $title;
}
add_filter('document_title_parts', 'my_edit_document_title_parts');

is_singular()は記事かどうかを判定しています。もしそうであれば、$title['site']を空にしてサイト名を出力させないようにします。add_filter()でこれらの処理をフィルターに登録します。

これで記事からサイト名が消えたはずです。固定ページやトップページにはまだ残っています。上記のサイトには区切り文字のためのフィルターフックについても書いてあるので、興味のある方は読んでみてください。

プラグインを使う

ただし、これはSEO用のプラグインなのですが他のプラグインと重複する機能が多い上、有料版でしか使えない機能が多く微妙に使いづらいのが欠点です。

例えばサイトマップ出力機能はWordpressに標準でついていて、パンくずリストはOceanWPについていて、アクセス統計機能はWP Statisticsの方が高機能で……と言った風に結局titleタグ編集用途にしか使いませんでした。それだけならまだしも、これを導入していると管理画面と編集画面が非常に重くなるので諦めてしまいました。

良い面としては、手軽に導入できること、テーマやWordpressのアップデートで壊れる心配がないということだと思います。
上記のfunctions.phpを直接編集する方法では、テーマのアップデート時に上書きされるのでその度に修正が必要になると思います。

Turnstileでコメントスパム避け

「固定ページ」のコメントを無効化

スクリプトを直接編集してもできるようですが、アップデートなどで動作しなくなるかもしれないためDisable Commentsというプラグインで対応します。

このプラグインでは記事、固定ページ、添付ファイルの3つに分けてコメントを無効化できます。今回は固定ページのみにチェックを入れました。

faviconの設定

faviconとは、サイトを開いた時にタブの横に表示される画像のことです。元々はIEの「お気に入り」に追加する際のアイコンだったのですが、現在ではGoogleなどの検索結果にも表示されるようになりました。現在ではこれが設定されていないと検索結果上でスパムブログと見分けがつきにくくなるのでぜひ設定したいところです。

サイズについては縦横16pxが一般的とされたりしますが、Googleのガイドラインによると48pxかその倍数でなければならないと書いてあります。
また形式については実行ファイルのアイコンに使われたりするico形式が一般的ですが、png形式などでも問題ないようです。

こういった規格を一つひとつ見ながら設定するのもいいですが、faviconは規格が非常に複雑なのでFavicon Generatorなど専用のジェネレーターサイトを使うのが手軽だと思います。

作成したら外観→カスタマイズ→サイト基本情報からアップロードしましょう。ここでは画像のサイズは512px以上と指定されています。

ドット絵

ドット絵はスケーリングの際にぼやけたり、48px以下だったりと問題が発生することが多いです。これはpaint.NETなどのニアレストネイバー法が使えるペイントソフトで適切な大きさにした方がいいと思います。

ブラウザ上で完結させたい場合、ドット絵を縮小するのは「【ぼやけない】ドット絵の縮小/拡大用のWebツール【PNG保存】」、拡大するのはPixel Art Scalerがいいと思います。

robots.txtと.htaccessの最適化

robots.txtは検索エンジンのクローラーが読み込むテキストファイルで、検索結果に表示して欲しくないページやディレクトリ、サイトマップを指定します。パーマリンクを設定している場合は自動でこれが生成されていると思います。
/wp-json/を拒否する設定を入れると書いてあったりしますが、そもそもコンテンツとしての価値が低いためrobots.txtで拒否するようなページは元から検索結果に出てこない気がするのでそこまで重要視しなくても良いと思います。

.htaccessはApache系のWebサーバーでの設定を書いたファイルです。「expiresヘッダを調整して画像の通信量を抑制する」にあるように、画像ファイルのキャッシュを以下のような文で最適化すると良いとされています。

<IfModule mod_expires.c>
 <filesMatch ".(jpg|jpeg|png|gif|swf|js|css)$">
  ExpiresActive On
  ExpiresDefault "access plus 1 months"
 </filesMatch>
</IfModule>