WEB制作

WEB制作

【WordPress】data-vocabulary.orgの「パンくずリスト」警告が来た人向け、schema.orgに改修する方法

2020年1月下旬頃にGoogleのSearch Consoleから『Search Console により、貴サイトに影響する「パンくずリスト」関連の問題が〇件検出されました』というメールが届いてお手上げ状態になっている人が一部で続出しているという。まぁ、自分のやっているサイトのいくつかで警告が発生したわけで書いているんだけど。

というわけで、これがどういう状態で、どうすればよいのかを完結に述べたい。

結論を述べると、Googleの仕様変更の影響で、対処しなければGoolgeの検索結果(SEO)的に少し不利だが、サイトが全く表示されなくなったりはしない。自分でコーディングしたり構造化とか難しいことはできん、したくない、という人は諦めた方がいい。

今時は小学生でもプログラミングを学ぶ時代なので、リスク覚悟でプログラムを少しいじってでも対応させたい、という人は続きを読むと解決できるかもしれない。解決できなくても、それは己の能力だから知らんけど。

そもそもdata-vocabulary.orgの警告とは何か?

Googleの進化に合わせて最先端なSEOを追求しているプロフェッショナル志向の人は当たり前に知っているが、そうでない人は当たり前に知らない可能性がある。

最近のGoogleはリッチリザルトという検索結果表示の画面において、単純にページの抜粋文とリンクを表示するだけでなく、パンくずリストも表示したりする場合がある。それ以外にもサイトがGoogleの仕様に対応していればカルーセル状に記事を表示されたりする。こういったものをリッチリザルトという。以前はリッチスニペットと言っていたが、Googleは気まぐれなので呼称を変えたらしい。

今回のdata-vocabulary.orgのパンくずリストの警告の場合、Googleが2020年4月からdata-vocabulary.orgを使ったパンくずリストの記述方式をサポートしなくなることの警告。つまり、リッチリザルトにパンくずリストが正しく掲載されなくなる。たぶん、それだけっちゃ、それだけのこと。

そもそも、これが正しく表示されているサイトとそうでないのがあったりして、対応させたからうまいこと行くかというと、それはわからない。

解決法はschema.orgの記述形式に変えること

1月の段階で警告しているから2カ月以上も猶予があるのだが、解決法としては以前からGoogleが唯一推奨していたschema.orgの記述方式に変えること。未来を読めているWordPressテーマとかだと、初めからこれになっているので対応しなくてよい。

ちなみに、こういったものを構造化データというが、例えば「リンゴ」という言葉は人間には果物のリンゴ(他のリンゴもあるだろうが)とわかるが、コンピュータには文字列でしかない。それがどういったものなのか紐付ける仕組みが構造化データである。今回で言うと、パンくずリストをパンくずだと理解させるための記述ということだ。

構造化データについて詳しく知りたい人は、↓この本にヤケに詳しく解説されているから読んでみると良い。

schema.orgの記述方式自体はシンプルなので、そこまで難しくはない。

↓下のschema.orgのサイトに書き方が掲載されている。

とは言っても、WordPress等のCMSで自分で一からコーディングしたのではなく、配布されている無料テーマ等をなんとなく使っている場合、php(プログラム)のファイルのどこをどういじったら良いかわからないと思う。

無料テーマの場合は作者に連絡しても対処してくれなかったり、業者が宣伝のために配布しているような無料テーマの場合は、サポートが有料だったりもするだろう。だからこそ、無料テーマなのだけど。

かといって、Webの世界の場合、有料だからと言って無料より優れているとは限らないので、別件だけどこれも注意。世の中全般のことだけど、高いものが無条件に良いとは限らないしね。300円のワインも1万円のワインも、自分にはどっちが良いのかわからんし。



具体的な解決方法は?

使っているテーマにもよるし、各人のスキルにもよるので、中途半端にいじってサイトに不具合が出たり表示できなくなったりしても責任が持てないので、ここには個別に具体的な手順は掲載しない。というか、個別環境によるので掲載しようがない。それこそ、業者が有料対応する部類。

ただ、原因がわかっているのと、原因が検討も付かないのとでは泥沼の差なので、状況を理解することは大切であろう。

あるテーマで対応させた例(自己責任注意、わーい♪)

大体のWordPressテーマの場合、パンくずリストを出力する記述はfunctions.phpにあるような気がする。でも、このあたりは設計思想なので機能ごとに別ファイルになっていたりと様々。とりあえず、全文検索かけたりして、色々な方法でパンくずの記述らしいものを探す。

functions.phpがなんぞ?という人は、この先の作業が100%無理なので潔く諦めるか、プログラマーやマークアップエンジニアになる覚悟で勉強して頂きたい。こちとら、プロのWeb屋の端くれだからやってるだけなんで。

それでその中に、

itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”

というような記述があれば、その部分だけを綺麗に削除していく。itemscopeとかitemtypeとかが構造化データね。他にも何種類かあるが、見れば雰囲気でわかるはず。HTMLの構造をわかっている人は問題ないと思うが、構造化データの記述だけを削除していくのだ。パンくずリスト自体の目に見える表示に関する部分は消してはいけない。おそらく20か所くらい削除すべき部分があるんじゃないかと。

これがうまく行くと、data-vocabulary.orgで記述された構造化データの部分が削除されるので、とりあえず警告が出なくなる。

