[Я]WordPressテーマ「Stinger」を改造して感じた3つの不安

スポンサーリンク

初めて「他者が作ったテーマ」を使う

2012年1月に当ブログを開設して以来ずっと使っていた自作テーマ。デザインの才能が皆無なため、とてもお恥ずかしい外見になってたのですが、内部的には様々な機能を取り入れてました。

ただ、機能を取り入れすぎた結果として処理が重かった。処理が重いと表示が遅くなり、SEO的によろしくないというのを聞いてたので、新しいテーマに変更しなきゃ、ってのは今年に入ってからの課題でした。

今回、時間的&精神的な余裕がなかったため、完成されたテーマを自分の好みに応じてカスタマイズするという手法を採り、Stingerを自分なりに改造して公開となりました。まだまだ改造したい点が沢山あるので(特にモバイル表示)、今後も少しずつカスタマイズしていきます。

自作テーマは最初から最後まで自分の好きなようにプログラムコードが組めるので、慣れないと大変ですが慣れればとても楽しく、愛着も湧きます。

一方で既存テーマをカスタマイズするのは、他者のコードを解析するところから始めないといけないので、自作とは全然違う難しさや苦労があります。しかし自分の知らなかった機能や、自分とは違うコードの書き方など、いろいろ参考になりました。

そんな中、今まで自分なりにいろいろWordPressを勉強してきた中で取り入れてきた機能の一部がStingerには実装されておらず、「これ大丈夫なのか?」と不安になった点を大きく3点取り上げてみます。

不安その1:モバイル画面でアドセンスが複数表示されちゃうとマズイ

★モバイルでは表示位置に注意が必要です

Googleのアドセンスバナー広告は、1ページにつき3つまで設置できます。

PCやタブレットは、設置個数制限さえ守れば表示位置は特に問われません。好きな場所に設置できちゃいます。設置場所によって収益に差が出るので、いわゆる「最適化」の必要はありますけど、それはまた別の話。

一方でiPhoneなどモバイルの場合も個数は3つまで設置可能ですが、PCなどと違って表示位置にルールがあり、それを守らないと最悪の場合はアカウントを停止されて収益がゼロになります

4249731778_ab4fc01fd9


アドセンスセミナーを受講した際に聞いた内容をまとめ、上のエントリーを以前に公開しています。アドセンスポリシーが気になる方々は目を通して頂ければ幸いです。

上記エントリーで使った画像をこちらにも載せてみます。

screenshot_201302_074

↑こういう感じで、モバイルでは同一画面に複数のアドセンスバナー広告が表示されるとポリシー違反になります。簡単に言えば「モバイルの画面を広告まみれにしたらダメよー!」ってことなんでしょうね。

で、Stingerはアウトでした。

★今年8月、お友達のブログを見て最初に気付いた

今年8月、当時まだバージョンは「Stinger2」だったはずですが、ブロガー仲間の方がテーマをStingerに変更されていて、エントリーをiPhoneのSafariで読みました。

いつもはRSSリーダーのSylfeedで記事を読んでいるため、テーマがStingerに変わっているのをその時に初めて知りました(=RSSリーダーだとテーマのデザインは反映されないので)。

で、Safariで見ると本文最後の箇所にアドセンスが2つ表示されていたので、「これポリシー違反になってヤバイかも」とお伝えしました。

その際、「カスタマイズを失敗しちゃったー」とその方はおっしゃってたのと、まだStingerのことを私は何も知らなかった時期だったので、原因はカスタマイズによるものなのだと思ってました。今回私自身がStingerをカスタマイズして初めて、「あらま。これはテーマ自体がそういう表示なのか」と気付いた。

私自身はアドセンス表示をテンプレートから直接表示するよう改造したのですが、Stingerの売りである「ウィジェットで簡単にアドセンス設置できる」機能を使ってる人はヤバイんじゃなかろうか、と思ってた矢先。

http://plus1world.com/stinger-wordpress

この件を指摘されたエントリーが公開されました。

http://wp-stinger.com/news/post-910/

開発者さんが対応され、改善策のエントリーを公開されています。

テーマを初期状態のままお使いの方々や、この問題をご存知なかった方々は、早急に対応すべきです。以前のままでは規約違反ですので。

不安その2:アドセンスのラベル、皆さんどうしてます?

★特に本文箇所でのアドセンス部分はラベル表示が推奨されてます

