スマホの表示速度が上がると言われているAMP化。
そのアドセンス広告をAFFINGERで表示させる方法を解説します。
そう言った意見が多いので、この記事では、ワードプレスのテーマであるAFFINGERをamp化してアドセンスを表示させる方法をお伝えします。
amp化とは、スマホで見るサイトの表示スピードを上げるために行われる手法のことです。
サイト全体をamp化することにより、スマホでの表示速度が劇的に向上しSEOにも有益です。
しかしamp化したときにgoogleアドセンスの広告が表示されなくなる問題があったので、いろいろ調べてみました。
収益に直結する問題のため、これから順を追って説明しますので早急に改善することをオススメします。
では、まいりましょう！
【AFFINGERをamp化してアドセンスを表示】googleアドセンスからコードを取得
長々話しません(笑)
やり方です。
まずgoogleアドセンスへ行き次の手順でコードを取得してください。
① ログイン後、メニューから「広告」をクリック
② 「広告ユニットごと」タブをクリック
③ 「ディスプレイ広告」をクリック
④ 「広告ユニットの名前を入力」のところで「AMPディスプレイ広告」など適当な名前を入れます。
⑤ 右側にある広告サイズで「レスポンシブ」を選ぶ
⑥ 「作成」をクリック
⑦ 「AMP」タブをクリックしてすぐ下の「コードをコピー」をクリック
1つ目のコードをワードプレスへ張り付け
⑧ AFFINGERのダッシュボードへ行き、「外観」→「ウィジェット」をクリック。
⑨ 画面左側にある「00_STINGERカスタムHTML」をクリックし「広告-Googleアドセンスのスマホ」をクリックしてチェック→「ウィジェットを追加」します。
⑩ そうすると画面右側に下のようなコード入力画面が出るので1の横で先ほどのコードを張り付けます。
⑪ 「タイトルを出力しない」にチェックし「保存」→「完了」。
これで1つ目のコードの貼り付けは終了しました。
２つ目のコードをアドセンスからコピーする
⑫ もう一度googleアドセンスに戻り、先ほどコピーしたコードの下にもう少し長めのコードが記載されているのでコピーします。
2つ目のコードをワードプレスで張り付ける
2つ目のコードを貼り付ける方法は
- AFFINGER管理
- テーマファイルエディタ
の２つあります。
AFFINGER管理
① 画面上部の「AFFINGER管理」をクリックします。
② 項目中の「その他」を選びます。
③ </>コードに出力の「headに出力するコード」に2つ目のコードを貼り付けます。
④ 「Save」をクリックして保存してください。
テーマファイルエディタ
① AFFINGERから「外観」→「テーマファイルエディター」をクリック。
② 画面右側にある選択欄で「AFFINGER]を選んで「選択」をクリック。（childではありません）
③ テーマファイルがずらっと出るので「テーマヘッダー」をクリック。
④ 左に出るコード欄の「<head>～</head>」の間に先ほどのコードを張り付けます。
⑤ ずっと下の方にある「ファイルを更新」をクリックで保存します。
記事の広告を表示したいところにタグを張り付ける
これで準備は完了です。
記事に行き、広告を表示させたい位置で「タグ」→「その他のパーツ」→「アドセンス」をクリック。
スポンサーリンク
amp設定できているか確認
記事をamp表示させて、広告が出ているか確認してください。
以上です。
あとがき
余分な文章をカットしているので、逆に分かりにくかったらごめんなさい。
当時私はこれで収入が10倍になりました。（3円→30円）ｗ
お役に立てれば幸いです。
【2022年1月追記】
実はAFFINGERのamp化には、いろいろ制限があり、設定するとAFFINGERの機能が利用できなくなるケースがあります。
文章などのアニメーション機能は使えません。
他にもいろいろありますので、設定される方は自己責任でお願いします。
-
-
ワードプレスでのアイキャッチ画像の作り方を解説します。
あなたはブログを書いていて、閲覧数が上がれば比例して収入が上がると思っていませんか？ 実は私も必死に閲覧数を増やそうと、記事を量産していました。 googleアドセンスの収入は増えたよう ...
続きを見る
