We had the pleasure of welcoming Max Prin, Head of Technical SEO at Merkle, to our DeepCrawl webinar this month. Joining our host, DeepCrawl’s Head of Professional Services, Ashley Berman-Hale, Max shared some great tips for achieving an optimal user experience by combining PWA and AMP.
We’d like to say a big thank you to Max for his great presentation and for taking the time to answer our audience’s questions, as well as to Ashley for hosting (and for dressing appropriately for the Halloween season!)
Hi.
I’m a professional adult dressing up to host a @deepcrawl
webinar on Not-Halloween.But I <3 AMP/PWAs and @maxxeight is knockin’ the presentation out of the park. Join us!
If you can’t make it – show me some of your costumes (bonus for childhood costumes!#seohalloween pic.twitter.com/aaqtwTPBvP
— Ashley (@BermanHale) October 30, 2019
You can watch the full recording here:
Plus, revisit the slides Max presented here:
It is also important to ensure search engine crawlers are receiving a positive experience when visiting our websites too, because a great user experience that is not being understood by bots won’t pay off in the search results.
A great user experience needs to be understood by search engines
Successful organic search performance is based on a great user experience that search engines are also able to understand.
A positive user experience means your website is:
- Relevant
- Mobile-friendly
- Fast
- Secure
- Popular
Search engines look at these factors too, just in slightly different terms:
- Content
- Web design
- Site speed
- SSL/HTTPS
- Links
Focusing on mobile-friendly and fast websites
Max recommends watching the recent video posted by John Mueller and Martin Splitt, where they answered some great questions around speed and SEO.
In this video, Martin explained that there is no perfect speed metric, and when Google tries to assess a website’s speed, they are ultimately just trying to understand whether it is really fast or terribly slow.
In addition to this, when looking at the mobile speed update, the only real impact will be on websites which have a slow load time and are therefore providing a negative user experience. Max reinforced the fact that while it is important for websites to be fast, this is not for SEO purposes, but rather for users and conversions.
Reviewing the impact of speed on your website
While the industry metrics around page speed and bounce rates are interesting, it’s more important to understand the impact that speed is having on your own website.
The best way to do this is to create a custom report in Google Analytics that will be able to provide you with an idea of the correlation between your conversion rate and the average page load time of the site. This will allow you to look deeper than the industry metrics and identify if there is a real impact for your own site.
Mobile-friendly vs mobile-optimised
Mobile-friendly, in the eyes of Google, is looking at several different elements of a page, such as the viewport and font size. However, having these things correctly set doesn’t automatically mean that the site is also mobile-optimised. So, while tools such as the mobile-friendly test may display a site as mobile-friendly, this doesn’t necessarily mean it is optimised for mobile devices.
There are a number of things which can be done in order to ensure a website is mobile-optimised as well as mobile-friendly. Max touched on a couple of underused solutions, including hidden content and picture elements.
Hidden Content
Hidden content includes tabs, accordions and click-to-expand elements. In the past, with the desktop index, Google would have viewed and indexed this content, but it wouldn’t be given the same value as the other pieces of content which are immediately available. However, with the mobile-first index, Google is able to understand that these tactics are being used in order to create a better user experience and the content is therefore deemed as having the same value.
There is a caveat to this, however, as the content needs to be pre-loaded in either the DOM or the source code in order for it to be discovered by search engine bots. This is because Googlebot does not act like a human and will not click things such as tabs and accordions to be able to access new content.
Picture Element and srcsets
Picture elements in srcsets allow you to specify different sized versions of the same image for different devices. This is a great way to optimise a site for mobile as it enables responsive images to be served to users depending on their device, in order to keep page load time to a minimum. While a lot of CMS platforms are beginning to utilise this, it is often an underused element that is a great way to ensure your website is optimised for mobile.
Web apps vs native apps
While web apps have been around for many years, they do not have the same capabilities of native apps which have access to the additional hardware that is found on smartphones.
However, native apps don’t have the reach that web apps have and they are inherently more expensive to build and run.
Progressive Web Apps
Progressive Web Apps (PWAs) can be used to solve these problems, in order to maintain the reach of the web application but increase the capabilities available. There are many benefits of PWAs including:
- Mobile-friendliness
- Speed
- Security
They are also highly engaging, as they offer push notifications and the ability to add an icon to the home screen.
However, by default PWAs are typically not SEO-friendly, as search engine bots often struggle to crawl and render them. Despite the now evergreen Googlebot, as well as Bing’s recent updates, they still have difficulties with understanding lazy-loading and user-triggered content, which can cause issues with crawlability and accessibility.
Enter Accelerated Mobile Pages
This is where Accelerated Mobile Pages (AMP) can help, as AMP enables pages to be pre-loaded in the search results.
When AMP was first released, there were some concerns about the URL that was being displayed for users. This was because it was a Google URL rather than the website’s URL. However, this issue can now be resolved with the ‘signed exchange’, which can be implemented for free through Cloudflare.
The use of JavaScript on AMP was also limited when it was first introduced, however, custom JavaScript can now be easily added with the tag. While this still has some size restrictions per script used, it is now possible to add some custom JavaScript to your AMP pages.
AMP for e-commerce
The AMP framework is particularly useful for e-commerce sites as it allows attractive pages to be created which contain all the features needed to provide a positive user experience, one that is just as good as a normal website experience. However, it is not currently possible to create the full conversion journey in AMP, as users will still need to be directed to the main website to complete the checkout flow.
Achieving the best of both worlds with PWAMP
Max explained how we can utilise the benefits of AMP for initial user acquisition and speed from search results, combined with the interactivity and engagement of PWAs in order to provide the best experience for both users and search engine bots.
While both frameworks have their advantages and disadvantages, using AMP and PWA together will alleviate the limitations each face. With AMP boasting optimised discovery and instant delivery but with limited features, PWAs offer advanced features that are highly dynamic.
There are three official methods for combining AMP and PWA, these are:
- AMP pages with PWA features
- AMP as an entry point into your PWA
- AMP as a data source for your PWA
Using AMP as an entry point
Using AMP as an entry point is the best method for what we are trying to achieve; gaining speed from the search results.
Service workers, which are small JavaScript files that sit client-side in the browser, are used in this approach in order to power PWAs. They will dictate the caching mechanism as well as inform servers where to get the information from. Service workers can be easily installed from the AMP pages using the module ‘amp-install-serviceworker’.
Max explained that the typical user experience would be as follows;
- Users land on the AMP page after clicking a search result in Google
- The service worker on the AMP page will download the framework for the app
- The service worker will then intercept the user’s click and send the user to the PWA version of the same URL, which will load extremely fast
Maintaining consistent URLs
The idea behind combining AMP and PWA is to keep both pages on the same URL, in order to provide a consistent experience for users. There are two strategies for ensuring your AMP and PWA pages use the same URL:
- Having canonical AMP pages on top of your normal website
- Having your canonical site as AMP
AMP images are not indexable
One thing to note is that in order for AMP to work, it requires specific tags to be used instead of the typical tags we would use on our main websites. Therefore, for the AMP framework to be able to deliver lazy-load images, they require the ‘amp-img tag’ in place of the usual ‘img’ tag.
Usually this would not be an issue as the images being referenced on the AMP pages are also accessible on the main website that Google will crawl. However, for the purpose of having one consistent URL, Google would only be crawling the AMP pages. In this case, they would only see the AMP image tag.
As AMP pages are so well structured and simple to parse, there is no real need for Google to spend resources and time rendering them, so they will typically not be rendered. This means that Google will never actually see the lazy-load image tag with the source attribute. In this case, we need to use the ‘noscript’ tag in order to submit and specify the normal image tag.
Benefits for SEO
To wrap up, Max explained the SEO benefits of using AMP and PWA together in a cohesive strategy:
- Search engine bots will only crawl and index the AMP version of the site as it will still provide the same content and user experience that search engines can assess and reward you for.
- This means there is no waste of crawling resources over multiple URLs for the same content.
- There is clear signalling, so you don’t need to worry about canonical and alternate tags.
- Pages are fast and pre-loaded in the search results pages.
- The pages will be mobile-friendly and mobile-optimised.
Max also shared a demo website with us, where you can view a demonstration of AMP and PWA working together. You can access that here.
Hear more from Max in our upcoming Q&A post
The audience asked so many brilliant questions during the webinar that Max wasn’t able to answer them all at the time. Don’t worry if your question wasn’t answered though, we have sent all the remaining questions to Max who will answer them all for a Q&A post which will be coming soon to the DeepCrawl blog.
Get started with DeepCrawl
If you’re interested in learning about how DeepCrawl can help you gain an understanding into how search engines are viewing your mobile website, as well as discover key page speed insights, then why not sign up for a DeepCrawl account to get started.
Don’t miss our next webinar with Michelle Robbins
Our next webinar will be taking place on Wednesday 13th November at 5pm GMT/12PM EST with Michelle Robbins, Vice President of Product Innovation at Aimclear. She will be exploring how clickstream analysis can be utilised to optimise sites and apps in order to more efficiently guide your customers from the point of entry all the way to conversion.
