Posts

amp

Today, the use of mobile phones are growing drastically. Mobile devices have reformed our way of accessing information. Nowadays we consume a vast amount of data through our mobile phones. So mobile web becomes an indivisible part of our daily life. Publishers utilized these mobile web to reach the targeted mobile users. But the experience of mobile browsing is often not appeasing and need to wait a long time for the pages to be loaded. So the  requirement of better AMP optimization techniques is highly recommended.

Due to the bad website experience, publishers lost their customers and business to a great extend. In order to avoid this situation, Google introduced a new open source initiative called Accelerated Mobile Pages(AMP), which aims to improve the performance of mobile web. We can perform AMP optimization techniques to improve the performance of websites on mobile.

 

How to make fast web pages?website slow

  • Simplify web pages by using less Javascript files.
  • Optimize bandwidth
    ○ Use best content for device (image resolution etc.)
    ○ Parallelize the loading (asynchronous load)
  • Store local copies of web pages on Content Delivery Servers.

Content Delivery Networks (CDN)

Content delivery networks is a collection of web servers that are distributed geographically across the earth. It’s goal is to serve the content to end-users with high availability and performance. CDNs virtually reduce the physical distance between the source server and end-user. When we distribute our content through CDNs,  it routes the user requests to the closest CDN server according to the position of the end-user on internet. Usually, each CDNs will stores a cached version of its content in multiple geographical locations.

cdn

Commonly CDNs are used to host static contents like images, videos, CSS, JavaScript etc. But the use of single domain will cause limitation for simultaneous connections to the server. For CDN files, they are hosted on different servers. So, there is no limit for connections to a CND server. Through CDNs, we can  achieve better mobile performance optimization such as smaller bandwidth, load distribution and shorter load time.

Accelerated Mobile Pages(AMP)

AMP Project is an initiative fromamp page Google to provide a solution for faster mobile websites. It is an open source coding standard for publishers. The main goal of the technology is to help the publishers to create mobile-friendly content and load it faster as possible. AMP optimization of web pages will provides content to the user much faster and brings better user experience. It does not tries to unify the appearance of web pages on mobile. But helps to create a common core and structure to speed up load times.

AMP pages are none other than HTML pages with a limited set of HTML tags. The use of limited HTML tags will reduce the load time of web pages. AMP HTML can be rendered on any modern browser. To optimize delivery times for pages, Google maintains a Google AMP Cache. AMP can improves server performance too. It can be an SEO activity focusing mobile users.

Google AMP Cache

AMP cache will  cache all AMP optimized pages and it serves to everyone at no cost. It means that the content provider does not have any additional work for caching AMP pages. The combination of caching distribution system and limited HTML structure will increase the speed of delivering content to the user.

AMP framework Components

This framework consists of three components:framework components

  • AMP HTML :

It is a standard HTML markup with web components.

  • AMP JavaScript :

It will manage the resource loading.

  • AMP Caches :

It helps to serve and validate AMP pages.

 

AMP Optimization of Web pages

This optimization technique makes the AMP pages really fast. The main idea is to restrict everything on the page, what could be extremely slow and provide another solution for the particular issue. It includes:

  • Allows asynchronous scripts only
  • Static sizes of all resources
  • Don’t let extension mechanisms block rendering
  • CSS style sheet limitation

1. Allows asynchronous scripts only

AMP Pages does not allow  any JavaScript that is synchronous. JavaScript files are usually synchronous. So it can modify basically all aspects of the page and cause delays during the page rendering. In AMP, JavaScript must be declared as async. It informs the browser that, the execution of JavaScript is not crucial to build the web page.

Example : <script src=”https://example.com/javascript.js” async></script>

2. Static sizes of all resources

The size of all external resources on the page like videos, images, advertisements, etc must be known in advance before downloading them. So that AMP can pre-determine each element’s size and position before the resources are downloaded. Hence AMP loads the layout of the page without waiting for any resources to download.

3. Don’t let extension mechanisms block rendering

