本ページはプロモーションが含まれています

【SEO対策】Google AdSenseの広告を遅延表示する方法(JavaScript)

google-adsense-how-to-lazy-load-javascript-eye-catch ASP
スポンサーリンク
スポンサーリンク

Google AdSenseを導入したことで、サイトの読み込み速度が遅くなって困っている方が多いのではないでしょうか? サイト読み込み速度は、SEO対策において非常に重要な要素となりますので、放置しておくと不利になります。

SEOとは?

Search Engine Optimization(検索エンジン最適化)。最適化とはユーザーが見やすいサイトを意味し、質が高いほど検索エンジンのランキング上位に表示してくれます。上位に表示されるとユーザーの流入が多くなるため、結果として広告収入などで有利に働きます。

今回はWordPressのプラグインを使用せずに、JavaScriptのみで広告遅延表示に対応する方法をご紹介します。プラグインを使用したくない方におすすめの方法となります。

本記事では図をたくさん使って丁寧に解説しておりますので、初心者の方でも簡単に真似できるような構成にしております。

「JavaScriptって何?」
「Google AdSenseの広告設定がわからない」

って方でも大丈夫です!

では早速やっていきましょう!

このページでわかること
  • Google AdSenseの広告表示遅延化の方法
    JavaScriptを使う方法

※本記事では、レンタルサーバー「Conoha」、WordPressテーマ「Cocoon」を例に説明しております。別のレンタルサーバーやテーマをご使用の方は、少し操作方法が異なります。

スポンサーリンク

広告表示遅延対応の流れ

JavaScriptによる広告遅延

JavaScriptとは?

プログラミング言語の一つで、HTMLやCSSと組み合わせることによって、サイト上にアニメーションなどの動きを追加することができる。

WordPressプラグイン「Flying Scripts」でも広告遅延表示が可能です。プラグインのインストールが必要ですが、JavaScriptで設定するより簡単なため、おすすめです。

設定方法はこちらで解説していますので、興味のある方はご覧ください。

それでは具体的な設定方法を解説していきます。

スポンサーリンク

JavaScriptで広告遅延を設定する

万が一に備えて、設定する前に必ずバックアップを取るようにお願いします。バックアップ方法は以下の記事に詳細をまとめておりますので、ご一読をお願いします。

Google AdSenseの広告コードを遅延対応のコードに変更する

  • 1
    WAFをOFFにする

    レンタルサーバーが「ConoHa WING」の場合、図のように設定します。

    設定が正常に完了すると、図のように表示されます。

    この操作には、「ConoHa WING コントロールパネルプラグイン」が必要となります。ConoHa WINGをご契約されている方は、通常インストールされていますが、もし間違って削除された場合は、公式ページを参考にインストールすることをオススメします。

    WAF(Web Application Firewall)とは?

    Webアプリケーションの脆弱性を狙ったサイバー攻撃から保護してくれるセキュリティーシステムのこと。レンタルサーバー側に導入されているため、専用機器の設置やソフトウェアのインストールは不要。

    WAFの設定をOFFにしないとセキュリティが強すぎて、あとで説明する「Cocoon設定」の設定が保存できなくなります。

    ご契約されているレンタルサーバーによって設定方法が異なります。有名なレンタルサーバーの公式WAFページへのリンクをまとめましたので、ご参考にしてください。

    レンタルサーバー名 WAF
    (公式サイトの説明ページ)
    ConoHa Wing  
    エックスサーバー  
    シンレンタルサーバー  
    さくらのレンタルサーバ

     

  • 2
    「Cocoon設定 - 広告」のAdSenseコードを編集する

    Cocoonの場合、図の場所にコードを貼り付けていると思いますので、AdSenseコード前半の <script async> ~ </script> を削除してください。
    ※削除したコードは後ほど別の場所に記載します。

    簡単に貼り付けられるように、コードも掲載しておきます。

    <!-- <script async> ~ </script>を削除 -->
    <!-- 広告名 -->
    
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-0000000000000000"
         data-ad-slot="0000000000"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
         
         <!-- ca-pub-0000000000000000の番号をご自身のIDに入れ替える -->
         <!-- data-ad-slot="0000000000"の番号をご自身のIDに入れ替える -->
         
    <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

    6・7行目について、ご自身のIDに入れ替えてからご使用ください。

    ID入れ替えが必要な場所
    • ca-pub-0000000000000000(パブリッシャーID)
    • data-ad-slot="0000000000"(広告ユニットID)

    設定を保存します。

  • 3
    「Cocoon設定 - アクセス解析・認証」のAdSenseコードを削除する

    Cocoonの場合、図の場所にコードを貼り付けていると思いますので、AdSenseコード前半の <script async> ~ </script> を削除してください。
    ※削除したコードは後ほど別の場所に記載します。

    ※AdSenseコード以外のコードがある場合、間違って削除しないように注意してください。

  • 4
    フッター用コードにJavaScriptの広告遅延表示コードを入力する。

    右上のJavaScripitにマウスをあわせると、コピーアイコンが表示されるため、クリックしてコードをコピーしてください。

    <script>
    //<![CDATA[
    (function(window, document) {
     
    	// lazyLoad: 遅延表示をしたかどうか判別のための変数をセット
    	// false:まだ遅延表示していない場合(初期値)
    	// true	:遅延表示を行った場合
    	var lazyLoad = false;
    
    	function main() {
    		var ad = document.createElement('script');
    		ad.type = 'text/javascript';
    		ad.async = true;
    		ad.crossorigin = 'anonymous';
    
      // ca-pub-0000000000000000:ご自身のコードに入れ替えてください。		
    		ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000';
    		
    		var sc = document.getElementsByTagName('script')[0];
    		sc.parentNode.insertBefore(ad, sc);
    	}
    	
    	// -----------------------------------
    	// 遅延読み込みの実行
    	// 一度も遅延読み込みしてない場合
    	//(lazyLoad が false の場合)遅延読み込みを行う
    	// -----------------------------------
    	function onLazyLoad() {
    	
    		// 一度も遅延読み込みをしてない場合
    		if (lazyLoad === false) {
    		
    			// 2度以上行わないように false から値を変えておく
    			lazyLoad = true;
    			
    			// スクロールしたら、など、遅延読み込みを行う条件を全て削除しておく
    			// スクロールした場合
    			window.removeEventListener('scroll', onLazyLoad);
    			// マウスを動かした場合
    			window.removeEventListener('mousemove', onLazyLoad);
    			// マウスのボタンが押された場合
    			window.removeEventListener('mousedown', onLazyLoad);
    			// 画面をタッチされた場合
    			window.removeEventListener('touchstart', onLazyLoad);
    			// キーが押された場合
    			window.removeEventListener('keydown', onLazyLoad);
    			
    			// 実際の遅延読み込み(アドセンスの script 読み込み)
    			main();
    		}
    	}
     
    	// -----------------------------------
    	// 遅延読み込みの条件
    	// -----------------------------------
    	// スクロールした場合
    	window.addEventListener('scroll', onLazyLoad);
    	// マウスを動かした場合
    	window.addEventListener('mousemove', onLazyLoad);
    	// マウスのボタンが押された場合
    	window.addEventListener('mousedown', onLazyLoad);
    	// 画面をタッチされた場合
    	window.addEventListener('touchstart', onLazyLoad);
    	// キーが押された場合
    	window.addEventListener('keydown', onLazyLoad);
     
    	// -----------------------------------
    	// ページの再読み込み、何もしない場合の対応
    	// -----------------------------------	
    	window.addEventListener('load', function() {
    		// 表示されたときページの途中の場合
    		if (window.pageYOffset) {
    			onLazyLoad();
    		}
    		//何もされない場合は、指定した秒数後に自動で読み込み(ミリ秒で指定)
    		window.setTimeout(onLazyLoad,5000)
    	});
    	
    })(window, document);
    //]]>
    </script>

    コードはたびびとJINのブログさんを参考にさせて頂きました。ありがとうございます。

    フッター用コードにコピーしたコードを貼り付けます。

    17行目のパブリッシャーIDをご自身の番号に入れ替えてください。
    ※パブリッシャーIDの調べ方がわからない方は、こちらを参考にしてください

    広告遅延する秒数を変更したい場合は、76行目の数値を修正してください。(初期値は5000ミリ秒 = 5秒)

    設定を保存します。

    AdSenseコードの遅延表示対応は、以上となります。

※WordPressテーマ「Cocoon」の場合、これだけでは広告遅延表示ができません。

次に解説する内容もあわせて対応してください。

「footer-javascript.php」ファイルをコピーする

WordPressテーマ「Cocoon」の場合、この「footer-javascript.php」のコードが原因で先ほどの遅延コードが上書きされて無効化されます。必ず対応するようにお願いします。

「footer-javascript.php」は通常、Cocoonの親テーマにしか存在していませんが、親テーマを直接編集すると、失敗したときに復元できなくなる場合があります。そのためバックアップとして必ず子テーマにコピーしてから編集するようにしましょう。

また、子テーマへファイルをコピーする方法は2つありますので、どちらも解説させて頂きます。

個人的にはファイルマネージャーの方が、直感的でわかりやすくておすすめです。

「footer-javascript.php」を親テーマから子テーマにコピーする
(レンタルサーバーのファイルマネージャー)

ご契約のレンタルサーバーによって使用方法が異なります。以下に有名なレンタルサーバーの説明ページを掲載しておりますので、ご参考にしてください。

レンタルサーバー名 ファイルマネージャー
(公式サイトの説明ページ)
ConoHa Wing  
エックスサーバー  
シンレンタルサーバー  
さくらのレンタルサーバ  

