Magento 2.0: What’s new for SEO?

This Chapter – Magento 2.0: What’s New For SEO?

The Guide

Improvements from Magento 1.x

Magento 2.0’s main SEO benefits will be better performance and scalability – but there’s some new features for SEOs to get stuck into.

Product/Offer Schema

Schema (also known as semantic mark-up) is tags or code added to a webpage to help Google understand that text is (for example) an address, a review, or product.

magento2-product-schema

This could be implemented in Magento 1.9.x via third party extensions such as Creare’s SEO plugin – or with a small amount of development – but it’s available out of the box in Magento 2.0.x using microdata, rather than JSON+LD.

See a test using our Magento 2 demo site.

There’s no proof that implementing product/offer schema improves rankings but its main benefit is that Google can use the information in a search snippet.

schema-example-tescos

Product, Review, AggregateRating, and Offer Schema are implemented in Magento 2.0.x core. Magento’s more modular design means that developers should be able able to retain this functionality when extending the core for their own templates.

Google AdWords / Google Tag Manager

Thankfully, Google AdWords Conversion tracking is now integrated into Magento 2.0 – you won’t have to get your developers to add the tag to the order confirmation page.

For Google Analytics, Universal Analytics is the only option offered in Community Edition. Magento 1.9.1 was the first release to switch over from Classic Google Analytics (ga.js) to Universal Analytics (analytics.js) so may be new for those who are behind on their update cycle. The implementation offers standard tracking including ecommerce but does not yet support some of the newer features available in UA.

However site owners purchasing Magento 2.0 Enterprise Edition will find support for many of the more advanced features via Google Tag Manager. Read chapter 4 for a walk through!

Social Sharing Tags

These are now integrated into Magento core! Product pages now pull in OpenGraph tags for Facebook and Pinterest. These specify the text that appears, the title and the image that gets pulled into Facebook when a URL from your site is shared.

magento2-social-sharing

Twitter’s standard (“Twitter cards”) aren’t currently supported but this is currently unnecessary because Twitter falls back to OpenGraph tags when its own tags aren’t available.

The implementation currently supports the og:type of product which allows pricing information to be pulled through too.

pinterest-pin-example

Improved Minify!

The minify functionality in Magento 2.0 is improved.

As well as traditional minify, admins get the ability to;

  • Merge JS and CSS files without minifying
  • Minify JS and CSS files whilst keeping them all separate.

This flexibility is an improvement because it allows users to minify their JS/CSS files if merging them causes issues.

It’s worth mentioning that the default Luma theme minifies properly – it creates 3 CSS files.

  • One for mobile,
  • One that extends the mobile CSS for desktop/tablet
  • And a printable version.

This is good practice and efficient front-end development.

One new feature is the ability to minify HTML too – previously this needed a third party extension.

Fewer Junk Pages

One of the worst features from an SEO perspective in Magento 1.x was how it handled reviews, product comparisons and wishlists.

On a typical Magento site, this could create an extra 10,000 pages of thin content – for example, a separate review page for each product and a separate page for each individual review.

Magento 2.0.x seems to deal with this in a much better way – reviews are part of the product page and add to wishlist / product compare are now AJAX based non-crawlable URLs.

Much better Varnish Support

If you’re lucky enough to use Magento 2.0 EE, there’s been some real improvements here.

magento2-full-page-cache

Setting up Varnish and Magento can be a time consuming process with significant amounts of configuration necessary to prevent caching from causing issues – for example, a shopping basket that apparently doesn’t update or a customer login page that shows a previous browsers user details.

Magento 2.0 EE helps this by creating VCL configuration files for Varnish 3/4.

Prototype JS is gone, Hello jQuery and requireJS

Prototype is a jQuery alternative that very few people actually used.

It was best known as the library that Magento forced you to load that no-one used because they used jQuery instead. Prototype was less popular amongst developers – it would occasionally break a number of other JS libraries and frameworks. Magento 2.0 removes Prototype and replaces it with jQuery. In practical terms, your webpages will now load about 0.1s faster – a small but noteworthy improvement.

Another new addition is requireJS, a Javascript file and module loader.

Whilst its primary purpose is safer loading of Javascript files (by managing their dependencies), sites using it can claim to render faster because it loads the JS files it pulls in asynchronously (without blocking the page rendering).

render-time-example

Source: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

Correctly implemented, use of requireJS will be great for most Magento sites – although some browsers such as Chrome lose their ability to pre-load scripts – there’s a blog on the pros and cons at Hootsuite.

Google Content Experiments

It’s quite well hidden but a new Google Optimizer module in Magento 2.0 allows for Google Content Experiments.

