Thinking outside the box, restrictions laid out when applying AMP HTML web pages features on your Blogger themes/templates helps you to deliver a neat & "tidier" theme layout. This web page working environment really helps beginners to experts users to organize, plan & design blog pages, while improving/implementing best web page practices.
Auto Added Attributes
Upon saving your Blogger template edits atTemplate HTML, the AMP project integration will work as expected & uses the required elements an AMP powered webpage must be applied with. Below is an example how the <html> tag is used on a Blogger + AMP integration.
However, when going back to edit your Blogger theme, Blogger servers will add automatically additional attributes to the
<html> tag. When this attributes is added & saved, your AMP powered blog pages will not validate. Here is an example underlined in red.Unless you are down-grading your templates & use Blogger Classic Templates, this will not be an issue. But when using previous versions of Blogger templates, you will loose a lot of newer Blogger template functionality (ie. tags, conditionals etc) which is very useful to really enhance your blog pages.
Always remember to remove additional attributes applied automatically by Blogger before saving your template changes.
AMP Components on Blogger Dashboard
AMP Project HTML web pages uses several of its own document elements (known as components) to assign or use certain built-in functionality. For example, to display an image, instead of using the normal<img/> tag, for AMP HTML pages will be using <amp-img/> component/tag instead.Another good example the usage of
<amp-sidebar/> component to easily create a slide out sidebar for your web pages. With only a couple of additions, no extra coding needed, creating a slide out sidebar is made easy even for beginners. Below is an example.
The awesome slide out sidebar will look like so - simple & easy without any additional coding!
When applying this slide out
<amp-sidebar/> component, if users requires to include Blogger section elements & widgets, it will not show up/display at Blogger layout page for further editing/changes/updates. This is because Blogger dashboard could not detect the <amp-sidebar/> component.To overcome this, update. change & save
<amp-sidebar/> component to use a <div/> element tag instead & save your template.
When you have finished editing/updates widgets at your slide out sidebar Blogger layout page, change the
<div/> element tag & use <amp-sidebar/> component instead, again save your template changes.Consistent Image Size Uploads
When using AMP HTML web pages, all images are required to use<amp-img/> component to replace the existing <img/> element tag. Within this new component, all images are required to be equipped with the width & height attributes.
Careful planning must be considered by blog owners when uploading images via blog WYSIWYG editors. Since that Blogger already comes with presets image width/sizes (Small, Medium, Large, X-Large & Original), try as much to use the built in functionality sizes instead - to ease your editing.
We recommend to use/upload image & set the size to Extra Large (at blog editor) with 4:3 image ratio, an average image size of 1200px(W) X 900px(H) & below the 100kb image file size. This reasoning will be further laid out in future blog posts releases.
This posts also shows readers the image upload consistency & how it will display on various screen sizes. But wait! Does adding or uploading images to your blog posts editor needs to change the
<img/> tag & use <amp-img/> tag instead?The answer is yes. But... by doing so your images will no longer get picked up by your Blogger feed ;(. You can use the
<noscript/> tag & insert your main post image in it & edit each image you uploaded to use the AMP image component. That would be a lot of prep for you to & time consuming...Good news is that, we managed to developed a Blogger template, where you can get both worlds working for your Blog/website & still keep your AMP powered pages validated.
So what do you think? Is it too much to ask for (or consider) when using AMP HTML web page for Blogger templates? Shoot a comment below. We would love to read & share your findings to!