Tag: AMP

3 SEO quick wins to implement right now

Michiel Heijmans

We all want to increase our sales, lift engagement, and get the best possible result out of our website. That’s why it only seems right to give you a three-step rocket of SEO quick wins to kick-start your website. 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

It doesn’t matter whether you want to improve your mobile website or your desktop website, speed is something you need 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. Both PageSpeed Insights and Pingdom will tell you that. Another factor that plays a role in speed optimization is text compression with GZIP. But in my opinion, that should be enabled by default. Let’s have a look at the other three:

Image file size optimization

Optimizing your file size can increase the speed of your site and is also an important part of image SEO. So let’s start there. Here are a few steps you can take to optimize your file size:

  • Optimize the image file size in Photoshop (or any other image editing program you use). Usually, just exporting the image in a lower quality will do the trick. I usually check whether reducing the quality to around 80% of the original still gives me a crisp image.
  • Download an application like ImageOptim or use a web app such as Squoosh and further optimize your file size before uploading.
  • Last but not least, make sure that the image dimensions of your image fit the image ‘space’ that you reserved for it on the page. Don’t display a 1200×400 pixel photo as a 300×100 pixel image by adding CSS or whatever.

Browser caching

Browser caching is the way your browser stores files of a website, so it doesn’t have to load them from the internet every time you visit another page of a site. An example on our own site is the logo you see at the top of the site. Storing these files obviously saves time.

There are many ways to go about this, but if you have a WordPress site the easiest way is probably using a plugin. Most speed optimization plugins support browser caching and set them to the 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 and awesome.

Optimize script handling

You can load a gazillion JavaScript (JS) and Cascading Style Sheets (CSS) files to enhance your website, but in the end, all these extra files just slow your website down. Please ask yourself the following questions to optimize your script handling:

  1. 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.
  2. Is there a way to reduce the file size of your scripts/styles? We call this process ‘minifying’ and explain this further in an Ask Yoast video. 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. To give an example, Magento has the Fooman Speedster (free and paid) for that.
  3. 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, HTTP/2 changed some of these optimization practices. Make sure to test this!

Read more: Improving site speed: Tools and suggestions »

#2 Mobile optimization

It’s quite tempting to copy our ultimate guide to mobile SEO here, but let’s focus on the quick wins. An important reason to focus on mobile SEO these days is Google’s mobile-first index. Since July 2019, Google determines rankings based on the quality of the mobile version of a site instead of your desktop version. So, let’s get that mobile version up and running, right?

Task-based design

Have a look at your mobile website. Imagine you are a fresh, new user of your website. What would that user want to do here and is your site ready for that? Focus on a task-based design. If someone visits a mobile website, they might need opening hours or an address. Just a while ago, 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 complete these basic tasks without any problem. Ask yourself what the four, perhaps five, main goals of a visitor on your site are and make sure these can be achieved on your mobile website.

Performance-based design

Are you loading any huge images on your site? Do people have to scroll for ages to read what you have to offer them? On a mobile website, we want to find what we need and get out as fast as possible – unless it’s, for instance, a news website. Loading time is a factor on mobile sites, 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, of course, there are exceptions to that rule. If I visit a photographer’s website, I can assume that I’m in for longer loading times. When visiting this type of website, I want crisp images and that’s the price I pay. So be sure to optimize to an acceptable level for your target audience.

Write great content

This goes for the mobile and desktop version of your site: they need great content. A quick win for mobile content is to add a to-the-point first paragraph on every page. If you tell your visitor what’s on your page, they can decide for themselves if they want to scroll down or not. This is easily done and definitely benefits the experience of your visitor.

And of course, the content that comes after this first paragraph needs to be awesome as well. To tackle that, you’ll need to do keyword research, set up a great site structure and decide on cornerstone content. But you can imagine that this is a slightly lengthier process, and we’re talking quick wins here :)

#3 Serve your content in the right format

There are so many ways to serve your content to Google, Facebook and your visitors. Your task is 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.