Google Content Experiments are a relatively basic split testing tool – at least for creating variations – it’s very capable at finding winning variations through use of learning algorithms such as multi-armed bandit.

google-content-experiments

Variations created within Google Analytics primarily focus on redirecting a percentage of users to an alternate page (“variation”) on the site – but more advanced users can use Javascript to manipulate the page content without redirects instead.

Magento 2.0 gives site owners a place to paste the experiment code without there being any need for a third party solution such as Hotjar or Optimizely.

ARIA Attributes

This isn’t a SEO improvement but it’s good to see – the default Luma theme uses ARIA to make it more accessible for screen readers and similar devices, particularly those used by people who are blind or partially sighted. ARIA or Accessible Rich Internet Applications;

…Defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.

ARIA is a set of special accessibility attributes which can be added to any markup, but is especially suited to HTML. The role attribute defines what the general type of object is (such as an article, alert, or slider). Additional ARIA attributes provide other useful properties, such as a description for a form or the current value of a progress bar.

It will be up to individual developers to extend this for their own sites but a more accessible web is definitely something that should be encouraged. Figures from AbilityNet say that that ecommerce is losing out £50 billion a year in the UK spending power due to poor accessibility.

What could be improved?

Magento 2.x is still very early on in its lifecycle and some of the extensions that helped improve functionality in version 1 have not yet been recreated. Looking at Magento 2.0 critically, we discuss some of the features that we hope to see soon.

Advanced Google Analytics Integration

The Universal Analytics version of Google Analytics was launched in October 2012 but it wasn’t integrated into Magento Community until version 1.9.1 in November 2014. Features introduced in Universal Analytics include;

  • Sessions stitching – the ability to join different sessions together (even across different browsers and devices) in the event that the user logs into your website.
  • Enhanced ecommerce tracking (ec.js) – a module that gives far more usage behaviour tracking, for example, add to basket tracking, shopping cart funnels and product list performance.
  • Custom dimensions and custom metrics – a replacement for the older custom variables. These allow “information” to be stored against a pageview, browsing session or user which can then be used to segment the data in Google Analytics. For example, passing “lifetime value” to a custom metric (at “user scope”) would allow you to segment users who have spent over (for example) £500
  • Demographic and interest reports – allows segmentation by inferred age and gender. Also enables you to build remarketing audiences for the Google Display Network.

Unfortunately, none of this is present in Magento 2.0 without purchasing Enterprise Edition and using Google Tag Manager. Site owners in Magento 1.x were forced to rely on an unpopular official extension or third party extensions which were criticised as “mak[ing] the site slow and pass[ing the] wrong data”.

Undoubtedly, extensions will become available to add support for this for Community in Magento 2.x. Read chapter 4 for a walkthrough of one of the options.

Minify Customisation

Whilst there have been some real improvements in this, developers and SEOs will know that any automated method of minifying and merging files can cause issues on the webpages they affect. Scripts combining or executing in the wrong order can cause errors.

Magento 2.0 is no different. Issues from merging and minifying scripts/styleesheets can be worked through with some development and ensuring certain scripts are only executed when the page is fully loaded. But it doesn’t have to be this way. It’s possible to work through these issues in the admin backend of another platform. WordPress!

PushON have a certain love in our heart for the WordPress CMS. It’s a low memory solution for non-ecommerce and has one of most customisable minify capabilities at front-end level we’ve ever seen via the W3 Total Cache plugin.

w3totalcache-minify

In W3 Total Cache, Admin users can choose;

  • The order files are combined,
  • Where they’re combined (head, after body, top of body),
  • Their embed type (non-blocking using defer, blocking),
  • Whether or not they’re combined at all,

And the rules are per page type, e.g. a category page can have different rules to a blog post. This gives far more flexibility and allows minify issues to be fixed without further development.

This functionality would be great to have in future releases.

Bulk On-Page Updates

Optimising page headings, titles and Meta descriptions is the bread and butter of on-page optimisation. Whilst you’ve always been able to edit these easily on a per page basis, Magento has made bulk updates more painful than necessary.

Magento 1.x and Magento 2.0.x offer a product export/product import method of doing mass product updates – but this has several issues.

  • Categories can’t be updated using this method. The Magento API must be used to mass update categories.
  • Exporting large product sets is hit and miss – it relies on the fiddly CSV format (especially with multiline fields), and can time out quite easily.
  • Product updates are set using SKU, URL Key or Product ID – not the actual URL. Product updates must also be targeted at a specific storefront.
  • Magento 1.x/2.x doesn’t store a revision history for the products without a third party extension (M1 only) – relying on export dumps or backups for similar functionality.

This functionality would also be great to have in future releases.

Copyright 2015 PushON | All Rights Reserved | PushON Ltd