WpTHK 3.01 リリース(SEO 強化と修正) アップデート大推奨
SEO 関連の強化と修正をしました + α。
以下、開発者ブログの方に書いてある内容と同じです。
data-vocabulary.org が運営を停止してしまったので、
WpTHK 3.x からパンくずリストも全て、schema.org に移行したのですが、Google の構造化データを見直したところ、
パンくずは、BreadcrumbList だけでなく、breadcrumb で全体を囲まないとダメみたい。
なので、修正しました。また、schema.org で汎用的に付けられそうな箇所が、他にもあったので拡張して付与しました。
特に schema.org 2.0 で追加された mainEntityOfPage を Google がちゃんと認識してることを確認できたので、これが使えるのは大きい。
テーマとしての汎用性を持たせるために、 Artcle を付けられずにいたけど、 Article でなくとも、ほぼ全てで付けられる mainEntityOfPage が使えるので、投稿本文に付与して「これがメインのコンテンツだよ」と検索エンジンに伝えることができるようになりました(まぁ、もともとメインの部分は HTML5 の article で囲ってるので、意味あるか分からんけど)。
さらに、デフォルトのテンプレートじゃ無理だけど、プログラムさえ書き換えれば、コメントにも付けられそうだったので、 UserComments と、その配下のプロパティ ( creator, commentTime, commentText, replyToUrl ) も付けました。 WordPress のテーマで UserComments まで、しっかり付けてるテーマって、なかなか無いんじゃないですかね?
それ以外、もともと付いてるものも含めて、WpTHK の schema.org のページ を詳しく書き換えたので、検索エンジンから、どんな風に見えてるか知りたい方は、そちらを参照してください。
・・・
あとは、小さなバグ4件ほど、直しました。
おまけ:
デフォルトじゃないけどニコニコ動画などもレスポンシブにできるようにした (詳細)
ダウンロードは、こちらのページ から。
構造化データ(schema.org)拡張と修正
- パンくずを itemprop="breadcrumb" で囲むように修正
- 投稿本文に以下を付与
- itemprop="mainEntityOfPage"
- コメント欄に以下を付与
- itemtype="http://schema.org/UserComments"
- itemprop="creator name"
- itemprop="commentTime"
- itemprop="commentText"
- itemprop="replyToUrl"
- 広告に以下を付与
- itemtype="https://schema.org/WPAdBlock"
- itemprop="headline name"
- itemprop="about"
- 記事の投稿者名に以下を付与
- itemprop="editor author creator copyrightHolder"
- ヘッダーに以下を付与
- itemtype="https://schema.org/WPHeader"
- itemprop="name"
- フッターに以下を付与
- itemtype="https://schema.org/WPFooter"
- itemprop="copyrightHolder name"
- あまり意味ないけど検索結果ページに以下を付与
- itemprop="SearchResultsPage"
バグの修正
- 検索結果のハイライト表示ができないカスタマイズの組み合わせがあったバグの修正
- CSS の読み込み順が異なり、実際のサイト表示とカスタマイズプレビューの見た目が合わない可能性があったので修正
- 子テーマの CSS に何も追記してない状態で子テーマ CSS 圧縮をすると 404 Not Found になっちゃうので、一応修正
- Embed のブログカードで、下に大きな余白ができてしまうバグの修正
機能追加じゃないけど、なんとなくやってみたこと
- ニコニコ動画なども、レスポンシブに簡単に対応できるようにしてみた(詳細)
ディスカッション
コメント一覧
素晴らしいテーマをありがとうございます。
実は、2.21あたりから本体をインストールすると、サイトが管理画面ともども読み込みエラー(An error occurred.)で入れなくなってしまいます。プレビューでもだめです。3.xxシリーズを入れたら大丈夫かな?と思ったのですが残念ながらだめでした。
当方サーバーはFedoraでnginx(1.2.7)で動作しています。どうやらjsminが関係しているらしいのですが、解決に至らずコメントさせていただきました。
maskin さん。
詳しいログがないと分からないですね。
特に jsmin は WpTHK 独自のものではなく、
Javascript の圧縮サービスやプラグイン等で使われているライブラリを使用させてもらってるので、ログを見ないと尚更分からない範疇でござる。
wp-config.php の
を
に変更すると /wp-content/ 直下に debug.log が出力されると思うので、
debug.log に出力される内容を教えていただけますか?
あー
JSMin を使用するプラグインを導入しちゃってる場合に、エラーが出てしまうことは確認できました。そちらは、次のバージョンで直します。
といっても、それが原因かどうかは、分からないので、上述の debug.log を出力できるなら、お願いします。
css/jsの圧縮&結合など高速化の為の各種設定機能まで備えるWpTHKの素晴らしさに感銘しています。
jqueryを非同期にチェックすると確実にGoogleのPageSpeed Insightsテストで高得点になるのですが、注意表示の但し書き通り、jQuery 使用のスクリプトをインラインで埋め込むタイプのプラグインが機能しなくなりますので、そのプラグインを使う特定ページのみ defer/asyncを入れないように指定できるようになれば幸いです。
ムーミン さん。
絶対ではないけど、まぁ、無理です。
以下、考え得る方法 2 つ。
1. 自動で jquery 依存を探す処理を入れる場合
wp_enqueue_script で登録されてるスクリプトの情報が
というオブジェクトの中に入ってるのは分かってるのですが、
そこには、プラグイン以外のものも含めて膨大な数のハンドルが登録されており、これを総なめした上に、
と jquery 依存を探した上で、さらにインラインを絞り込まないといけないです。
ループを回さなければいけない階層を考えるだけで、鬱になりそうです。
CPU と メモリが無限ならやってもいいですけど、ホスティング会社に怒られそう。
しかも、プラグインが wp_enqueue_script を使って script を登録しているとは限らないので、それを探すのは、ちょっと不可能ですね。
2. 手動で特定のページにチェックを入れる方法
管理者がページ単位で ON / OFF の情報を DB に書き込むことはできるんですが、、、
ぶっちゃけ、WpTHK は「WpTHK をやめて他のテーマに移行する場合に、なるべく DB にゴミを残さない」という方針で作ってます。
正常なアンインストール手順を踏んでも DB に膨大なゴミを残してくださる素敵テーマや素敵プラグインに嫌気がさしてるので、こういう方針にしてます。
(名前は少し伏せますけど、 某 Jet○ack とか言うプラグイン、、、何なの?アレ?絶対使いたくない)
2 の方法は、この方針から外れるので、無理です。
るな様
詳細なご回答を有難うございます。
ご提示頂いた2の方法で実現できればと思っていたのですが、
> 「WpTHK をやめて他のテーマに移行する場合に、なるべく DB にゴミを残さない」という方針・・・
後々の事までも考慮され完璧を追求する、るな様のこだわりを感じます。
インラインタイプのプラグインを使用する場合、レンダリングブロック対策をテーマ側だけで考えるのは難しいようですので、
jQueryのみasync又はdefer属性を外し、その他のプラグインのスクリプトにdefer属性を付与するプラグインを別途導入する方向で対応しようと思います。
全てのスクリプトをブロック回避対象には出来ませんが、可能な範囲で対策することで少しでも高速化に繋がるよう頑張ってみます。
WpTHKに巡り合い、既に利用しているユーザーは、特別の事情が無い限り他テーマには簡単に乗り換えないと思いますよ。本テーマの完成度とそれだけの魅力がありますから♪
ムーミン さん。
うーん。
というか、jQuery を非同期にするってのは荒技にも程があるというか・・・
普通、こんなことしません(むしろ、やるべきではない)w
そもそも、jQuery 非同期化などしなくても、WpTHK は速度的に見れば十分すぎるほど速いです。
Google Page Speed Insight の結果を気にしているのであれば、「気にしない方が良い」と思います。
Page Speed Insight の結果は「こうなってる状態がベスト」というだけで、かなり無茶な要求も平然としてきますから。
> プラグインのスクリプトに defer 属性を付与するプラグイン
こんなプラグイン、無いような気がしますが? あるんですかね?
るなさん、こんばんわ。
> jQuery を非同期にするってのは・・・
⇒ 非同期ではなく、async/defer属性設定を外す(false)ことで「同期」とする意味です。
>> プラグインのスクリプトに defer 属性を付与するプラグイン
> こんなプラグイン、無いような気がしますが? あるんですかね?
レンダリング対策関連のキーワードで検索したら在りました。
幾つか実際に試してみて、本目的で使えるもの、全く使えないもの色々ですが。
プラグインを早速試験導入し、 jQueryとインラインタイプのJSを非同期対象から除外した上で他のJS全てにdefer属性を付与したところ、思った通りPage Speed Insight及びGTmetrix共にスコア上昇と貧弱サーバのPage loading timeも少々短縮できました。
インラインタイプのJSだけはどうしようもないですけどね…。
コンテンツに必須のプラグインであり類似の代替が無いため、ちょっと痛いところです。
ま、それでも他のプラグインは全てこれで処理できて、そこそこ効果が認められたので満足です。
お忙しい中、ご相談に応じて下さって有難うございました。
ムーミン さん。
> 非同期ではなく、async/defer属性設定を外す(false)ことで「同期」とする意味です。
はい、分かってますw
当該部分のコメントは「当初の目的に関する話」をしただけです。
> レンダリング対策関連のキーワードで検索したら在りました
あるのかー。
こんなことやってるの WpTHK だけかと思ってたけど、
WordPress プラグイン・・・奥が深いなw