Introduction

Magento 2 was released in 2017 and quickly impressed eCommerce professionals with its new features and improvements

The development community were also very positive about the changes; commenting that it is now more modular and extensible – the platform is more powerful and easier to modify.

SEO considerations were an important part of the development of Magento 2 and it promised to be faster and more flexible than what we have seen before.

About The Guide

Magento2-Guide

PushON has spent some time looking at Magento 2 to evaluate it from a pure SEO perspective.

Our initial evaluation upon its release showed that;

  • Many issues from Magento 1.9.x have been carried over and many of the same steps to fix them will still be necessary.
  • Substantial improvements in existing functionalities (and new features) are available “out of the box” for the first time.

As Magento Solution Partners, PushON has produced the following guide to help site owners, developers and SEOs get the most out of Magento 2.X.

You can read our Magento 2 guide by clicking on a link to one of the chapters below.

Chapter 1: Magento 2: What’s New For SEO?

The SEO Guide

In this chapter we discuss:

We have documented some of the differences between Magento 1.x and Magento 2 for those looking to make the switch. If you have already got a Magento 2 store setup, we recommend that you proceed straight to chapter one.

Improvements from Magento 1.x

Magento 2’s main SEO benefits included better performance and scalability – but there are 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 provide Google with contextual information and to help it 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 is available out-of-the-box in Magento 2.x using microdata, rather than JSON+LD.

See a test using our Magento 2 demo site.

There is no proof that implementing product / offer schema directly 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.x core. Magento’s more modular design means that developers should be 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 – you will not 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 it 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 more modern features available in UA.

However, site owners purchasing Magento 2 Commerce Edition will find support for many of the more advanced features via Google Tag Manager. Read chapter 4 for a walkthrough!

Social Sharing Tags

Social Sharing tags are now integrated into the Magento core. Product pages will now pull in OpenGraph tags for Facebook and Pinterest. These specify the text, title and the image that gets pulled into Facebook when a URL from your site is shared on a social media website.

magento2-social-sharing

Twitter cards are not currently supported, but this is unnecessary because Twitter falls back to OpenGraph tags when its own tags are not 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 is improved. As well as traditional minify to reduce file sizes, since Magento 2, admins have 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 even if merging them causes issues; this was a known issue for many with previous Magento releases.

The default Luma theme also now 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 as this was only previously available through 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.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.

This is much better from a crawling and content perspective too.

Much better Varnish Support

If you use Magento 2 Commerce Edition, there have been some real improvements here.

magento2-full-page-cache

Setting up Varnish with Magento can be a time-consuming process with significant amounts of configuration that is necessary to prevent Varnish Cache from causing issues. For example, a shopping basket that does not update or a customer login page that shows a previous browser’s user details.

Magento 2 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, but most people opted to use jQuery instead. Prototype was less popular amongst developers – it would occasionally break a number of other JS libraries and frameworks.

Magento 2 removed Prototype and replaced it with jQuery. In practical terms, your webpages now load about 0.1s faster – a small but noteworthy improvement.

Another new addition is requireJS, a Javascript file and module loader. While 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 websites – although some browsers such as Chrome lose their ability to pre-load scripts – there is a blog on the pros and cons at Hootsuite.

Google Content Experiments

It is quite well hidden but a new Google Optimizer module in Magento 2 allows for Google Content Experiments.

These are relatively basic split testing tools for creating variations and it is very capable of finding winning variations through the 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 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 is not an SEO improvement per se, but it is 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 unique 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 sites, but a more accessible web is something that should be encouraged. Figures from AbilityNet say that eCommerce is losing out £50 billion a year in the UK spending power due to poor accessibility.

What could be improved?

Magento 2 is still 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 critically from its initial release, 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 was not 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 same user logs into your website.
  • Enhanced eCommerce tracking (ec.js) – a module that gives far more user 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, upon the first release, without purchasing Commerce 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 “making the site slow and passing 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

While 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 is no different. Issues from merging and minifying scripts / stylesheets can be worked through with some development and ensuring certain scripts are only executed when the page is fully loaded. But it does not have to be this way. It is possible to work through these issues in the admin backend of another platform – WordPress.

PushON has a certain love in our heart for the WordPress CMS. It is a low memory solution for non-eCommerce and has one of most customisable minify capabilities at front-end level we have 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 the 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 it allows minification issues to be fixed without further development.

This functionality would be great to have in future releases of Magento.

Bulk On-Page Updates

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

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

  • Categories can not 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 a future release.

Keep reading our Magento 2 guide to discover more about Magento 2’s SEO Setup and Settings.