Better social sharing: Open Graph

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. To give you an example, for our homepage it reads (among other things):

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="SEO for everyone &bull; 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" />
<meta property="article:publisher" content="https://www.facebook.com/yoast" />
<meta property="article:author" content="https://www.facebook.com/jdevalk" />
<meta property="article:modified_time" content="2020-02-18T13:24:20+00:00" />
<meta property="og:image" content="https://yoast.com/app/uploads/2018/03/SEO_for_everyone_FI.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="628" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@jdevalk" />
<meta name="twitter:site" content="@yoast" />

There’s a page/site title and a summary plus link, which tells Facebook, Pinterest or Twitter all it needs to know to create a great post on your visitor’s timeline. The og:image creates 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).

Keep reading: Social media optimization with OpenGraph in Yoast SEO »

Quick reads on other platforms: AMP

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 them just your article in basic design. If you want to check a certain product, AMP will strip much of the heavy loading stuff from the store to deliver something more focused. Is this 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 and site. It might even increase sales because it’s so focused. I suggest reading up on AMP and getting your site ready — if you want. Again: plugins will help you out with this!

Tell Google what your page is about: Schema.org

I will end this list of quick SEO wins with something we’ve been telling you about for quite some time: add Schema.org to your website. Structured data, like Open Graph and Schema.org, create a convenient summary of your website for every other site or search engine 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.

Yoast SEO does a lot of work behind the scenes and automatically adds a broad spectrum of Schema.org structured data. In addition, the free structured data content blocks in Yoast SEO help you build FAQ pages and how-to articles with valid Schema.org structured data. 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 appear in the knowledge graph as well.

Serving your content in the right format is essential in delivering it to other ‘places’ on the website. Be sure to use it. And if you’re not sure what structured data you should use to optimize your pages, be sure to enroll in our structured data training which is part of our Technical SEO training.

Bonus tip! Don’t forget internal linking

I know I said 3 quick wins, but I have another bonus tip that I want to share with you. Internal linking makes your site easier to understand for users and search engines. That’s why the right internal linking strategy can boost your SEO. And an easy and quick way to improve your internal link structure is by using our internal linking suggestion tool, which gives you suggestions for related internal links on every page or post!

Recap: the 3 SEO quick wins

There’s a lot you can do that benefits SEO. And this article gets you started with a few quick wins to increase your chances of ranking high in Google. Let’s summarize what we discussed.

First of all, you can improve the speed of your site by optimizing your (image) file sizes, being smart about browser caching and optimizing script handling. Secondly, it’s important to focus on your mobile site by having a task-based and performance-based design and writing great content for your mobile version. Thirdly, make sure to serve your content in the right format by using Open Graph, making good use of AMP and adding Schema.org to your site. Lastly, a bonus tip is to get started with internal linking. That’s it, you’re all set. So let’s get optimizing, good luck!

Read on: Must-reads for higher rankings »

The post 3 SEO quick wins to implement right now appeared first on Yoast.

Metadata and SEO part 2: link rel metadata

Michiel Heijmans

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.

If you want to read up on rel=canonical, please read this article: Rel=canonical: the ultimate guide.

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.

If you’d like to read up about AMP, be sure to check our AMP archive.

dns-prefetch for faster loading

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.

Become a technical SEO expert with our Technical SEO 1 training! »

Technical SEO 1 training$ 199 - Buy now » Info

What about rel=author?

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!

Read more: ‘Metadata and SEO part 1: the head section’ »

Ask Yoast: AMP for small business owners

Joost de Valk

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?”

Check out the video or read the answer below!

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

AMP for small business owners

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!

Good luck!”

Ask Yoast

In the series Ask Yoast we answer SEO questions from followers! Need help with SEO? Let us help you out! Send your question to ask@yoast.com.

Read more: ‘Setting up WordPress for AMP: Accelerated Mobile Pages’ »

Interview with Maile Ohye (Google)

Edwin Toonen

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.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

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

Maile will also speak at the upcoming WordCamp US conference, where she will give an update on search and mobile trends.

Read more: ‘Setting up WordPress for AMP: Accelerated Mobile Pages’ »

AMP for eCommerce

Michiel Heijmans

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?

