How to Write A Valid AMP Post/Page

Accelerated Mobile Pages or shortened to AMP is a free service that functions to load pages on mobile devices faster and lighter.

At a glance there is no difference from how to write articles for AMP and Non-AMP, it's just that the most striking part is the image invocation that does not use the <img /> tag but uses the <amp-img /> tag , so if you migrate using the AMP template then you have to change all the images in your posts.

Attach the main image (Thumbnail)/Featured Image of the post

As we know Blogger cannot read images with <amp-img /> , so your post thumbnail on the homepage will not appear, or when you share an article on social media your article thumbnail image will not appear.

To fix this, use the code below at the beginning of your post.

<noscript><img alt='Title_alt_image' src='Image url' title='Title_alt_image'/></noscript>

Replace the part in the color block with the url of the image that you want to use as the main image of the post.

Adding images to the content of the article

As explained above, the image in AMP is different from the image in Non-AMP, the sample code to install an image is as follows:

<amp-img alt='Title_alt_image' height='300' layout='responsive' src='Image url' width='430'/>

Change the image size and layout to your liking.

AMP Youtube

Play amp-youtube Thumbnail

<amp-youtube data-videoid="Eng0tMkA6Y8" height="270" layout="responsive" width="480"></amp-youtube>

Play amp-youtube on click Thumbnail

Please save the following 2 pieces of js above the code </head>or &lt;/head&gt;&lt;!--<head/>--&gt;if it turns out that in your blog template there are both of these js, please step over this step. Or if there is already a js from one of them, then please complete it with the other js.

use the following HTML code in the post in HTML mode.

<amp-lightbox id="open-video" layout="nodisplay">
<div class="lightbox-video" on="tap:open-video.close,btn-play.show" role="button" tabindex="0" aria-label="Close Video">
<div class="video-box">
<amp-youtube id="video" data-videoid="Eng0tMkA6Y8" height="270" layout="responsive" width="480" data-param-controls="0" data-param-rel="0" data-param-showinfo="0" data-param-modestbranding="1" data-param-autohide="1" hidden></amp-youtube>
</div>
</div>
</amp-lightbox>
<div class="video-img" id="btn-play" on="tap:video.show, video.play, btn-play.hide,open-video" role="button" tabindex="0" aria-label="Play Video">
<amp-img alt="Video" src="https://i.ytimg.com/vi/Eng0tMkA6Y8/mqdefault.jpg" width="637" height="356" layout="responsive"></amp-img>
<div class="playonimage"></div>
</div>

Preview

All you have to do is adjust the Youtube video ID for the video and the video thumbnail in the 2 codes that I marked above.