【WordPress】Browser Shotsプラグインに「nofollow」属性を加えてみた(SEO対策になるのかな?)

公開日:2017年1月10日 使い方など

WordPressで他のサイトへのリンクとスクリーンショットが簡単に表示できる「Browser Shots」プラグインをご存じですか?多分有名なプラグインだから知らない人はいないと思います。

「Browser Shots」を使う機会といえば私のように本文の先頭に紹介用として表示することも多いのではないでしょうか??

「Browser Shots」プラグインを知らない方のために紹介記事を書いていますので

をご覧ください。

とリンク先のページのように、このサイトでもプラグイン紹介記事の本文の先頭に「Browser Shots」を使ってwordpress.org(ワードプレスの公式サイト上にある)画像を挿入しています。

ここでちょっと気になったのが「Browser Shots」で挿入したリンクに「nofollow」属性がついていないので検索エンジンクローラーが本文を見る前にリンク先を巡回してしまうのでは?という疑問。

「nofollow」属性についてはいろいろなサイトで意味が紹介されているので詳しくは書きませんが、要するに関係ないサイトへの外部リンクを張るとSEO評価を下げてしまうことに対して「リンク先は巡回しなくて結構です!」と検索エンジンクローラーにお知らせする機能のようです。

このサイトの場合はプラグインの紹介記事に対してwordpress.org(ワードプレスの公式サイト)上でプラグインを配布しているページへのリンクなので関係ありありではあるのですが、判断するのはGoogle様などなのですから一応nofollowを付けたらどうなるか?というのが今回のテーマです。

ショートコードにそのまま記述しても反映されない

「Browser Shots」プラグインはショートコードに必要な記述をするとスクリーンショットとリンクを勝手に付けてくれる便利なプラグイン。

ショートコードの中にはリンクや画像のサイズに対するパラメーターの追加がいろいろできるのですが、なぜか「nofollow」属性はありません。そこで実際にテストしてみると・・・

ショートコード上に「rel=”nofollow”」属性を単純に追加しても、ソース表示して確認すると削除されて属性が反映されていませんでした。

実際に「Browser Shots」を使っている方はやってみるといいですよ。

「nofollow」属性はプラグインのソースに追加する

「Browser Shots」に「nofollow」属性を追加するには、プラグインのソースを少し改造する必要があります。といっても手順通りにすれば簡単にできますから是非やってくださいね。

  • プラグインの編集から「Browser Shots」を選択する(これで意味が分からない方はやらない方が無難です)
  • コードを書き換える(追加する)
  • ソースの中の

    <div class="browser-shot <?php echo esc_attr( $class ); ?>"><a href="<?php echo esc_url( $link ); ?>" <?php echo esc_html( $target ); ?> rel="nofollow"><img src="<?php echo esc_url( $image_uri ); ?>" alt="<?php echo esc_attr( $alt ); ?>" width="<?php echo intval( $width ); ?>" height="<?php echo intval( $height ); ?>" class="<?php echo esc_attr( $image_class ); ?>" /></a></div>
    【注意】コードをコピーして使用する前に必ずお読みください

    この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

    使用については自己責任でお願いします

    コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

    万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

    コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

    コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

    その場合には以下の方法で修正を行ってみてください

    1. コードの中に全角の記号が入っていませんか?
    2. 半角にすることで解消できます
    3. コードの中に全角の空白(スペース)がありませんか?
    4. 半角にすることで解決できます
    5. コードは合っているはずなのに更新できないときは
    6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
    7. 「何かが間違っています...」と表示され、更新できないときは
    8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
      ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
    これらのエラー対処については以下のページが参考になるかも知れません

    コードを転載する場合には

    ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします


    という記述を見つけて編集します。

    変更前は
    <a href=”<?php echo esc_url( $link ); ?>” <?php echo esc_html( $target ); ?>>

    変更後は
    <a href=”<?php echo esc_url( $link ); ?>” <?php echo esc_html( $target ); ?> rel=”nofollow”>

    です。赤字の部分 rel=”nofollow”を単純に追加するだけです。

    そして保存したのち実際にスクリーンショットを使っているページを開いて確認してみると・・・きちんと「nofollow」属性が付加されています。

    パラメーターで設定できるとすべてのスクリーンショットのショートコードに対して改造しなければならないのですが、これなら1回ですべてのスクリーンショットに適用できますから逆に楽ちんでした。

    あとは「Browser Shots」プラグインが更新されたときに安易に「更新」ボタンをクリックしないように気を付けるだけですね。

    どの位のSEO効果があるのかは??????ですが、やっておいて損はないということは何でもやっておこう!!という気持ちでやってみてくださいね。

    • 記事の作者: ひまあーと(管理人)

    • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
      ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
      ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


    QR Code

    このページはモバイル端末でもご覧いただけます

    左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

    いつでもご相談・サイトカスタマイズの依頼を受け付けています

    Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

    ※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


    【スポンサーリンク】