My two cents? If you are adding AMP pages to your eCommerce site, be sure to limit the use of JavaScript. Forget about the fancy newsletter subscription box that floats into a browser screen and skip the JS zoom option. People will probably pinch and squeeze for zooming anyway. Try to reduce JavaScript without compromising your security, obviously. But you will be able to add a testimonial directly on your site instead of loading it from third party sources. And yes, getting rid of excessive baggage is actually also something you should do for your desktop site.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

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.

<amp-carousel>

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)

<amp-accordion>

You could use amp-accordion for sections with ‘more detailed requirements or extended descriptions’, much like the tabs you probably use on your product page.

<amp-sidebar>

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.

<amp-list>

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!

Read more: ‘Setting up WordPress for AMP’ »

WordPress & AMP: part II

Joost de Valk

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.

WordPress AMP design settings

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:

google-search-console-amp-errors

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.

Analytics integration

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.

Conclusion

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!

Setting up WordPress for AMP: Accelerated Mobile Pages

Joost de Valk

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

The trade-off is that, by sacrificing some of that flexibility (your custom JavaScript, ads, etc.), not only do you speed up your site, but you may become eligible for new, rich results in search engines.

Which plugin(s) to use?

The official AMP plugin does an incredible job of enabling AMP on your site. It can even automatically convert your template and content.

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. The plugin adds a standard meta tag in the head of your normal pages that makes it possible for Google and others to recognize these pages exist.

You can also configure the plugin to use ‘native mode’, where it simply replaces your existing theme code and content with amp-compatible version. You may need to make some tweaks in the plugin’s configuration options to get this working correctly on your site, however.

How does this work with Yoast SEO?

We automatically integrate with the official AMP plugin to output correct metadata, structured markup, and other SEO elements. Don’t worry – we take care of everything!

Read more: How site speed influences SEO »

The post Setting up WordPress for AMP: Accelerated Mobile Pages appeared first on Yoast.

Google Search Console: Search Appearance

Thijs de Valk

There are a lot of ways to check how your website’s doing these days. The most common one people use is probably Google Analytics. Google Analytics is definitely a great tool for monitoring your site. However, since the ‘not provided’ development, it’s become pretty hard to monitor your SEO efforts. And unfortunately, most tools that can monitor your SEO efforts come at a costly price. Today I’ll be highlighting one of the free tools; Google Search Console.

This is actually the first post in a series on Google Search Console. We’ll be going over every major menu item in Google Search Console, starting with Search Appearance.

What is Google Search Console?

Before going into Google Search Console, you might be wondering, what is it in the first place? Google themselves explain it the following way in their meta description of Google Search Console:

“Google Search Console provides you with detailed reports about your pages’ visibility on Google.”

This is definitely true, but it’s leaving out quite a lot of other things. Google Search Console looks at a lot more than ‘just’ your pages’ visibility on Google. It looks at everything that’s causing that visibility, such as backlinks, crawling (errors), robots.txt, sitemaps, etc. And on top of that, Google Search Console actually still shows you quite some search query data.

You can find your own Google Search Console by logging into your Google account here. And if you haven’t set up your GSC yet, you can follow the steps here.

On the 20th of May 2015, Google announced that the name Google Webmaster Tools did not cover the user base of the tool anymore. Only a part of the user base could indeed be called ‘webmaster’. For that reason, Google renamed the tool Google Search Console (GSC)

Other posts in this series

Search Appearance

search_console_-_dashboard_-_https___yoast_com_-1

The Search Appearance menu item gives you a lot of insight into just that: what your website appears like in the search results. You can actually click the ‘i’ for more information on the search appearance:

Google Webmaster Tools - Sitelinks

You can select every part of a search result to get more information on that specific part and how to influence how it looks.

Optimize your site to the max: get all our SEO plugins and extensions at once! Get our Yoast Complete SEO bundle and save money! »

Yoast Complete SEO packBuy now » Info

Structured Data