これもアドセンス表示でやらかしたらマズイ内容のエントリーに書いてますが、特に本文が表示される箇所にアドセンスを表示している場合は、アドセンスバナーのすぐ上にラベルを表示することが推奨されています

◆スポンサーリンク
◆スポンサード リンク
◆広告

といったラベルが許可されていて、それ以外の誤クリックを誘発するようなラベル表示(「下の画像をクリック!」とか)はポリシー違反でアウトになります。

※「スポンサーリンクを英語で書いたらマズイのか」など、ご不明な点に関しては「AdSense プログラム ポリシー」内に問い合わせページがありますので、ポリシーチームに直接ご確認下さい。

Stingerを使用されてるページを幾つか拝見したところ、アドセンス上にラベルのないサイトやブログがあります。ってことはStingerの標準機能ではラベル挿入が考慮されてないという判断になります。(私はテンプレートに直接コードを書いたので、標準機能は使っていません)

ラベルがないと即アウト!なのかどうかは私もよく分かってないのですが、紛らわしい内容の文章がアドセンスのすぐ上に来てる場合はアウトになるはずです。

具体的な例を挙げると、アイキャッチ画像とイントロ文章があって、その下にアドセンス広告、さらにその下から本文が始まる、という構成にされてるブログも多いかと思います。

アドセンス広告にラベルがない場合、たまたまイントロ文章の最後に「面白い画像を見つけたので紹介します」みたいな内容を書いてたとするじゃないですか。で、そのすぐ下にアドセンスのバナー広告があったら。アウトです

たまたまその1ページだけだとしても、違反は違反です。その記事を消すか、そもそものアドセンス位置を変更するかは各自の判断になります。

★ラベルの簡単な設置方法

一番確実なのは、本文を表示してるテンプレート「single.php」で、アドセンス表示箇所のすぐ上に「スポンサーリンク」などのラベルを表示するようカスタマイズする方法。私は(PC表示の本文内設置箇所に関しては)この方法にしてます。

テンプレートをイジるのはイヤだー、って人は、WordPressのウィジェットにアドセンスのコードを直接入力してるはずなので、そのアドセンスコードのすぐ上にpタグやspanタグでラベルを書いちゃえばいいんじゃないかと思います。実験してないですが、普通考えたらそれで大丈夫なはず。

【追記】
この件に関して後日、開発者さんより直接回答が来ました。「やりたい人はやればいいというスタンス」とのことです。

私がこの件を「3つの不安」に含めたのは、通常それほど神経質になることはないにせよ、ラベル表示がないことで不運にも「紛らわしい広告表示」と発覚・判断され、アドセンスの規約違反となり最悪アカウント停止となる確率はゼロではないことと、加えて「カスタマイズに慣れてる・作業方法が分かる人」であればチョチョイと変更すれば済む話ですが、初心者にも優しいと謳うテーマでカスタマイズを一切せず使うことにより万が一アカウント停止になった場合にどうしますか?という危惧があったので、「3つの不安」という表現で問題提起したというのが経緯です。

ただし、この問題はStingerに限らずレスポンシブ対応のWordPressテーマでは一部で同じようにラベルを考慮されてないものがあるのも事実です。私自身は「作業可能であるならラベル表示追加などの対応をやっておくのが無難だと思いますよ」というスタンスです。テーマを変更したせいでアカウント停止にされたら泣くに泣けないですからね。

不安その3:StingerはOGP情報を出力していない?

★OGPとは?

実は私もよく分かってません(笑)

http://www.lastday.jp/2012/04/19/ogp-is-important

「Facebookの師」、れいさん(@sayobs)の分かりやすいOGP解説エントリー。一部を引用させて頂きます。

上のようにきちんとOGPが設定されているとfacebookに「いいね!」「シェア!」をされた際に適切な情報が表示されます。Meta Tagに記述したタイトル・サムネイル画像・URLが適切にウォールに流れるという事です。逆にきちんと設定していないと、サムネイル画像なしで表示されたりリンク先が間違っていいたりしてしまいます。

そして何よりも重要なのがOGPを設定していると友達が「いいね!」を押した時に友達のニュースフィードにも情報が掲載される事です。友達のニュースフィードに載って更に友達の友達が「いいね!」を押し・・・・それが繰り返し続くとどうでしょうか?? 沢山の人に情報を届ける事が可能になったというわけです。