次に、『Markup (JSON-LD) structured in schema.org』などのschema.org形式でパンくずリストを出力できるプラグインを導入する。パンくずリストの構造化データを記述する方法はいくつかあって、HTMLの中に記述していく方法以外に、JSON-LDという方式で出力することもできる。

見た目の表示と分離できるという意味で、こっちの方がスマートということもあり、この機会に変えてしまった方がいいだろう。

上記の手順でschema.orgに対応させることができる。

ただ、文中でもしつこく言ってるけど、プログラマーやマークアップエンジニア的な技術がいるので、よくわからない人含め、多少わかる人でも作業は自己責任で。1文字でも記述を間違うとサイトが全く表示できなくなるからね。

他にも色々方法はあるけど、検討した結果、自分的にはこれが一番シンプルに思った。大した金にならん趣味でやってるサイトの改修なんかに、そんなに工数や脳みそ使いたくないしね。

関係ないが、パンくずの話してると無性にホームベーカリーでパンを焼きたくなる。

WEB制作

【2020年版】FirefoxでAmazonのウィジェットが表示されない問題→TLS 1.0/1.1無効化が原因

Web制作者の端くれとして今でもFirefoxが(今日現在までは)メインブラウザなのだが、最近、メインPCをWindows10にしてからか、軒並みAmazonのアソシエイト(世間でいうアフィリエイトのこと)のウィジェットが表示されなかったりする。または「安全な接続ができませんでした」というようなエラーメッセージになる。

Web制作者としては解決したいが、原因っぽいものを調べてみた。結論を言うと、個人レベルじゃ解決できそうにない。

原因→セキュリティ関係のブロック機能の何かのせい

Firefoxは最近のバージョンだとアフィリエイト関係のトラッキングや、httpsの暗号化関係とか、iframeの埋め込みとか、セキュリティ的にまずそうなものを軒並みブロックする機能がデフォルトで有効になっている。

それ以外に、Windows10などの最新OSや高機能なウイルス対策ソフトがブロックする場合もある。手持ちの環境だと、同じWindows10のマシンでFirefoxでも、Anazonウィジェットが表示されるやつと、表示されないやつがあったりして、まちまち。

どっちも特別、個別に設定したわけじゃないから、どの部分が具体的にブロックしているのかも不明。それに、個別に表示できるようにしたとしても、あくまで固有の設定なので、一般の訪問者の設定次第で見えたり見えなかったりするから、どうしようもない。

・・・と思って、色々調べたら、TLS 1.0/1.1無効化が原因らしい。AmazonのウィジェットがTLS 1.0/1.1という今後、軒並み主要ブラウザで無効化される古い暗号化方式をサポートしなくなるから。ということは、Amazonの対応を待つのがスマートらしい。

一応、Firefoxは手動でユーザーがTLS 1.0/1.1を有効化すれば今のところ大丈夫。だが、いずれ完全にサポートしなくなる。

対策、解決法→スマートな方法はない

Amazon側のウィジェットの仕様によるものが原因ではあるが、基本的には用意されたコードを埋め込むしかない以上、Amazon側が解決しないとどうにもならない。ただ、時流としては埋め込みコンテンツやトラッキング的なものはブロックされる傾向があるので、そもそもこの手のウィジェットを使わないとか、今後のやり方を考える必要がある。

今のところ、ChromeやiOSなどの主流ブラウザでは問題なく表示されるから、今となっては利用者が少ないFirefoxだけの問題とも言える。Chromeで表示できなくなったら、本格的に対応すべき問題かも。ふーん、TLS 1.0/1.1無効化が原因だったのね。

WEB制作

【がっかり】iPad版 Photoshopのコレジャナイ感が凄い!! iPadは制作マシンにはならなかった

なんかこんな感じでPCのPhotoshopとは別物・・・

結構以前から「iPadにPhotoshopがガチ移植される!」みたいな公式予告がされていた。

Photoshopは以前から、モバイル端末のスペック事情なのか、小出しでPhotoshop ExpressとかPhotoshop Fixとか、単機能版の無料アプリが出ていた。

PC版の機能の半分もないのに月1,080円という高額商品w

今回のはそれに毛が生えた程度なのだが、月1,080円もする結構ガチなアプリ。1カ月の試用期間があるので、PC版と同じものを期待していた層は契約することはないだろうが、PC版の半分も機能がない。というか、フィルターが2つしかなくて、トーンカーブすらない。

iPadのタッチディスプレイ用にUIがカスタマイズされているのはわかるが、元々はガチ移植みたいな触れ込みだったので残念過ぎる。

Photoshopよりマシだが、クリスタも変なUIになるし

知っている限り、iPadでまともに画像(イラスト系)が作成できるソフトとしては、クリップスタジオペイントがある。年2,800円と有料とは言えPhotoshopよりはかなり安い。

クリスタも2019年12月のアップデートで強制的に使いにくいUIに変更されたのだが、こちらはPC版のクリスタと同じようなアプリになっている。

やっぱり、きちんとしたモバイルでのクリエイティブにはノートPC

これらの期待アプリのがっかりが示すように、所詮はiPadは動画再生プレイヤーかゲーム機にしかならないということなのだろう。

最近のノートPCの高性能化は凄まじいものがある。特にクリエイター向きと表明しているノートPCは値段はそれなりに張るものの、スペック的には一昔前のそのへんのデスクトップPC顔負け。グラボを積んいたり、メモリ16GBや32GBなんてモデルもある。

外でクリエイティブするならiPadなんかより断然ノートPCだ。