Under Structured Data you’ll find a number of all the pages that have some kind of structured data attached to them, such as schema.org or RDFa. Structured data means you give certain elements on a page a sort of label, such as ‘Product‘.  This will make it clear to the big search engines (Google, Bing, Yahoo) that there’s a product on this page. On top of that, you can add things such as ratings or prices of your product that might also show up in the search results. We recommend to add schema.org data using JSON-LD.

Google Search Console: Search Appearance - structured data

If any pages on your site don’t have the structured data set up right, Google Search Console will give you a red line named “Items with Errors”. GSC automatically sorts by the number of “Items with Errors”, so the most important faults will be on top. To view what specific pages have these errors, just click one of the lines in the table. This will take you to a list of all the specific pages that have errors with the Data Type you selected. You’ll probably be able to create a nice list of to-do’s for your site, just based on these URLs.

Rich Cards

Sometimes Google tries to answer the user’s question right in the search result pages. It does that by presenting the user with so-called Rich Card. That could be a recipe, restaurant listing with a rating, or even a product result that has just that bit of extra information on availability or pricing. These are just examples.

If your website is set up the right way, it’s using structured data to set up these rich cards. In Google Search Console, under Search Appearance, you’ll find any and all errors Google has found in the data you provided for this. That is if Google has detected any rich card structured data on your site. These errors are divided into three levels:

  1. The top level lists a sum of errors or recommendations. These are conveniently grouped by card type and you can click a row for more details.
  2. A second level in the report gives you a list of all the critical (errors in required fields) and non-critical errors for a selected card type. Again, you will find more details after clicking a row.
    There are three kinds of statuses here: Invalid (critical, fix now), Enhanceable (nice to fix) and Fully-Enhanced (job well done).
  3. The third level allows you to view all pages with cards of a selected type affected by the selected rule. After clicking a row, you’ll find a suggested fix.

Data Highlighter

The Data Highlighter actually makes fixing the issues you’ve found in the Structured Data section a lot easier. For instance, choose one of the URLs that had a faulty Structured Data setup and tell GSC what kind of information you want to highlight:

Google Webmaster Tools Data Highlighter

This will bring you to a live view of that page and you’ll be able to select any element on the page. By selecting an element you’ll be given a choice of what you want to highlight that specific element for. For example, for an Article, you’ll be given these markups to add to the corresponding element on the page:

Data Highlighter Tagger

This makes adding Structured Data, for Google at least, really as easy as a few clicks.

HTML Improvements

This page is really straight forward. This basically checks all your website’s meta descriptions, title tags, and content that wasn’t indexable. If Google Search Console finds meta descriptions that are too long, too short or duplicate, it will show a number of pages higher than 0, and the link will become clickable:

The same goes for missing, duplicate, too long, too short or non-informative title tags and for any content that GSC thought was non-indexable. Clicking the linked word will take you to a list of meta descriptions or page titles that are faulty. You’ll be able to find on which pages exactly this is happening. Some more to-do’s to add to that list! If you find writing decent meta descriptions hard, read this post to learn how!

Accelerated Mobile Pages

Accelerated Mobile Pages, or AMP, is a way to make your pages easier accessible on mobile devices. Note that for AMP to work properly, you need to create matching, valid AMP pages with the right schema.org markup. And you need to make sure these AMP pages are properly linked. We have written a number of articles on the subject:

Go read these. While it might seem like you need to set up a second website, there are obviously tools that will help you keep up with the possibilities and future development of AMP.

Search Console: accelerated mobile pages

In Google Search Console you will find a debug report for your AMP pages. Google set up this report as the first layer of information about your AMP pages: there is more to come in this report. The current report provides a quick overview of your AMP errors, which you can analyze per specific error type and URL. It will help you find the most common AMP issues on your website, so you can fix these.

Optimize your search appearance!

So you see there’s a lot you can do about what your search results in Google look like and a lot to optimize to make it more clear for Google. Optimizing your search appearance might only have a minor impact on your ranking, but it will definitely increase the click-through rate from Google. And that’s worth a little effort!

What do you think? Do you have experience using Google Search Console like this? Or do you have some additional tips? Let us know in the comments!

Read on: ‘Google Search Console: crawl ’ »