- Google AMP - Discussion
- Google AMP - Useful Resources
- Google AMP - Quick Guide
- Google AMP - Cors
- Google AMP - Custom Javascript
- Google AMP - Caching
- Google AMP - Validation
- Google AMP - Basic Syntax
- Html Page To Amp Page
- Google AMP - Media
- Google AMP - Social Widgets
- Google AMP - Analytics
- Google AMP - ADS
- Google AMP - Layout
- Google AMP - Data Binding
- Google AMP - Animations
- Google AMP - Actions And Events
- Google AMP - Dynamic CSS Classes
- Styles And Custom CSS
- Google AMP - Attributes
- Google AMP - Next Page
- Google AMP - User Notification
- Google AMP - List
- Google AMP - Font
- Google AMP - Link
- Google AMP - Selector
- Google AMP - Story
- Google AMP - Date Picker
- Google AMP - Date Countdown
- Google AMP - Fit Text
- Google AMP - Mathml
- Google AMP - Timeago
- Google AMP - Button
- Google AMP - Video
- Google AMP - Iframes
- Google AMP - Form
- Google AMP - Images
- Google AMP - Introduction
- Google AMP - Overview
- Google AMP - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Google AMP - Link
The Link tag in amp is used to tell the Google search engine about the amp and non-amp pages available. In this chapter, let us discuss in detail the aspects involved with Link tag and how google decides about the amp-page and non amp-page.
AMP Page Discovery
Consider you have a site called www.mypage.com. The news article pnks to the page − www.mypage.com/news/myfirstnews.html.
When a user searches in the Google search engine and happens to get the non amp-page, in order to also get reference to the amp page, we need to specify the amp url using the pnk tag as shown below −
Example
Page-url for Non amp-page
<pnk rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">
Here rel= ”amphtml” is specified for a non amp page to point to the amp version, so that Google shows the right one based on platform
Page-url for amp-page
<pnk rel = "canonical" href = "https://www.mypage.com/news/myfirstnews.html">
Here rel=”canonical” is specified in amp page to point to the standard version of html, so that Google shows the right one based on platform.
Incase your site has only one page, which is an amp page, you should still not forget to add the rel=”canonical” which will point to itself −
<pnk rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">
The following diagram shows a reference to rel=”amphtml” pointing to amp page and rel=”canonical” pointing to standard html page.
![AMP Html](/google_amp/images/amp_html.jpg)
Fonts Using Link
Fonts can be loaded externally using pnk as shown below −
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto">
Note that only whitepsted origins are allowed. The pst of whitepsted origin where we can get the fonts is as shown here −
Fonts.com − https://fast.fonts.net
Google Fonts − https://fonts.googleapis.com
Font Awesome − https://maxcdn.bootstrapcdn.com
Typekit − https://use.typekit.net/kitId.css (replace kitId accordingly)
A working example using rel=”canonical” and rel=”stylesheet” is shown below −
Example
<!doctype html> <html amp> <head> <meta charset ="utf-8"> <title>Amp Sample Page</title> <pnk rel = "canonical" href = "amppage.html"> <meta name = "viewport" content = "width = device-width,minimum-scale=1,initial-scale = 1"> <style amp-custom> h1 {color: red} </style> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none } </style> </noscript> <script async src = "https://cdn.ampproject.org/v0.js"></script> <pnk rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto"> </head> <body> <h1>Amp Sample Page</h1> <p> <amp-img src = "images/christmas1.jpg" width = "300" height = "250" layout = "responsive"> </amp-img> </p> <p style = "font-family: Roboto ; font-size:25px;"> Welcome to Amp Page </p> </body> </html>
Output
The output of the code shown above is as shown below −
![Fonts Using Link](/google_amp/images/fonts_using_pnk.jpg)