WordPress、プラグインを使わずSEOを自力でやってみたメモ

WordPressでサイトを作ると自力でやらなくともプラグインを使うともう全部やってくれますので
ALL IN ONE SEOというのを使わせてもらってました

設置してるとき・外した後にスピードテストで計測してみたら1点上がりましたけども、面倒な色々と天秤にかけても1点なんか誤差の範囲、使ったほうが楽なのでぜひ

使っててこれはすごいな、と思ったところがたくさんあって

  • ・管理画面でしつこくアラートが出るので漏れることがない
  • ・どんなページもmetaタグしっかり引っ張ってる
  • ・サイトマップもしっかりしててrssやxmlで準備してくれてる
  • ・タグも管理画面から入れられるのでコード読めない人も設置できる
  • ・常にアップデートしてるのすごい

これで無料なのだから本当に有難いツールです
便利に使わせていただきました
ありがとうございました

ただ、自分は制作の仕事してるので
誰かの力に頼らずに
できそうなものは自分でやってみたい

実装&検証したのはこちらのサイト
いろいろ実験台になってくれてます、うたた寝してるフクロウちゃんです

パンくずリスト生成

WordPressっていろんなものが用意されているというのにパンくずに関しては自分で吐き出してくれないようだったので、動的に吐き出すには何らかのプラグインを使ったり、function.phpに記述するなどします

検索すると色々なやり方が出てきます
みなさんいろんなこと試してるんですね
中でもすごいなと思ったのがこれ

参考サイト
【JSON-LD対応】WordPressでプラグインを使わずにパンくずリストを自動で生成するコードを自作してみた

json-ldで吐き出してくれるの素晴らしいです!
記録を書き残してくださり本当にありがとうございます、こちらを参考にアレンジしました

構造化データをテストっていうGoogleさんが作っているツールで、パンくずの部分のコードを貼り付けて検証できますのでテストしてみてくださいね

metaタグの生成

やりたいことはこんな感じです

  • ・meta:トップ/一覧/記事のそれぞれ
  • ・canonicalの設定:一覧2ページ目とかは1ページ目にしたいんだ
  • ・OGP設定それぞれ
  • ・OGP画像がなかったときの処理

出したかったものはこれで

<!-- それぞれ -->
<title>ページタイトル | サイト名</title>
<meta name="description" content="記事の抜粋">
<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="記事の抜粋" />
<meta property="og:image" content="画像のURL" />
<meta property="og:type" content="websiteとかblogとかarticleとか"/>
<link rel="canonical" href="正規化したURL">

<!-- 共通 -->
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />

headの中で条件分岐で出力させようとしたんですが
画像がなかった処理。どうしようか迷った末に
とってもわかりやすかったこちらの記事を参考にアレンジしました

参考サイト
【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法

さるわかさんの記事ではトップと投稿・固定ページ(記事)のOGPの設定をfunction.phpでできるようになります
加えて、headの中にカテゴリー一覧のmetaを吐き出すようにしました

その際カテゴリーやタグの説明文を引っ張りたく
pタグごと吐き出されるため function.php に以下を記述し内容だけを引っ張りました

// カテゴリーとタグのmeta descriptionからpタグを除去する
remove_filter('term_description','wpautop');

WordPressはカテゴリーごとに画像を設定するなどができません
普通のサイトだと、DBのテーブルにカラムを追加したりするところを
カスタムフィールドっていう機能を利用し、専用のテーブルに格納する仕組みになってます
こちらの記事がわかりやすかったです
今度じっくり腰を据えて、画像を変えてみようかな

WordPressが自動挿入するcanonicalだとカテゴリの2ページ目以降ちゃんと引っ張れなかったため
こちらの記事を参考にさせていただきました

参考サイト
【WordPress】canonicalタグを出力する関数を作る

助かりました、ありがとうございました!

xmlの生成

サイトマップを生成してくれるwebサービスもありますし、WPはもともとxmlを生成する機能を持っているようですが、記事を更新したタイミングでサイトマップを吐き出したかった。
こちらの記事を参考に、function.phpに記述

参考サイト
プラグインなし WordPressのXMLサイトマップを自動更新する方法!

ありがとうございました、とっても助かりました

わたしが作ったサイトはURLに「category」を含めない作りにしていたのでhtaccessで制御をしなくちゃだったり、ちょっとめんどくさくなってしまいました
深い意味がなかったので、URLは素直にcategory入れとけば良かった、と思います

いざ検証

1回目、書いたmetaが読み込まれておらず・・

サジェストはページ本文のpタグから関連するテキストを引っ張られてました

Googleさんはmetaとサイトの内容が一致しないときはページの内容から引っ張ってくるんでしょうか
逆にいうと内容までしっかり見てるってことなのかもしれません

metaが重複しているところがあったので修正。
引っ張られていたpタグにこれを
スニペットとして拾われないようにする「data-nosnippet」

<p data-nosnippet>utatane creates structured website. It makes you easy to customize, increase processing speed, and enjoy for long time.</p>

引っ張られそうなpタグにも先回りして書いておきます

サーチコンソールで読み込みしたら直りました
検証に時間がかかりすぎた!
思いの外、長い戦いとなりました

WordPress使わずにサイトを作るときは全部自力で、がマストですが、
WordPressの場合は元々本体の機能として入っていたり、痒いところに手が届くような便利なプラグインがたくさんあるので深く考えずに当たり前に動いてくれます
改めて、WPもプラグインもすごいなと思う反面、裏でこんな面倒なことしてるんだなとか、検索に上がる仕組みなども自分でやらないと実感できないところではありましたので、やってみて良かったです

SHARE

  • *
  • *
  • *