OGPを設定しない理由が見つかりません。

で、StingerはOGP情報が出力されてないんですよ。自分のソースを何度も確認したし、他のStinger利用ブログもソースをチェックさせて頂いたのですが、OGP情報を出力してないブログが多数。

facebook_logo


当ブログを始めて2ヶ月目の頃、やっとFacebookページを作った際にOGPなどが全然分からず発狂した顛末を書いたエントリー。懐かしい。

あれから1年半、もしかしたらOGPに代わる何かOGPっぽいデータを送信する新たな機能が生まれたのかもしれず、Stingerはそれを搭載済みなのかもしれず、私がそれを知らないだけなのかもしれない。このあたりが知識不足なので何とも言えないのがもどかしいところ。

★OGPが出力されてるかを確認する方法

OGPをチェックするので最も有名なのは、Facebookのデバッガーです。

https://developers.facebook.com/tools/debug

上のページで、記事URLを入力して「デバッグ」ボタンをクリックすると、OGP情報をチェックした結果が表示されます。

試しに、私が先日書いたシックスコア移転顛末のエントリーをチェックしてみます。他人のURLもチェックできますので、興味のある方は以下の記事URL、

http://rikumalog.com/wordpress/change-server-and-theme.html

を入力してからデバッグしてみてください。

Skitched 20130921 211320

↑こんな感じの結果になるはずです。私はOGPを出力するようカスタマイズしたので、各OGP情報が反映されてます。

Stingerをお使いの方は(StingerじゃなくてもOGP出力が不安な方々は)、ご自身のブログ記事URLをデバッガーに入力してチェックしてみてください。

◆「修正が必要な[いいね!]ボタンの警告」という欄が表示されている。
◆「解決する必要があるオープングラフの警告」という欄が表示されている。
◆「オブジェクトのプロパティ」欄の「og:image」という項目のところに、ブログ記事で使ってる画像がズラーっとたくさん表示されている。

上のようなチェック結果が1つでもあれば、OGPは正常に出力されてません

チェック結果が上のような状態でも、Facebookなどにシェアすることは出来ます。実際、シェアされてるのをこれまで何度も見てますので、「シェアしてもらえなくなる」というわけではないと思います。ただし、正しい情報がシェアされてない可能性が高い

ご自身の記事をFacebookなどにシェアした(シェアしてもらった)際に、

「なんでこの画像が表示されてるんだ?」
「なんで抜粋文がこんな内容になってる?」

と不思議に思った経験がある方々、原因はたぶんOGPのミスです。

★OGPを出力する方法

Stinger(というかWordPress)をお使いの方で、最も簡単にOGPを出力する方法は、プラグインの使用です。私もブログ開設当初に使ってましたが、「Open Graph Pro」というプラグインが最も有名かな。

http://www.lastday.jp/2012/04/17/ogp-wordpress

れいさんもオススメされてるので間違いナシ!

プラグインを使わず、テンプレート「header.php」にOGP情報を出力するよう直接コードを書いて改造する方法もあります。私は現在この方法でやってます。

http://webmemo.biz/wordpress/facebook-ogp-setting-seo/

直接出力しよう、と思うキッカケになったのが、あかめちゃん(@mk_mizuho)のエントリー。私もプラグインを減らしたかったので「これだ!」と狂喜乱舞しながら速攻で改造しました。カスタマイズに慣れてる方々ならコッチがいいかも。分からない方は前述の通りプラグインが簡単でいいです。

※上記あかめちゃんの解説記事の通りでOGPは出力できますが、1つだけ「fb:app_id」というmetaタグの出力がサンプルコード内にありません。

Facebookのapp_idをお持ちの方は「fb:app_id」もmetaタグに追加しておきましょう。「fb:app_id」のmetaタグがないとデバッガーで警告が表示されます。

りくま的まとめ

このエントリーでは、不安に思った点3つにスポットを当てて紹介してみました。カスタマイズに慣れてない方々にも分かるようにと言いながら修正の詳細を省いて解説してる箇所もあり、申し訳ありません。

今回挙げた3点に関しては、対応しておかないと不利益が生じる可能性もあるし、特にアドセンスの場合はアカウント停止されたら大変ですので、最優先でエントリーを書いてみました。

スポンサーリンク
この記事がお気に召したら
「いいね!」をお願いします!
「りくまろぐ」の最新情報を
Facebookにお届けします