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.

Monday, 7 May 2018

How to increase the PageSpeed Insights

  • Optimize images: Reduce image size according to https://gtmetrix.com/
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content: Render means loading, so if something is render-blocking, it means that it is keeping the page from loading as quickly as it could.
Google recommends to remove or defer javascripts that interfere with loading the above the fold content of your webpages.

Above the fold means what a user sees initially on their screen. That screen might be a phone, ipad, desktop or whatever the user is using to see your webpage.

Soluition: Move the CSS & JavaScript to the footer of the website
  • Avoid landing page redirects: Don't avoid landing page redirects when using HSTS. HSTS is an important reason not to bypass redirects: the HSTS preload list requires your site to redirect to https first, then to www or non www. If you want to preload your site on the preload list, don't try to avoid this one extra landing page redirect.
  • Leverage browser caching: Leverage Browser Caching means storing static files of a website in visitor browser. And then retrieving them from browser quickly instead again from server. Actually it uses to speed up each page of a website
Soluition: Need to update code in .htaccess file according to server or using the tool https://wordpress.org/plugins/leverage-browser-caching/
  • Minify JavaScript, Minify CSS: Make your website smaller and faster to load by minifying the JS and CSS code.
Soluition: https://wordpress.org/plugins/autoptimize/
  • Reduce server response time: It is the time taken by the browser to start loading the website. It measures how long it takes to load the necessary HTML to begin rendering the page from your server, subtracting out the network latency between Google and your server. It adds to the total website loading time. In short, server response time (SRT) is the amount of time it takes for the web browser to receive a response.
Soluition: 
  1. Check Your Hosting
  2. Choose Your Web Server Carefully
  3. Optimize Your Web Servers
  4. Reduce Bloat
  5. Optimize Your Database

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" />