icon_topicsテクニック

WordPressのhead内をキレイにする「Head Cleaner」

izmakerTodayはWordPressで出来ています。

このサイトには諸々の事情で「wp-head();」が複数箇所に設置されております(概ねjQueryのせいなのですが)
開発を急いでしまったため「とりあえず動けばいいや」の精神で見て見ぬふりをしていたのですが、こやつが問題を起こしてくれました

Facebookなどに投稿された時にキレイに見えるよう「Open Graph Pro」といプラグインを入れていたのですが、どうもこれが「wp_head();」が読み込まれるたびにOGPのmetaタグを書き出していたようで、bodyの中にまでmetaタグが書きだされておりました。
動けばいいやの精神でコードの確認を疎かにしていたのが悪いのですが、どこで気付いたかというと「facebookデバッガー」ですね。

まぬけな話を書いているのは重々承知ですが
もし!もし同じようなことで苦しんでいる人がいたら!

Head Cleaner」というプラグインがオススメです。
WordPress_›_Head_Cleaner_«_WordPress_Plugins
ヘッドの画像が最高にクール

このプラグイン自体は読んで字のごとくhead内のタグを整理してくれるプラグインですが、そのなかにOGPタグの設定をしてくれる機能があります。
これがシンプルで凄い使いやすいです。

使い方はこんな感じ
Head_Cleaner_‹_izmaker_today_—_WordPress-5

これだけです。
facebookIDの取得方法は、Facebookにログインした状態で「https://graph.facebook.com/ユーザー名」と入力しましょう。
https___graph_facebook_com_tuan_dod-10
こんなページが表示されますので、idのところに表示される数字を入力します。

facebookアプリケーションIDはfacebook developersにログインしてアプリケーションを作成すると自動的に作成されますが、
詳しい作り方はこちらにわかりやすく書いてありました。
※少しUIが違いますが根本的には同じです

おかげさまで無事にfacebookでOGPの設定がちゃんと表示されるようになりました。
OGP以外の機能もなかなか充実しているので、headを整理してサイト高速化しよう!

ちなみにこのサイトでJavaScriptをheadからfootに移したところindexのスライダーが止まりました。
皆様思い切った整理をする時は注意しましょう、すぐもとに戻せるのもプラグインの良いところですがね

※後日談なのですが、スマホサイトで使用している「WP touch」に不具合が発生したためHead Cleanerは外しました。
外したのにOGPはちゃんと表示されてるという謎状態・・・奥が深すぎる