A few years ago, Google announced the AMP (Accelerated Mobile Pages) project, and it’s becoming increasingly important for all kinds of websites. AMP is a technology to make webpages faster on mobile devices, improving loading times by stripping some of the design.
Initially, AMP was mainly relevant for static content, like blogposts or news articles, that didn’t need interaction from the user. But these days, it’s also useful for dynamic types of pages that site owners of (small) businesses might want to use. Implementing AMP on your site can be a bit daunting if you’re new to technical SEO. But if you manage to get it right, you may even end up preferring the clean, focused look of your AMP pages.
That was definitely the case for William Anderson, who emailed us on the subject:
I’m thinking of redirecting all my responsive pages to my AMP pages because I prefer their look. The AMP pages click through rate is astounding but I’m wondering what the SEO implications will be.
Watch the video or read the transcript further down the page for my answer!
Redirecting responsive pages to AMP pages
“Well, to be honest, what do you call a responsive page? If you have separate mobile pages that you can redirect to your AMP pages: perfectly fine, go for it. If you have a responsive version of your website, then doing that is actually technically very hard and not something I’d recommend.
Google is pushing the idea of what they call canonical AMP, so the idea that AMP is the only version of your page. If that fits your business, by all means go for it. Because I think it’s a very good idea for your click-through rate and a lot of other things in terms of rankings. I hope that helps. Good luck.”
In the series Ask Yoast, we answer SEO questions from our readers. Have an SEO-related question? Perhaps we can help you out! Send an email to email@example.com, and your question may be featured in one of our weekly Ask Yoast vlogs.
Note: please check our blog and knowledge base first, the answer to your question may already be out there! For urgent questions, for example about the Yoast SEO plugin not working properly, we’d like to refer you to our support page.
We’re all ready for a new year of increasing sales, lifting engagement and giving our website the best effort possible. It only seems right to give you a three-step rocket of SEO quick wins, to kick-start your website for 2018. In this post, I will show you three things you can do right now to improve your website for your visitors, and for Google in the process. Let’s dive right in with number one.
#1 Optimize speed
No matter if you want to improve your mobile website or your desktop website, speed is something you want to monitor and improve all the time. These are fast times, and speed is definitely what you want to optimize for.
In a simple breakdown of speed optimization, we have images, browser caching, and script optimization. Google PageSpeed will tell you that, Pingdom will tell you that. Gzip Compression is the fourth one, but that should be enabled by default in my book. More on compression here. Let’s look at the other three.
Optimizing your file size is an important part of image SEO, so let’s start there. There are a few ways to approach this:
Optimize the image file size in Photoshop (or any other image edit program you use). Usually, just exporting the image in a lower quality will already do the trick. I usually check whether reducing the quality to around 80% of the original still gives me a crisp image.
Last but not least, make sure that the image dimensions of the image you use, fit the image ‘space’ that you reserved for it on the webpage. Don’t display a 1200×400 pixels photo as a 300×100 pixels image by adding CSS or whatever.
Browser caching is the way your browser stores files of a website, for instance the logo you see at the top of our website, so it doesn’t have to load them from the internet every time you visit another page of our website. This obviously saves time. There are many ways to go about this, but the easiest is probably (if you are using a WordPress site) using a plugin. Most speed optimization plugins support this browser caching and most set them right time for you. Among some of my favorite speed plugins are WP SuperCache, which is free, and WP Rocket, which is a premium plugin. For more on browser caching, visit this page.
Optimize script handling
Are you sure you need that enhancement? JS and CSS usually target design and user experience. In some cases, you just don’t need that enhancement. Like JS and CSS loaded for sliders, for instance. There are alternatives to sliders that work better and don’t require extra files.
Is there a way to reduce the file size of these scripts / styles? We call this process ‘minifying’. We have an Ask Yoast about it. Google has some great pointers on how to approach this. Simple scripts and handy websites can help you minify your files, for instance by stripping comments. Most platforms have plugins or extensions that help with this. For instance, Magento has the Fooman Speedster (free and paid) for that.
Is it possible to combine a number of these scripts into one file? That way, there only has to be one call to the server to retrieve all the scripts. Again, there are plugins for that, but if you have small pieces of JS, you might as well combine these yourself. Of course, the advent of HTTP/2 changes some of these optimization practices. Test this!
#2 Mobile optimization
It’s tempting to copy our ultimate guide to mobile SEO here, but let’s focus on the quick wins. You need to focus on mobile SEO these days, to be ready for Google’s mobile-first index. Google will start to determine rankings based on the quality of the mobile version of a site, only taking your desktop site into account after that. So, let’s get that mobile version up and running, right?
Open your mobile website. Imagine you are a fresh, new user of your website. What would that person want to do here and is your site ready for that? Focus on a task-based design. If we are on a mobile website, we might need opening hours or an address. Just the other day, I purchased tickets for the Nederlands Openluchtmuseum on my mobile phone. Saved a buck and didn’t have to get in line for tickets. I did this, walking from my car to the entrance. One needs to be able to do these basic tasks without any problem. Ask yourself what the four, perhaps five main goals of a visitor on your website are and make sure these can be done on your mobile website.
Are you loading any huge images on your site? Do people have to scroll for ages to read the good stuff you offer them? On a mobile website, we want to get in and get out as fast as possible – unless it’s, for instance, a news website. Loading time is a factor on a mobile site, especially with mobile connections usually being slower than most desktop connections. Make sure your design and content don’t depend on large images too much. And yes, there are exceptions to that rule. If I visit a photographer’s website, I know beforehand that I am in for longer loading times. I want crisp images and that is the price I pay. Optimize to an acceptable level for your target audience.
Write great content
This goes for mobile and desktop versions of your site: they need great content. A quick win for mobile content is to add a to-the-point first paragraph. If you tell your visitor what’s on your page, they can decide for themselves if they want to scroll down or not. It helps user experience to do this.
There are so many ways to serve your content to Google, Facebook and your visitors. Your task for 2018 is definitely to investigate which formats you should invest in. Some take a bit more time to implement; others can be added to your website by the push of a button, like with a plugin. Let’s go over a few important ones.
Forget about Twitter Cards for now, as Twitter has a fallback to Open Graph. So add Open Graph to your website if you haven’t done this already. It’s like a social summary of your website. For our homepage, it reads among other things:
<meta property="og:title" content="SEO for everyone • Yoast" />
<meta property="og:description" content="Yoast helps you with your website optimization, whether it be through our widely used SEO software or our online SEO courses: we're here to help." />
<meta property="og:url" content="https://yoast.com/" />
<meta property="og:site_name" content="Yoast" />
There’s a page / site title and summary plus link, which tells Facebook, Pinterest or Twitter all they need to know to create a great post on your visitor’s timeline. You can add an og:image to create a richer experience. Be sure to add this. Again, use a plugin like Yoast SEO for TYPO3 to automate the process (and add these Twitter Cards along with Open Graph in no time).
Quick reads on other platforms: AMP
Facebook links to your AMP article if possible. Ever found yourself reading an article in Google? Might be AMP as well. Accelerated Mobile Pages or AMP, aim to strip your website to the bare necessities to deliver your reader the best mobile experience they can get. If they want to read your article, AMP will give ’em just your article in a basic design. If you want to check a certain product, AMP will strip the store to deliver a focused design. A bad thing? I think not. Every way you can help your visitor get a better experience, increases the chance of them coming back to your content / site. It might increase sales, because it’s so focused. Go read up on AMP and get your site ready. Again: plugins.
Tell Google what your page is about: Schema.org
I will end this list of quick SEO wins with something we have been telling you about quite often in the past year: add schema.org to your website. Structured data, like Open Graph and schema, create a convenient summary of your website for every other site that wants to use your content. Schema.org data is one of the main types of structured data. JSON-LD gives us a convenient way of adding it to our website. Our Local SEO plugin adds the right schema.org so that Google can add your company to Google Maps as well, for instance. Add schema.org data to your website and see your company in the knowledge graph as well.
Serving your content in the right format is essential to deliver it to other ‘places’ on the website. Be sure to use it. And if you are not sure what structured data you should use to optimize your pages, be sure to enroll in our Structured Data Training. How’s that for a New Year’s resolution? Good luck optimizing!
2018 is coming soon and people are starting to ask: what’s new? What should we do to keep up with changes in search and specifically in SEO in 2018? In this post, I’ll sum up the biggest changes in our world, and what you should be working on.
The search landscape is changing
Over the last decade(s), our computers have become faster and faster, and our phones have been catching up. The iPhone X is faster than many computers people have at home. The power of the small machines we have in our hands is slowly being utilized by apps and search engines alike.
Building on that growing power of the devices in our hands, the reliability of voice recognition has been steadily increasing. It’s now at the point where, in languages like English, voice commands can be reliably used to instruct our devices to do something. One of those things we can do, is search.
Voice search changes everything
We cannot tell you how many people search with voice. Most people, for now, will not use voice search as their primary mode of searching. But: the search engines are optimizing for voice search results and have been doing that for a while now. Because the search engines are optimizing for voice results, all of search has already changed because of voice search.
The featured snippets that SEOs have been striving to get are a prime example of how voice search has changed SEO. Optimizing for these snippets requires old school SEO tactics combined with something new. You see, a featured snippet is meant to be read out loud. That’s the context in which Google’s Gary Illyes told people to read their copy out loud, early this year.
Listen to this result from Google Home for the search [what is a meta description?]:
If you’ve listened to the above answer, you’ll know why readability is so important. Answers this long become very hard to listen to if they’re not well written. And even then, we still have to solve things like figure out how we can get Google to pronounce SEO as S-E-O instead of “Seeoo”.
Besides voice search and Google’s focus on that, more is changing in and for Google. Specifically: a few new technologies and a profound new way of looking at the web.
Mobile first indexing
We’ve written about mobile first indexing before, but the basic idea is simple: Google is changing how it looks at your site. From ‘judging’ your site as though it’s a desktop site, it’ll switch to judging your site as a mobile site. Every bit of content that can’t be reached on your mobile site, will not count for your ranking.
It’s still unclear when this will roll out and how fast this will roll out. Google says they’re already testing it, but they also say that sites that aren’t ready for it shouldn’t be hurt, for now. Regardless of that, your site should be working well and fast on mobile, so if it isn’t, that’s going to be your priority for SEO in 2018.
Google is focusing a lot of time and effort on AMP. So much that one of the projects we’ve got planned at Yoast for 2018 is to see if we can recreate our single post pages entirely in AMP, completely leaving the non-AMP version. Yes, that’s how important we think AMP will become in the long run. I don’t expect normal sites have to do anything that drastic in 2018, but do make sure you keep up to date with the latest news on AMP.
Alongside AMP, Google is pushing more and more structured data ‘profiles’. By asking webmasters and SEOs to mark up their content in structured data, according to schema.org data structures, Google is trying to understand the web better.
Yoast SEO does a good chunk of work for websites adding structured data to sites already. For most small business websites and blogs, what it does should be enough.
But if you have a site that has a lot of content that fits one of the schema.org data types (think of recipes, reviews, products, etc.), I’d highly suggest following our Structured Data course. After that you’ll know how to set up a properly structured data strategy for your site.
Content is still king
While all of the technical changes above are important to SEO in 2018, and you should definitely keep an eye on them, content is still the thing that’s going to make you rank. Our recent ultimate guide to content SEO should get you started on the right path there. Good luck optimizing your site in 2018!
It has been a while since we did a post specifically on AMP. Not sure whether that is because AMP is becoming a common part of the publisher’s toolkit we all use, or that there’s just not that much AMP news to share. I took the liberty to collect some of the recent developments for you. In this post, I will share some of the things that caught my eye and might be interesting for you!
We often discuss publishers when talking about AMP, as it’s clear what the benefit of AMP is for those kinds of websites. Reading an article when waiting for the train or metro, in a plane (some have Wifi, these days), or for instance when waiting for your kids to finish their swimming lessons. Quick reads, on the go. Now there is a problem with that for those publishers:
Six publishing sources, requesting anonymity out of fear of angering Google, said their ads load slower than their content on AMP, and that is part of the reason why they make less money per pageview from AMP than they do from their own websites (Source: Digiday.com)
I truly understand how this is an issue for publishers. To provide news to the world, you have to make money somehow. That’s much like how we have to sell premium plugins to be able to provide our free plugins. The one needs the other. I think there’s a task here for advertisement agencies, affiliate programs and so. The issue here is tracking, right? I wanted to share this particular bit of AMP news, as it’s a different way of looking at AMP. We love the speed optimization, UX possibilities, but every upside has its downside.
Tracking AMP and non-AMP pages
Speaking of tracking, Google just announced a new service called AMP Client ID API, which allows you to track your customer’s journey over Google’s pages, such as the search pages. It was already possible to track your user’s journey over AMP/non-AMP pages on your own domain, but now your domain can ‘talk’ to Google as well, so you’ll have a full understanding of that journey. It’s done by a combination of that API and Google Analytics. This service will give you many new insights, for example, if your users have ever visited you via an AMP page displayed by Google or not.
Please note you have to opt-in to this solution, and you’ll need to change your code for that. Read all about it on Google’s Analytics blog.
Products now in AMP
To think that AMP is just for publishers is an illusion. eBay recently launched 8 million AMP pages (summer 2017), which shows AMP is truly ready for that. Read that post; it’s nice to see how a huge website like eBay went about that. Let’s be honest: that AMP page does load fast and it’s clean and crisp on your new iPhone. So it only makes sense, from a visitor point of view, that AMP is used in more online fields. There are more use cases where AMP actually pushed conversion as well. I’m sure we’ll see more of these stories in months to come.
With the development of AMP pages for products, and for instance AMP for recipes, we’ll only have to wait to see what’s next.
Instant instead of AMP?
Did you see this already? Google has been experimenting with a different label for AMP pages:
It’s a tweet from a few weeks ago, but I think it’s remarkable AMP news: the label says “instant.” It’s just the label, of course, but still. It reminded me immediately of Facebook’s Instant articles. It has been a while since I have seen such consistency between the two moguls. Both serve the same purpose, right? Easily loading web pages, freed from all the fuzz that occupies some websites. I think it makes sense to align these terms/labels, and I do have a preference for “instant” over “amp,” simply because the term makes more sense to “normal” people using Google.
It would be so much easier for publishers and website owners if AMP would just be a way of viewing websites on a mobile device. That’s not the case at the moment, with all the specific AMP tags, but Google recently acquired Relay Media, which has a tool to convert pages to the AMP format simply. You can never be sure, but this might indicate that Google intends to start automating the process for you. Just thinking out loud here. Having said that, as with a lot of things with Google, I think it will always be better to suggest things like meta tags, titles and this AMP ‘design’ to Google yourself. And keep a bit of control over that in the process. We’ll have to see how deep/fast they will integrate Relay Media’s technique into, well, everything mobile.
It makes all the sense in the world that Google is pushing HTTPS for AMP. With the rapidly growing number of AMP pages and Google’s (and our) wish to serve mainly HTTPS pages, I would perhaps have pushed HTTPS for even more than just a part of the AMP functionality, and even earlier. I include this subject in this AMP news update because to my knowledge it’s still not required, but strongly recommended.
That’s your AMP news for now
We’ve lined up some of the AMP news we felt worth sharing. If you have any additions, please do post these in the comments, as AMP is and will be a development we’re watching closely from both a UX, an SEO and a business point of view. Want to know more about AMP and future developments, keep a keen eye on the AMP roadmap :)
In the first post of our metadata series, I discussed the meta tags in the <head> of your site. But there’s more metadata in the <head> that can influence the SEO of your site. In this second post, we’ll dive into link rel metadata. You can use link rel metadata to instruct browsers and Google, for example to point them to the AMP version of a page or to prevent duplicate content issues. The link rel tags come in a lot of flavors. I’d like to address the most important ones here.
Use rel=canonical to prevent duplicate content
Every website should use rel=canonical to prevent duplicate content and point Google to the original source of that content. rel=canonical is one of those metadata elements that has an immediate influence on your site’s SEO. If done wrong, it might ruin it. An example: we have seen sites that had the canonical of all pages pointed to the homepage. That is basically telling Google that for all the content on your website, you just want the homepage to rank.
If done right, you could give props to another website for writing an article that you republished.
Add rel=amphtml to point search engines to your AMP pages
In order to link a page to its AMP variant, use the rel=amphtml. AMP is a variation of your desktop page, designed for faster loading and better user experience on a mobile device. It was introduced by Google, and to be honest, we like it. It seriously improves the mobile user experience.
So be sure to set up an AMP site and link the AMP pages in your head section. If you have a WordPress site, adding AMP pages is a piece of cake. You can simply install the AMP plugin by Automattic and you’ll have AMP pages and the rel=amphtml links right after that.
By telling the browser in advance about a number of locations where it can find certain files it needs to render a page, you simply make it easier and faster for the browser to load your page, or (elements from) a page you link to. If implemented right, DNS prefetching will make sure a browser knows the IP address of the site linked and is ready to show the requested page.
An example: <link rel="dns-prefetch" href="https://cdn.yoast.com/">
Please note that if the website you are prefetching has performance issues, the speed gains might be little, or none. This could even depend on the time of day. Monitor your prefetch URLs from time to time.
Rel=author has no effect whatsoever at the moment. It hasn’t had any effect we know of for quite a while actually, as Joost already mentioned this in October of 2015. You never know what use Google might come up with for it, but for now, we’re not pushing it in our plugin. It was used to point to the author of the post, giving the article more or less authority depending on how well-known an author was. At the time, this was reflected in the search results pages as well (it’s not anymore). No need to include it in your template anymore.
Other rel elements include your stylesheets (make sure Google can use these) and you can set icons for a variety of devices. SEO impact of these is rather low or simply not existing.
Is there more?
So we discussed meta tags and link rel metadata in the <head> . Is there even more metadata that affects SEO? Yes there is! In our next metadata post, I’ll explore social metadata, like OpenGraph and Twitter Cards. In addition to that, we’ll go intohreflang, an essential asset for site owners that serve more than one country or language with their website. Stand by for more!
You may have heard the term “AMP” very often lately. In 2015, Google pushed out this new concept called Accelerated Mobile Pages, in short AMP. AMP aims to make pages load instantly on mobile and, thereby, drastically improve the performance of the mobile web. You might wonder if you should get started with it too. Because, as a small business owner, you probably only have limited time and resources to spend on your website. So do you have to act right now, or can you wait until there is more information about the impact of AMP?
In this Ask Yoast, we’ll answer the following question:
“Lately I hear a lot about AMP. As a small business owner I’m not sure if I should act now or if I should wait until we know more about the impact. What do you advise?”
Read this transcript to learn more about what to do with AMP when you’re a small business owner:
“It depends a bit on what type of small business you are, but to be honest I’d implement it now, because it’s actually fairly simple to implement if you have a simple site on WordPress. It’s as simple as enabling the AMP plugin by the WordPress core team and our Yoast SEO AMP add-on, so that can do some small tweaks over what the page looks like and make sure to use your own logo etc. But then you have an AMP version of every page or post on our site. And that basically means that you have a very, very fast version of every post on your site, that Google will give preference to serving over other pages.
Because AMP is so important according to Google, I would slowly start to implement it and look at: “Okay, how much work is this really?” If it’s too technical for you and you don’t have the money, wait a bit, it’ll probably become easier in the coming months. But if you can do it now, I would. I hope it works for you!
In the series Ask Yoast we answer SEO questions from followers! Need help with SEO? Let us help you out! Send your question to firstname.lastname@example.org.
According to Maile Ohye of Google, “SEO is evolving into what Loren George McKechnie described as ‘search experience optimization’. It’s less about top ranking, and more about optimizing the searcher’s journey. It’s the intersection of content, UX, and as always, staying smart about search engines.” We had the chance to ask Maile a couple of questions, and she was able to give some interesting answers.
Maile is Developer Programs Tech Lead at Google. Since 2005, she has been working on making the search engine better. One of her works include the release of rel=”canonical”, plus rel=”prev” and rel=”next” for paginated content. Lately, she is focusing heavily on mobile.
Is Google’s AMP project really going to change the world? If so, can you give our dear readers some pointers on preparing for the upcoming shake up?
The AMP project can definitely make the web better for a lot of people on mobile phones, especially with sub-optimal reception. Ideally, if we could travel back in time, web browsing on mobile phones would have become popular with a format like AMP HTML already in place — instead we had a lot of code-heavy desktop pages that were designed for a broadband connection then ported to mobile. As for an upcoming shakeup, that’s not on our roadmap! AMP isn’t “Google AMP”, it’s an open source project with hundreds of developers who have contributed.
If you’re asking, how will AMP HTML impact Google Search? We still want relevant results for users — we just know users hate slow page loads and AMP is a pretty surefire way to fix that problem and maintain a fast page longer-term. As for pointers on AMP, Yoast, your plugin and blog posts are great. We also have Codelabs if your readers want more info.
AMP is focusing on delivering super fast mobile pages, but will probably grow into much more than that. How will the technology eventually compare with, for instance, progressive web apps?
AMP is great for content-based webpage experiences with basic interactions — it’s not for super-interactive webpages like GMail or Maps. That’s where it can coexist with progressive web apps (PWAs). If you have a more dynamic website, AMP can be great as the initial landing page — the first experience of a user to your site can be AMP fast. Once the user clicks another link on your site, the AMP page can bring them to a PWA experience. (Here’s a demo of a PWA for CNET).
Isn’t Google confusing the web development world by supporting and building these – and other – new technologies? It’s getting nearly impossible to tell if something will ‘stick’, don’t you think?
I agree the number of options can be daunting and “will it stick?” is on many SEOs’ and marketers’ minds. I think with AMP and PWAs, it’s not about Google nearly as much as it’s about what’s best for your customers. AMP and PWAs were spearheaded by Google efforts, but neither are Google-proprietary technologies and both help your visitors whether direct traffic or from Search.
Google is also pushing voice search, AI and making its search engine smarter by way of machine learning (RankBrain). Is it possible that Google will eventually circumvent sites by giving the answer to nearly all questions itself?
First of all, internally, we talk about Search as an ecosystem that includes websites/site owners, users, and a search engine. In other words, websites and site owners are a requirement in search success! When Google provides an answer, we care about attribution. You’ll notice featured snippets still link to a URL for more information. Additionally, there are many queries where a single answer isn’t the end-game. Sites still play a large role in fulfilling searchers’ needs. Sometimes users want to browse, compare, research, learn, go on a journey. Quick answers will never be enough for a broad range of use cases.
A couple of weeks ago, Gary Illyes created major upheaval on the web after announcing that Google will eventually use two separate indexes, one for mobile and one for desktop. This announcement shows once again that mobile is the driving force in this world. Could you tell our readers how this new ranking method will influence their sites and what they should do to not get lost in the shuffle?
With mobile-first indexing, we’ll still have a single index just like the past (we haven’t built two). We still have several Googlebots to help crawl web and apps and get content: Googlebot for desktop, Googlebot for smartphone, Googlebot for images, etc. The difference is that we want to think of the mobile version of a page (the page retrieved by Googlebot for smartphones) as the primary version of the content. This is because worldwide, more people search on mobile than desktop. Now our index can better reflect what mobile searchers will see.
We’re testing the mobile-first index to make sure that searchers still have a great experience. To “optimize” for a mobile-first index, make sure that what you serve to mobile users is the version of the content you’d want Google to index, not a paired down version, or a version that gets updated later than desktop, or version that redirects to the mobile homepage. In most cases, if your site uses RWD (responsive web design), you’ll be fine.
We’d like to thank Maile for taking the time to answer our questions! Follow Maile on: Twitter LinkedIn
In October 2015, Google announced a little thing called AMP. Initially, AMP started with a focus on news pages, but that focus rapidly changed towards every page of your website. That doesn’t just go for news websites. It seems like AMP is here to stay and every website needs to optimize for it. That also goes for eCommerce sites. This article discusses AMP for eCommerce sites.
AMP and site speed
Obviously, one of the key pillars of AMP is to provide fast websites for use on mobile devices. We can only applaud that speed optimization, as speed is an important SEO factor as well. The stripped AMP pages offer better speed and better speed makes for a better user experience.
In his AMP article on SEJ, Marc Purtell states that 40% of visitors leave a website if it doesn’t load within three seconds. Especially for image-heavy sites like eCommerce sites, that offers a challenge. Adding AMP for eCommerce sites adds an extra challenge but that challenge is probably not speed related. By stripping down your design, you are already making it faster.
Not yet a ranking factor
AMP might still not be confirmed as a ranking factor:
At least, that is what Google’s John Mueller says at 15:50 in this Google Hangout: “At the moment, it’s not a ranking signal”. Speed and mobile compatibility are surely taken into account, and I really can’t imagine AMP not to follow, especially for mobile searches. These are all things that provide a better user experience. Optimize every aspect of your website, right?
AMP for eCommerce
There is little known about AMP for eCommerce when you check the internet. There are a lot of articles written about it, but none of those is really specific about what you should do. The bottom line of every article is speed matters. We already know that. We have already mentioned that earlier in this article. Nothing new here. Second outtake: higher speed is better conversion. That’s not related to AMP, that’s related to websites. I haven’t found a case study yet (let me know if you did), but we know sites like eBay use AMP, and Shopify is working on making AMP for eCommerce available.
What should we do?
Furthermore, try your best to reduce clutter. Put some effort into creating a great call-to-action. Think about your navigational options, how to properly use search. That also contributes to better user experience and I think it matters even more on your mobile AMP website. And keep validating your AMP site.
All in all, there really isn’t that much difference from optimizing your desktop site!
AMP or responsive?
Can we just skip that responsive website altogether now that we have AMP for our eCommerce site? No, we can’t. AMP is for mobile devices, but using WIFI on my tablet, I really don’t might a few more fancy options on your online shop. Using a responsive website makes sure you provide the best experience per device.
What does Google say?
If you want Google’s take on this check out the Google ‘guideline’ for AMP for eCommerce sites. In short, it focuses on using the right amp-tags and design. Be sure to go over that article. It might give you some more insights on what Google’s looking for. In the article above, Google highlights some AMP-tags you could use to optimize your shop.
We have made a clear case against carousels. On a mobile phone, you’d better have a clear indication that there’s ‘more to swipe’. Otherwise, I’d replace that carousel with a static image. With Google even doing Twitter carousels in mobile search result pages, I do think this is something we need to test continually.
It does seem to make sense to use amp-carousel to add more than one product image to your product page. Again, please make it clear that visitors can swipe these images. By the way, why not use this to display some testimonials or product reviews? (Nice suggestion, Jip)
To make more areas of your website accessible via your product page, for instance, you could use the amp-sidebar element. I think that makes even more sense when using AMP for eCommerce sites than regular sites. On regular sites, you might be able to squeeze in an extra set of links after a section, where this will look silly in the middle of your product description.
The Google article suggests using AMP for related products as well. Generate that list of related products on the fly: “To do so, just use <amp-list> to fire a CORS request to a JSON endpoint which supplies the list of related products. These are populated into an amp-mustache template on the client.”
At this point, I see how the AMP tags mentioned above can be used for eCommerce, but let’s be honest: there is nothing shop-specific about these tags. What we are doing here, is optimize a page with the AMP tools that we have.
The state of AMP
What we really need to make our shop suitable for AMP, are things like AMP forms for our checkout process. The tools are defined, but I’d still like to see a good, real life showcase for these. At the moment, the fact is that AMP still doesn’t support these forms to a proper extent.
AMP seems to be here to stay and we as SEOs and web developers need to watch the development closely. Things might go fast as Google seems determined to make AMP work. We will do our best to keep you in the loop about new developments! In the meantime, we’ll also keep working on our AMP plugin Glue for Yoast SEO.
AMP for eCommerce?
Just make sure to put in your best effort, really. Optimize as always. Please remember that you don’t have to transform your entire website to AMP at once. Start with the pages that make the most sense. I’d say your homepage, product listings (category pages), product pages and checkout. That’s just four templates!
My previous post about AMP lead to a ton of questions and rightfully so. We’ve been testing, developing and working hard in general on understanding what needs to be done to get AMP working without too many errors. This post is an update on where we stand right now, introduces an updated Yoast SEO AMP Glue plugin with new features and gives some more background on the why and what of it all.
The need for multiple plugins
The base AMP functionality is provided by the WordPress AMP plugin. In my previous post I recommended Pagefrog to add styling and tracking to your AMP pages. While it is a nice plugin, it caused more issues for us than it solved. The plugin adds a preview on every post edit screen. This preview is unneeded and there is no way to disable it, and it literally caused browser crashes in our backend.
The issues we had with Pagefrog made me decide to put in some time and created a set of design settings in our Yoast SEO AMP Glue plugin. When you update to version 0.3 of that plugin, you can safely disable Pagefrog and configure the styling on the SEO → AMP design settings tab:
Extra styling options
The Yoast SEO AMP Glue plugin also lets you put in manual CSS and some extra tags in the head section. This allows us, for instance, to have our preferred weight of our Open Sans font available and make the styling fit our brand a bit more.
You can also enable AMP for custom post types on the post types tab. The only post type that doesn’t work yet is pages, as support for that is being added to the main AMP plugin.
Errors & testing AMP
We were getting quite a few errors in our Google Search Console AMP report for yoast.com. You can see our indexation and error graph here:
AMP debug mode
You can put any AMP URL into “debug mode” by adding #development=1 to the end of the AMP URL. If you then look in your browsers console – you might have to reload the page – you’ll see the AMP validation warnings. These are the exact same warnings that Google shows in Google Search Console. There are quite a few different types of errors and the Google search console report groups them for you.
I realize the error line in the graph above is not exactly convincing of our quality yet. The drop in errors we saw made clear that we were doing some things right. Now we have about a thousand posts on this blog, and almost a hundred on our development blog. So it’s clear that not all of our content is indexed as AMP yet, and not all of our AMP content is working nicely.
Missing featured images
The biggest source of our issues were Schema.org article errors. This was caused by one simple issue: a lot of our posts, especially the older ones, didn’t have a featured image. The WordPress AMP plugin then simply outputs schema.org JSON+LD tags without that image, causing those errors. The fix is simple: we now have a “default image” field in the design tab of our Yoast SEO AMP Glue plugins settings. It’s used when a post has no featured image. This solved half of our errors.
Testing Schema.org errors
To test whether you will be getting Schema.org errors, run your AMP URLs through the Google Structured Data Testing Tool. The output from that tool tells you which data is missing.
Missing site logo
The JSON+LD output also requires a site logo. While this is not an error we ourselves had, many reported this issue. The AMP plugin uses the logo set as your site icon in the Customizer, and omits it if you don’t have one set. We now let you upload a logo on the design tab of the Yoast SEO AMP Glue plugin too, if you want to use a different one.
Retrofitting AMP onto existing content
Part of what we’re doing with the AMP WordPress plugin and the Yoast SEO AMP glue plugin is “fixing” content that exists in your database to work with AMP. The posts on your site are stored as HTML in your database. The HTML of those posts does not necessarily to conform to what AMP HTML requires. For this purpose, the AMP plugin has a set of so called “sanitizers”. These are filters, run over your content, that remove tags and attributes on tags that aren’t allowed. They even remove some attributes when their values aren’t allowed.
We’ve added an extra sanitizer class in our own plugin to remove some more invalid attributes. Once we’re certain that these work, we’ll actually contribute these changes “upstream” to the AMP plugin. These changes have fixed the remainder of the issues we had.
The only thing we lacked after Pagefrog was removed is tracking. Pagefrog took care of Google Analytics tracking for us. Luckily, adding tracking to AMP pages isn’t hard, so we coded a simple connection to our Google Analytics by Yoast plugin. If you have that enabled and configured, the plugin will automatically grab the account code from it and enable tracking for your AMP pages. You can, however, also choose to use a custom tracking code. If you do this, the plugin no longer integrates with Google Analytics by Yoast.
Facebook Instant Articles
Another thing Pagefrog takes care of is Facebook Instant Articles. There’s now a plugin from Automattic for that purpose, which we’re working on integrating Yoast SEO with. So you won’t need Pagefrog for Facebook Instant Articles either.
With all these changes, getting AMP to work on a WordPress site running Yoast SEO has become slightly easier and lots less error prone. We’ve updated our Setting up WordPress for AMP post with these changes. Good luck and do let us know of errors in the comments!
Google has been pushing a new concept called Accelerated Mobile Pages, in short AMP. This post explains what AMP is and aims to do, who should implement and why, how to get your WordPress site ready for AMP and how to make sure Yoast SEO integrates nicely with it.
What are Accelerated Mobile Pages? What is AMP?
The Accelerated Mobile Pages project aims to make pages load instantly on mobile. The web is slow for lots and lots of people, in fact, the majority of the people using the internet do so over a mobile phone, often on a 2G or sometimes 3G connection. To make pages load instantly, AMP restricts what you can do in HTML pages. Fancy design is stripped out in favor of speed. AMP is very much a function over form project.
AMP pages look like a very stripped down version of normal web pages, but do contain all the important content. Not all ads will work on AMP, not all analytics will work with AMP. All the “fluff” of your pages is stripped in AMP, including the read more links you might have built into your theme etc.
When you enable this plugin, all the post URLs on your site will have a /amp/ version. So you can go to any post, add /amp/ to the end of the URL and you’ll see the AMP version. It uses the site’s logo that you can set in the WordPress Theme Customizer, but other than that doesn’t add any styling. If you’re going for the bare minimum, install and activate this plugin and you’re done. The plugin has no settings, whatsoever.
Here at Yoast, we found that slightly too bare bones to our liking. We wanted to change the styling of our AMP pages somewhat and want to make sure there is Google Analytics tracking on those pages too. Luckily, there’s a second plugin which builds on top of the AMP plugin, that handles all that, it’s called PageFrog:
This plugin allows you to change the styling of the AMP pages, for instance by choosing the color of the top bar, changing the logo and a few more simple tricks like that. The plugin also handles Facebook Instant Articles, a topic we will be writing about more soon.
The plugin adds a preview to the post editor which we found to be slightly too intrusive and most of all: unnecessary. I’m not going to preview each post anyway, so we decided to disable that. We had to code a bit for that but I hope they add an option to disable the preview soon.
How does this work with Yoast SEO?
The AMP plugin by Automattic uses a default set of metadata, which is sometimes, if you’re using Yoast SEO, not the most optimal metadata. That’s why we’ve built a small plugin that “glues” Yoast SEO and AMP together nicely. It’s aptly called Glue for Yoast SEO and AMP:
Why isn’t this in Yoast SEO itself?
Of course we’ve thought about just adding this to Yoast SEO for WordPress itself. The truth is: we will. Probably in about 5-6 months from now, this will be part of Yoast SEO. We didn’t do that now because we know that our Yoast SEO release cycles have gotten slightly longer by now because we want to make sure every release is as good as can be. To be able to quickly iterate on this particular set of features, we’ve made it into a small plugin which we can update by itself. We fully expect both our own best practices as well as Google’s rules for AMP to change over the next 3-4 months and will adapt as much as we can.