AmazonJSのプチSEO対策!商品タイトルのh4タグをdivに置き換える方法

私が愛してやまない WordPress のプラグイン、AmazonJS。Amazon の商品をスッキリ綺麗に表示してくれるので、とても助かっています。

ところで先日、AmazonJS のカスタマイズをするために情報を探していたところ、AmazonJS の問題点としてこんな指摘がされていました。

「商品名のテキスト部分がh4タグで表示される」

ブログを書いていると自分が使用していてすごく良かったものを紹介したいときがあります。せっかく紹介するなら、収益化もかねて…ということで各種ASP、Amazonアソシエイトや楽天アフィリエイトを経由して商品リンクを作成するのですが、Amazonアソシエイトの商品リンクをデフォルトの表示のまま使うと、何だかサイズも微妙だし...

あぁ~、これは確かに良く無さそう!

商品名のテキスト部分というのは、つまり下の画像の赤丸で示した部分です。

この部分が、h4 でタグ付けされているということですね。

AmazonJS の商品タイトルが h4 でタグ付けされているなんて、全く気が付いていませんでした。理由は後で記しますが、改善したほうがよさそうです。

ということで、今回は AmazonJS のコードをいじって、この点を修正してみました。

スポンサーリンク

そもそも何が問題か?なぜ直すべきか?

商品タイトルが h4 でタグ付けされている。そもそも、これを直すべき理由は何でしょうか。

HTML の数あるタグの中でも、h2 等の見出しを構成するタグは、SEO 的に重要とだ言われています。見出しを h タグで適切にマークアップすることで、検索エンジンに記事の構造を正しく伝えることができるからです。

ところが、AmazonJS の商品紹介のところで、必ず h4 の見出しを使いたいかというとそうでもない。だって、そこ見出しじゃないし。それが、直すべき理由です。

一方で、h4 のような小さい見出しは、あまり重要じゃないという見方もあります。重要なのは、h1 や h2、せいぜい h3 くらいまで。h4 なんてあっても無くても一緒だ、というような。

確かに、h4 は相対的な重要度は低いかもしれません。でもきっと、本来あるべきでないところに h4 があるよりは、無いほうが少しは良いのではないでしょうか。

たとえ話ですが、本を読んでいて、サブセクションの見出しのスタイルと、ちょっとしたコラムの見出しのスタイルが一緒だったら、読み手は一瞬混乱してしまうと思います。その程度のことですが、微細な影響でもあるよりは無いほうが良いですよね。

それに、自分の意図しないところに h4 があるというのは、何とも気持ちが悪い感じがします。特に、HTML5 のアウトライン生成をすると、変なところに h4 見出しが入ってくるので腹が立ってきます。なので精神衛生上も、直したいのです。むしろ、こっちのほうが重要かもしれない。←もはやSEOと関係ないですが…

修正箇所

私が利用している AmazonJS の バージョンは 0.8 です。

修正すべき個所は、AmazonJS を構成するファイルのうち、amazonjs.jsamazonjs.cssとなります。

amazonjs.js の修正箇所

まずはJSファイルです。次のように記述されている箇所が5か所あります。

h4 タグを、div に置き換えてやります。その際、class=”amazonjs_h4″ を指定してやります。

以上で amazon.js の修正は終わりです。

amazonjs.css の修正箇所

続いては CSS ファイルの修正です。これは必須というわけではありませんが、見映えを維持したい場合は実施する必要があります。でも、既存の CSS ファイルを少し直すだけですので、難しくはありません。

修正箇所は2か所。まず1つ目。

次のように変更しましょう。

h4 を .amazonjs_h4 に置き換えるだけです。

2つ目。

こちらも先ほどと同様、h4 を .amazonjs_h4 に置き換えるだけです。

以上で終わりです。

おわりに

以上の修正を済ませると、AmazonJS の商品タイトルは h4 ではなく div タグで囲まれるようになります。ブラウザでの見た目はそのままです。

これで、SEO 上も、精神衛生上も、よりスッキリと使える AmazonJS になりました。

こういう小さな改善も、少しずつ積み重ねていくのが大事なのかもしれないな、と思っています。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク