本サイトはプロモーションが含まれています。

アフィリエイト

AFFINGER記事をAMP化してアドセンス広告を表示させる方法

Affingerでアドセンスを設定する

スマホの表示速度が上がると言われているAMP化をするとアドセンスでの収入が爆上がりします。

それをワードプレスのテーマAFFINGERで行うにはどうしたらいいでしょうか?

にゃんた
いざ設定しようと思ってもやり方がわからないんだよね

amp化とは、スマホで見るサイトの表示スピードを上げるために行われる手法のことです。

サイト全体をamp化することにより、スマホでの表示速度が劇的に向上しSEOにも有益です。

 

しかしamp化したときにgoogleアドセンスの広告が表示されなくなる問題があったので、いろいろ調べてみました。

収益に直結する問題のため、これから順を追って説明しますので早急に改善することをオススメします。

では、まいりましょう!

 

【AFFINGERをamp化してアドセンスを表示】googleアドセンスからコードを取得

長々話しません(笑)

やり方です。

まずgoogleアドセンスへ行き次の手順でコードを取得してください。

→ Googleアドセンス

① ログイン後、メニューから「広告」をクリック

② 「広告ユニットごと」タブをクリック

③ 「ディスプレイ広告」をクリック

 

④ 「広告ユニットの名前を入力」のところで「AMPディスプレイ広告」など適当な名前を入れます。

 

⑤ 右側にある広告サイズで「レスポンシブ」を選ぶ

 

⑥ 「作成」をクリック

 

⑦ 「AMP」タブをクリックしてすぐ下の「コードをコピー」をクリック

 

1つ目のコードをワードプレスへ張り付け

⑧ AFFINGERのダッシュボードへ行き、「外観」→「ウィジェット」をクリック。

⑨ 画面左側にある「00_STINGERカスタムHTML」をクリックし「広告-Googleアドセンスのスマホ」をクリックしてチェック→「ウィジェットを追加」します。

⑩ そうすると画面右側に下のようなコード入力画面が出るので1の横で先ほどのコードを張り付けます。

⑪ 「タイトルを出力しない」にチェックし「保存」→「完了」。

 

これで1つ目のコードの貼り付けは終了しました。

 

2つ目のコードをアドセンスからコピーする

 

⑫ もう一度googleアドセンスに戻り、先ほどコピーしたコードの下にもう少し長めのコードが記載されているのでコピーします。

2つ目のコードをワードプレスで張り付ける

2つ目のコードを貼り付ける方法は

  • AFFINGER管理
  • テーマファイルエディタ

の2つあります。

AFFINGER管理

① 画面上部の「AFFINGER管理」をクリックします。

② 項目中の「その他」を選びます。

③ </>コードに出力の「headに出力するコード」に2つ目のコードを貼り付けます。

④ 「Save」をクリックして保存してください。

 

テーマファイルエディタ

① AFFINGERから「外観」→「テーマファイルエディター」をクリック。

② 画面右側にある選択欄で「AFFINGER]を選んで「選択」をクリック。(childではありません)

③ テーマファイルがずらっと出るので「テーマヘッダー」をクリック。

④ 左に出るコード欄の「<head>~</head>」の間に先ほどのコードを張り付けます。

 

⑤ ずっと下の方にある「ファイルを更新」をクリックで保存します。

 

記事の広告を表示したいところにタグを張り付ける

 

これで準備は完了です。

記事に行き、広告を表示させたい位置で「タグ」→「その他のパーツ」→「アドセンス」をクリック。

スポンサーリンク

のタグが張り付けられます。

amp設定できているか確認

 

記事をamp表示させて、広告が出ているか確認してください。

 

以上です。

サイトをAMP化する利点とは?

サイトをAMP化する利点は以下の通りです:

1. 高速なページ表示できる

AMPはモバイルのページ表示を高速化する手法です。

AMP化することで、ページの読み込み時間が短縮され、ユーザーはより快適な閲覧体験を得ることができます。

高速なページ表示は、ユーザーの満足度を向上させ、離脱率を低下させる効果があります。

2. モバイルフレンドリーになる

AMPはモバイルに最適化されたページを作成するため、モバイルデバイスでの閲覧に適したレイアウトやフォーマットを提供します。

モバイルフレンドリーなサイトは、モバイル検索において優先的に表示される可能性が高くなります。

3. SEO効果がある

GoogleはAMP化されたページの表示を優先する傾向があります。

AMP化によって、ページの読み込み速度が向上し、検索エンジンでの表示順位が上昇する可能性があります。

また、AMP化はモバイル検索ランキングにおいても重要な要素です。

4. ユーザーエンゲージメントの向上が見込める

高速なページ表示やモバイルフレンドリーなレイアウトは、ユーザーのエンゲージメントを向上させる効果があります。

AMP化されたページはより使いやすく、情報へのアクセスが迅速です。

5. データ使用量の削減ができる

AMP化することで、ページのデータ使用量が削減されます。

データ使用量の削減は、モバイルデバイスの通信料を節約するだけでなく、低速なネットワーク接続下でもスムーズなページ表示を実現します。

 

以上がサイトをAMP化する利点です。

AMP化はモバイルユーザーへの最適化やSEO効果の向上に役立つため、サイトの改善や成果向上を目指す際に検討する価値があります。

あとがき

 

余分な文章をカットしているので、逆に分かりにくかったらごめんなさい。

当時私はこれで収入が10倍になりました。(3円→30円)w

お役に立てれば幸いです。

 

【2022年1月追記】

実はAFFINGERのamp化には、いろいろ制限があり、設定するとAFFINGERの機能が利用できなくなるケースがあります。

文章などのアニメーション機能は使えません。

他にもいろいろありますので、設定される方は自己責任でお願いします。

 

 

 

 

このホームページではアフィリエイトやワードプレスについての情報をお届けしています。

よければ他の記事も読んでみてくださいね。

→ ホームへ戻る

  • この記事を書いた人
  • 最新記事

hikey

このサイトでは50歳にして会社を辞め個人事業主として独立していくまでの過程をブログにて紹介していきます。基本はアフィリエイトに関する記事を掲載しますが、ワードプレスに関する記事も載せていきます。情報商材を購入しての感想なんかも書いていきます。

-アフィリエイト
-,