Sunday, 27 May 2018

Mobile Separate URLs

A common setup would be pages on www.example.com serving desktop users with corresponding pages served on m.example.com for mobile users. Google does not favor any particular URL format as long as they are all accessible for all Googlebot user-agents.

Separate mobile URLs serve different code to desktop and mobile devices (and perhaps even tablets), and on different URLs.

We support two methods to have this annotation: in the HTML of the pages themselves and in sitemaps. For example, suppose that the desktop URL is http://example.com/page-1 and the corresponding mobile URL is http://m.example.com/page-1. The annotations in this example would be as follows.

Annotations in the HTML

On the desktop page (http://www.example.com/page-1), add:

<link rel="alternate" media="only screen and (max-width: 640px)"
 href="http://m.example.com/page-1">
and on the mobile page (http://m.example.com/page-1), the required annotation should be:

<link rel="canonical" href="http://www.example.com/page-1">
This rel="canonical" tag on the mobile URL pointing to the desktop page is required.

Annotations in sitemaps

We support including the rel=”alternate” annotation for the desktop pages in sitemaps like this:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://www.example.com/page-1/</loc>
<xhtml:link
rel="alternate"
media="only screen and (max-width: 640px)"
href="http://m.example.com/page-1" />
</url>
</urlset>

The required rel="canonical" tag on the mobile URL should still be added to the mobile page’s HTML.

Thursday, 3 May 2018

Create your AMP HTML page

Code:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

AMP HTML documents MUST:


Use this tag in main non AMP page

<link rel="amphtml" href="https://www.bajajfinserv.in/amp/business-loan" />