Usually AMP doesn’t let extension mechanisms to block page rendering. If we want to use some social media embeds like tweets, instagram etc in our page. All these embeds always requires some additional HTTP requests to load. So we need to inform the AMP system that we will use some custom script which requires a custom tag. During this situation custom tag is mentioned in head of the page.  AMP will create a box for our custom tag before it knows what will be its content.

Example : <script async custom-element=”amp-iframe”  src=”https://cdn.ampproject.org/v0/amp-    iframe-0.1.js”></script>

4. CSS style sheet limitation

Cascade style sheet(CSS) files are usually large and contains styles for the whole site. It can also delays the loading time of a web page to an extend. The size limit for custom AMP CSS is 50 kilobytes. So we must reduce the size of our external CSS to 50 KB. In order to avoid other http requests during page rendering, all the CSS must be written as inline.amp working

AMP Optimization Steps :

  • Include AMP symbol within the HTML tag.
  • Add canonical tag.
  • Include AMP library file.
  • Specify a viewport.
  • AMP CSS validation.
  • AMP boiler plate.
  • Replace <img> with <amp-img>
  • Link AMP content
  • AMP page validation

HTML page before AMP optimization

article.html file :

<!doctype html>
<html lang="en">
  <head>
    <title>News Article</title>
    <link href="base.css" rel="stylesheet" />
    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

1. Include AMP symbol  within the HTML tag

  • Copy  entire code from the HTML file( eg:  article.html ) and paste it into a new file.
  • Save the new file as  article.amp.html.
  • Add the attribute  to the <html> tag in the head section.
           Example: <html  lang="en">

2. Add canonical tag

  • Every AMP document must posses a link referencing to its ‘canonical version’ of that document.
  • We must provide the absolute URL of original HTML page.
  • Then the tag must be included in head section.
   Example: <link rel="canonical" href="/article.html">

3. Include AMP library file

  • To begin AMP optimization we should add AMP library file.
  • It can help us to figure out,what all we need to fix.
  • Tag must be included in the head section.
   Example: <script async src="https://cdn.ampproject.org/v0.js"></script>

4. Specify a viewport

  • AMP requires  definitons for width and minimum-scale for the viewport.
  • Its values must be device-width and 1, respectively.
  • Viewport is a common tag used in head section.
   Example: <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

5. AMP CSS validation

  • In AMP page we cannot include external stylesheet.
  • Reduce the size of  base.css file to 50 KB.
  • Embed the style sheet within  <style amp-custom></style> tag as inline styles.
   Example: <style amp-custom>

                 /* The content from base.css */

            </style>

6. AMP boiler plate

  • Add the AMP boilerplate code to the bottom of the <head> tag.
  • Boilerplate helps to hide the content of body section until the AMP JavaScript library is loaded.
  • It will helps to prevent unstyled content from rendering, also known as Flash Of Unstyled Content (FOUC).
  • FOUC : It means a situation where a web page appears briefly with the browsers default styles prior to loading an external CSS.
boilerplate

AMP boiler plate code

 

7. Replace <img> with <amp-img>

  • AMP designed special web component to replace the <img> tag with <amp-img> tag.
  • In AMP, we need to define the width, height and layout for amp-img elements.
  • So AMP can per-determine the aspect ratio of the element.
  • layout attribute is used to specify, how we want the element to be positioned and scaled.
  • Attribute layout =”responsive” is provided to inform that our image can be scaled and resize.
  • But amp-img tag is added to the body section of the HTML page.
   Example:<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

8. Link AMP content

  • The next step is to link the canonical version to the AMP page.
  • This is achieved by including a <link rel="amphtml"> tag to the <head> section of the original non-AMP HTML page.
  • While generating AMP versions of traditional non-AMP HTML pages.
  • Both versions have generally the same content, but have different presentations.
  • So we should treat the traditional HTML pages as the “canonical” pages.
  • Pair the AMP pages with canonical pages.
   Example: <link rel="amphtml" href="/article.amp.html">

 

link

8. AMP Page Validation

  • This is the last step in AMP optimization.
  • Here we validate our AMP page created in AMP validator to check whether it is optimized or not.

amp validation

AMP Page After Optimization

article.amp.html :

<!doctype html>
<html  lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">
    <title>News Article</title>
    <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>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }
      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }
      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }
      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

 

search console

Google search console or webmaster tools help to analyse about the backlinks, crawl errors, or for adjusting the URL parameters. With every new year, Google gives us new tools, analytics and data to track in Google Search Console.  Here we will learn about the Search appearance, search traffic, Google Index and Crawl.

If you use google webmaster tools together with google analytics, the results will be even better.For every SEO professional Search appearance section in Google Search Console is important. This will tell the secrets of structured data working and if the AMP pages are active or not. Let us see all in details.

Structured Data in google search console

Website owner, local business, the organization understands the woes of implementing structured data. Add the code to the site, but it’s still not showing in the SERPs.  After adding the code to the website, pop into Google Search Console-> Search Appearance-> Structured Data to check for errors.

How to fix the Structure Data in search console?

You can use a local business, blog posts, author, organizations for structured data and there’s something in this report for you. If you use the report, you may begin to see increased CTRs, pages indexed etc. Structured data is not a ranking factor and the site won’t lose the rankings if you leave these errors, it’s better for the user experience is you fix the errors. To fix the error you need to analyze the error individually. 

Rich Cards

Do you remember last time when you searched for the smartphone, movies, jams? You can see a time, place for rich cards in the SERPs. If you are an SEO professional who tracks errors and performance of hard-earned Rich cards, then Google Search Console is the right place to go.Rich cards use schema data to display content in an engaging format to improve the mobile experience.

Rich card report monitors rich snippets, schema, AMP and App Indexing. Once you create Rich cards you can see the report to see what cards are indexed if there are any errors. If you see errors in Google Search console, then Rich cards are not displayed in the SERPs.

Data Highlighter

Rich snippets boost CTR in search results, so it’s essential to websites with book reviews, events and products to use the data highlighter.

  • Select Google Search Console Data Highlighter, select start highlights option and click the option that you like to start highlighting.
  • Use the mouse to highlight elements on the page and pair them with the required elements.
  • When completed, see the list in the Data Highlighter section

HTML Improvements(old version)

Struggling to improve the CTRs? Have you spent the time to improve meta descriptions? With the HTML improvements report, you can improve the on-page SEO. This report displays errors on the metadata. Errors like duplicate titles or description that are long can be seen here. You can find the glimpse of Google viewing the content.

How to fix HTML improvements reports?

This tool is useful for identifying duplicate URL issues that are caused by uppercase variations, duplicate pages etc.

How to fix the issues in the HTML improvement report.
  • Duplicate meta: Review each page list to confirm the unique description for each. Sometimes the same page is indexed twice because of URL parameter issues.
  • Long and short meta: Manually review each page listed and reduce the length of meta title or description. Use 120-150 characters for description and under 70 characters for titles.
  • Missing: You may have forgotten to add meta title or meta description, so add the content.
  • Accelerated Mobile Pages(available both in the old and new version)
  • To increase the page speed, it turns out Accelerated Mobile Pages(AMP). You can find the AMP report in the old and new version of the Google search console.

How to use AMP Report?

AMP status report in Google search console allows monitoring the AMP pages. Watch site templating, other implementation issues that affect the AMP pages. You AMP test tool to make the big changes. You can also filter the AMP results in the performance report.This report helps you fix errors that prevent your AMP pages from appearing in Google Search results with AMP-specific features.

Search Traffic

Search analytics highlight top performing pages, links to the site that brings outs disavow file and even internal links tell what Google is seeing.

Performance(older version is search analytics)

Search Analytics displays 7, 28 or 90 day summary of how often the website appears in the search results.

On the dashboard, see data that can be broken into the following metrics:

  • Queries
  • Pages
  • Countries
  • Devices
  • Search type
  • Search appearance
  • Date

Reports build with search performance in search console?

You can see this data to identify:

  • Top performing pages.
  • Page with low CTR.
  • A number of clicks per keyword.
  • A number of impressions per keyword.
  • Links to the site

All websites have plenty of high-quality links to every page. Links to the site report in Google search console shows the websites that are linking to you.

How to monitor backlinks in Google Search Console? How to disavow?

  • To monitor backlinks in Google search console, follow the steps:
  • Dashboard-> Links
  • Click on “who links the most”.
  • Click “download the latest links” report.
  • Identify abnormal patterns of links coming from the first day.

Find the potential harmful backlinks that you want to disavow in Google search console, follow the steps:

  • Dashboard-> Links.
  • Click on “who links the most”.
  • Sort by linked pages.
  • Manually investigate the quality of sites linking from one page.
  • Use the disavow tool to upload the document of backlinks that you want Google to ignore.

Internal Links

Internal links tell Google what you believe the necessary on the website.

How to use the Internal Links report?

If you are an online shopping company and web page about the women’s apparel’s is the important page to you, but you are linking to the About page the most then you want to revamp the internal linking map.

Manual Actions

What manual actions report in Google Search Console tell us?

You will receive a message in the Manual actions report if you go against Google’s guidelines.

How to remove manual actions in Google Search Console?

If you receive a manual action notice, submit a reconsideration request. Reconsideration request takes time and quick actions from the team. A quick overview of steps to recover from unnatural links to the site:

  • Create a link removal campaign to remove all spammy links.
  • Use the Google spreadsheet to document the link removal work.
  • Submit the disavow file to Google.
  • Write a documented letter to explain why this happened and the steps to remove the links.

International Targeting

If the website has multiple languages or targets to a particular country, then you want to have hreflang tags. International Targeting tool in Search Console identifies errors in the hreflang tags.

How to set up the country preferences in Google search console?

Target a particular country, make sure to review the traffic sources by country in Google Analytics before setting a country preference. To set up[ country preferences, follow the steps:

  • Google search console-> Search Traffic-> International Targeting-> Country.
  • Click the checkbox, be able to choose which country to target.
  • If you don’t set up the targeting, Google determines based on the website’s domain, IP addresses, links and information from Google My Business.

Mobile Usability

Mobile Usability Report

Google launched a mobile usability report in Google search console before the announcement of moving to mobile first index. Mobile usability report gives the opportunity to troubleshoot the design and development issues with mobile. 

How to fix mobile usability report issues?

Side-effects of a poorly designed mobile website leave you drowning in low organic traffic and no customers.  Some of the common errors in mobile usability report and how to fix them:

  • Content wider than the screen.
  • Clickable elements too close together.
  • Viewport not configured.
  • Google Index

Google Index reports in Google search console helps to find if CSS is blocked or to remove the URLs. This reports in Google search console provides data on how the content is performing in the search console.

 Index coverage(index status-> older version)

Here we can find the site’s URLs that Google has indexed over the past year. Monitor, there are no large increases or decreases in the indexed pages.

  • Find index bloat by following the steps:
  • Google search console->status-> index coverage.
  • Move on to Google and search a site:[insert website URL] search.
  • Dig the page of search results to find the pattern in the parameter of each page.

If you notice pages indexed that you don’t want to be indexed, go back and add a noindex tag to each page and add noindex tag to each page.

Blocked resources

This report tells Google what is blocked by the website’s robots.txt directives.

Most common items that are blocked are java script and css. Googlebot can’t render pages using js and may affect the rankings.

How to fix blocked resources?
  • Remove them from the disallow section of robots.txt.
  • Test the updated robots.txt file in robots.txt tester tool.
  • Make sure pages are not using the noindex, nofollow tag.
  • Run the URLs through Fetch as Google tool to make sure that is rendered correctly.

Remove URLs

Remove URLs tool helps to temporarily hide something from Google searches, add the URL to remove URLs tool in Google search console.

Use the remove URLs tool.
  • Before submitting pages to search console to remove, follow these steps.
  • Add a noindex meta tag to each page.
  • Insert rel=canonical tag to each page.
  • Disallow pages in the robots.txt file.
  • Submit to remove URLs.

Crawl

Crawl errors report tell what pages are broken on the website. This report has two sections:

  • Site errors: It displays errors from the whole website.
  • URL errors: This shows errors from crawling pages on the desktop and mobile site.
  • Some standard crawl errors:
  • DNS(Domain Name System) error.
  • Server error
  • Soft 404 errors
  • 404 errors
Crawl Stats

Crawl stats section in Google search console look like a hot mess and this data measures your crawl rate. A faster crawl rate means that Google bot is indexing the site quickly and you should see better search performance.

Crawl Status comes with three reports:

i.              Pages crawled per day.

ii.             Kilobytes downloaded per day.

iii.            Time spent downloading a page.

URL Inspection Tool(new)/Fetch as Google(old)

URL inspection tool is similar to Fetch as Google in the old Google search console.

Robots.txt Tester

This helps you to let you know what is blocking Googlebot from URLs on the site.

Sitemaps

Sitemaps report in Google search console shares insights on what is happening on the website.

URL parameters

There exists nothing worse than discovering the website flooded with duplicate content.

Latest Trends In SEO 2017

The Search Engine Optimization is an arena where we would like to go higher than our competitors. We were struggling hard to find more ways to rank higher. One way to beat our opponent is to adjust our SEO strategies according to the latest trends. If you are looking for inspirations in SEO planning, feel free to read this article. I have collected various useful tips which are the latest trends in SEO 2017.

Latest Trends In SEO 2017

In the world of SEO’s, trends and features are not constant. Even the most expert SEO miss out some of the updates done by Google. Basically, there is no rest for SEOs who want shine in this field. In this article, I like to share some of the latest trends in SEO 2017.

The major players in the Search Engine Optimization section are the Accelerated Mobile Pages or AMP which is used to improve the mobile phone-based searches. The next one is the voice search which is a convenient way for most of the people. The next trend is the content who is always a hero!. The long, quality content is the princess of SEO Kingdom. Apart from that, the social media engagements are vital for the SEO boost. The structured data is another major development in the SEO. One of the latest trends include infographics which are another visual treat for the audience. Dig into the details here.

Accelerated Mobile Pages

AMP is the abbreviation of Accelerated Mobile Pages. It was introduced by google in-order to increase the loading speed of pages in the mobile. Its the lighter and simple version of our basic HTML. AMP comprises of: AMP HTML, AMP JS, and Google AMP Cache.

  • AMP HTML- Standard HTML with web components
  • AMP JS library- Manages resource loading.
  • Google AMP Cache- Serve and validate AMP Pages.

Voice Search

Voice Search has become one of the most important latest trends in SEO 2017. The latest study states that there a great increase in the number of voice search users. The main reason for this is the Speech recognition error rate has decreased from 25 percent to 8 percent. Voice searches are more like spoken word, make sure you understand the searchers intent and market to that.

HTTPS

Hypertext Transport Protocol Security (HTTPS) sites protect a site through authentication and encryption. When it’s installed on a web server, an SSL certificate activates the padlock and the https protocol and allows secure connections from a web server to a browser. From January 2017, the world’s most popular web browser (Google Chrome) labeled non-HTTPs sites that transmit passwords and/or ask for credit card details as “Not Secure.”

Long Form And Quality Content

Presently Long form and quality contents play an important role in SEO. Content with more than 2000 words is considered as Long form content. It’s a sweet spot to increase your ranking organically. It provides the value needed to convert website visitors into leads, sales, and revenue.

Social Media

A major part of branding relies on social media. Consumers will continue to resort to social media for reviews and updates, thus building traffic. It’s the major source of quality referral traffic.

Structured Data

Structured Data is often collectively referred to as Schema or Microdata. Through structured data, search engines are able to understand a website easier and therefore gives them better SERP rankings. Schema.org is structured data developed by Google, Yahoo, Microsoft, and Yandex.

InfoGraphics

An Infographics (information graphic) is a representation of information in a graphic format designed to make the data easily understandable at a glance. It’s a powerful online marketing tool which helps to increase the traffic to your website.