本記事では「ConoHa WING」のファイルマネージャーを例に解説していきます。

「footer-javascript.php」を親テーマから子テーマにコピーする
(FTPクライアントソフト)

FTPクライアントソフトを使用すると、ConoHa WINGにログインする必要がなくなり、大変便利になります。ただし、事前にソフトのインストールや設定が必要です。

インストール方法については以下の記事に詳しくまとめておりますので、ぜひご参考にしてください。

  • 1
    FileZillaを起動する

    アイコンをダブルクリックして起動してください。

  • 2
    設定したSFTP or FTPサーバーに接続する

    左上の下矢印をクリックしてください。

    設定済みの名前が表示されるため、クリックしてください。

    Filezillaは以下のレイアウトになっています。

    これを覚えておくと、この後の説明が頭に入りやすくなると思います。

  • 3
    右側のサーバー側ウィンドウで、Cocoonの親テーマフォルダ「cocoon-master」の「footer-javascript.php」をダウンロードする

    サーバー側で「pubulic_html」→「サイトのアドレス」→「wp-content」→「themes」→「cocoon-master」→「tmp」の順に移動してください



    ファイルマネージャーと異なり、サーバー上でのファイルのコピー&ペーストに対応していません。そのため一旦パソコンにダウンロードする必要があります。

    手順⑦で、パソコン側のダウンロード先を選択してください。
    ※本記事では、ダウンロード先として「デスクトップ」を例に解説しています。

    サーバー側の「footer-javascript.php」を選択後、右クリックしてからダウンロードしてください。

    ダウンロード完了後、左下のウインドウに「footer-javascript.php」ファイルが表示されます。

  • 4
    右側のサーバー側ウィンドウで、Cocoonの子テーマフォルダ「cocoon-child-master」に「tmp」フォルダを作成する

    ※既に「tmp」フォルダが存在する場合は読み飛ばしてください。

    フォルダ名を「tmp」と入力してください。
    ※「tmp」以外はファイルの読み込みができなくなるため、間違えないように注意してください。

  • 5
    「tmp」フォルダに「footer-javascript.php」をアップロードする

    図の順番にクリックし、アップロードしていきます。

    アップロードが完了すると、右下のウィンドウに「footer-javascript.php」ファイルが表示されます。

    FTPクライアントソフトでのコピーは以上となります。

コピーした「footer-javascript.php」を編集する

先ほどアップロードしたので、WordPressの管理画面から編集ができるようになっています。

  • 1
    WordPressの管理画面で、「テーマファイルエディター」に移動する
  • 2
    「footer-javascript.php」のAdSenseコードを停止させる

    「tmp」→「footer-javascript.php」の順にクリックします。

    22行目のコードの頭に「//」を追記し、コメントアウトします。

    コメントアウトとは?

    特定の記号を入力して、プログラムの動作を停止にさせること

    この内容がすべての元凶です。これを止めない限り遅延コードが上書きされて、無効化されます。

    ファイルを更新をクリックして、設定を保存します。

  • 3
    広告を掲載しているページに移動し、動作をチェックする

    パソコンとスマホで動作が異なる場合があるため、両デバイスでチェックすることをおすすめします。

    動作チェックリスト
    • ページアクセス後5秒間放置して広告が表示するか
    • ページアクセス後5秒経過前に画面をスクロールして、広告が表示されるか確認する

    広告が表示されない場合

    WordPressログイン状態でサイトを閲覧する場合、広告が表示されません。表示したい場合は、図のように「サイト管理者も含めてアクセス解析する」にチェックを入れてください。

    遅延表示にならない場合

    以下コードがどこかに一つでも記載されている場合、遅延表示になりません。

    HTML
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000"
         crossorigin="anonymous"></script>

    私の場合、ウィジェットの広告にコードが入力されており、遅延表示になりませんでした。見つけるまでかなり時間がかかりました…。

  • 4
  • 5
    WAFの設定をONにする

    WAFがOFFのままだとセキュリティが弱いため、忘れずにONにします。

    設定が正常に完了すると、図のように表示されます。

    長くなりましたが、「JavaScript」での広告遅延方法は以上となります。

スポンサーリンク

まとめ

ここまで読んで頂き、ありがとうございます。

いかがでしたでしょうか。

長文となってしまいましたが、基本的には設定が単純明快な「Flying Scripts」で問題ございません。JavaScriptの方は、オマケで紹介していると考えてください。

ただ、広告を遅延表示の設定をした場合、レイアウトの表示崩れが起こる可能性があります。表示崩れ対策について、以下の記事に詳しく解説していますので、あわせてご覧ください。

不明な点や間違った点がございましたら、気軽にお問合せフォームよりご連絡をお願いします。できる限りサポートさせて頂きます。

それではまた会いましょう!

コメント

タイトルとURLをコピーしました