AMP is a Google-backed project, designed as an open standard for any publisher to have pages load quickly on mobile devices. It’s a framework to make quick webpages for mobile, which:
There are two ways to implement AMP for your website:
I would recommend you to have two versions of your article since AMP allows only limited HTML tags and all the CSS has to be inlined. While creating two different pages, you should link them to inform search engine crawlers about the existence of your AMP pages.
If you have a WordPress site, you should download the Automatic AMP plug-in, which Yoast recommends. After one enables the plugin, it adds a standard meta tag in the head of the webpage to help Google recognise that an AMP-enabled version exists. Check by adding the /amp/ suffix to the end of any URL.
One of the webpages of NearFox:
Here’s the same webpage on your desktop:
Without styling, AMP pages are very basic but, the good news is, we can style AMP pages.
AMP HTML pages can be styled using CSS but it restricts the utilization of CSS for better user experience. Add all CSS inside a <style amp-custom> tag in the head of the document. For example:
<!doctype html>
<head>
…
<style amp-custom>
/* any custom styles go here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
…
</head>
Like on an ordinary HTML page, AMP permits you to embed pictures, video and sound substance. AMP doesn’t support the default HTML counterparts to displaying media, like <img>.
<amp-img src=”example.jpg” width=”200″ height=”200″></amp-img>
Like images, there is a custom tag that must be used to embed locally hosted videos called amp-video. For embedding YouTube video, there is a different component, amp-youtube.
<amp-video width=”400″ height=”300″ src=”https://example.com/videos/example.mp4″
poster=”example-poster.jpg”>
<div fallback>
<p>Your browser doesn’t support HTML5 video</p>
</div>
</amp-video>
There is also support for things such as slideshows via amp-carousel and image lightboxes via amp-image-lightbox, as well social media embeds for Twitter, Instagram, Facebook, Pinterest and Vine via their own extended components. Here is a list of some of most useful built-in and extended components of AMP.
Built-In Components: They’re generally accessible in each AMP archive as they are constructed right into the AMP runtime.
Extended Components: You must explicitly include them into your AMP document. Many of them can be used to embed content from third-party services, such as from Twitter or Instagram. Some of them are:
Yoast has developed its own use plug-in, Glue, that adds styling options for the Automattic plug-in. Once you’ve enabled Glue, you can see the settings under SEO>AMP>Design. Here, you can set the colours and fonts to be closer to your original desktop page, as well as upload your own logo and add you own custom CSS.
An AMP webpage cannot incorporate any third-party or custom JavaScript; however, this doesn’t imply that Accelerated Mobile Pages don’t utilize JavaScript.
AMP’s JavaScript library (AMP runtime) is responsible for loading and rendering AMP pages quick by implementing best execution practices.
It fetches valid AMP documents, caches and loads them. AMP CDN likewise has an inherent validation framework.
The validation of the code is given inside Google Chrome’s DevTools. Exploring to your page with the hash #development=1 included toward the end of the URL empowers approval.
Trackers are executed through the amp-pixel component to number site visits. To utilize a Google Analytics tracker on an AMP page, you need to follow the Analytics Measurement Protocol :
<amp-pixel src=”https://ssl.google-analytics.com/collect?v=1
&tid=UA-12345678-1&t=pageview&cid=client_id
&dt=page_title&dl=page_url”>
</amp-pixel>
The client_id is generated on the server side. The page_title and the page_url should be URL-encoded.
8 Comments
painting and decorating
Hi there i am kavin, its my first time to commenting anywhere, when i read this paragraph i thought
i could also create comment due to this good paragraph.
aberovano
Cialis Et Viagra En Ligne advibialakly buy cialis online reviews glopongawl Viagra Einnahmeempfehlung
thc cbd smell
how many 500 mg cbd drops for pain
Kiera Griffee
Hello? I run a student service oriented website which has a good no of hits. I would like to convert it to a business. Can I register the website itslef as a company or should I start a company and the website should be owned by it? What is the protocol to start a new website company in India? Please explain each stage in detail as I am totally new to this field..
Lavinia Dulac
The Firefox updated tab comes up everytime i start firefox. What do i do to stop it?
Ronny Mardirossian
I have a MacBook computer and I want my pictures that are on my computer to be on my Motorola Razr 2 v9. I have a memory card and a memory card adapter. When I put the card in the adapter, the computer recognizes it. And the pictures that I have on my phone can transfer to the computer with no problem. But the pictures on my computer won’t transfer to my phone. All that shows up is a big red “x” on a black screen. Am I doing something wrong? The phone company is AT&T..
link
If some one wishes expert view concerning blogging then i propose him/her to
go to see this weblog, Keep up the good work.
Edwina Galati
Content has always been master, appears the black hats are getting own from the white hat profit making machines.