AMP-ad the Easy Way To Create Adsense Ads in AMP Templates

Make adsense ads on blogs valid AMP easily with just a few steps.
Although adsense ads still appear on AMP blogs by using "add widget" in blog settings, but this way "invalid" or in other words there will be AMP Html error if you test in "AMPtest", because if your AMP page is invalid , your page will not be acknowledged as AMP consequently your AMP blog will not show up in "Google Search". Thus if you have a blog AMP you should use a valid widget AMP you can modify the widget to be valid AMP.

As in this tutorial Blog-Seo will share how to create a adsense ads valid AMP following steps below:
First, copy the script below


<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Secondly, to create a valid adsense ads AMP use the following code:

How To Make Adsense Ads Valid AMP At the Beginning Post

To create an ad at the beginning of the post you can use banner ads with size 900 × 90 which later we will make the high remains 100px use the code below

<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-5873112634903704"
data-ad-slot="2214189591">
</amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxx"
data-ad-slot="xxxxxx">

With the code above will create an ad with a height "fixed" 100px, and widht 100%.

How to Make Adsense Ads Valid AMP At the End Of Post

Ads at the end of the post are valid AMP, use the type of ad with size 300 × 250 use the following valid AMP code:

<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-5873112634903704"
data-ad-slot="5074999102">
</amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-5873112634903704"
data-ad-slot="5074999102">

With the code above your ad will be valid AMP with 250px height and 300px width.

How to Create a Valid Auto Ads AMP

Please check this feature in your Adsense dashboard, whether you can already use Auto Ad feature or not. Please check in the
Optimization> Labs section. Look picture below

If it looks like the picture below, then you mean you can use this feature of AMP auto ads. You just turn it on switch toggle button then get the code.

Next please save the amp-auto-ad.js code above the code
"</head>" or "< /head><! - <head/> - >"
and please use the code below.

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery'>
<script async='async' custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
</b:if>

The above code will not appear on static pages, error pages, and blog search pages.

Then for the second code please keep it under "<body>" code or code like below

"<body itemscope='itemscope' itemtype = 'http://schema.org/WebPage'>"

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery'>
<amp-auto-ads type="adsense" data-ad-client="ca-pub-1234567890"></amp-auto-ads>
</b:if>

Please adjust the code marked according to your Adsense data-ad-client code. The above ad code will not appear on static pages, error pages, and blog search pages.

The current AMP auto ads will only be shown to users using mobile devices, so please see their appearance by using a mobile device.

With the above mentioned way your adsense ads will be valid AMP, you can also modify the other widgets so that the valid AMP like:

And some other widgets must be valid AMP so that your post can be indexed and appear in "Search Engine".

Greetings bloggers

Tags: