You have your e-commerce business all set up and running. Your inventory is ready to be sold, and your site, powered by Shopify, is ready to take orders.

But the work doesn't stop there. You also want to catch potential organic traffic from Google Search. After all, who doesn't want long-term free traffic flowing into your online shop?

There are tweaks and optimizations you can make on your Shopify theme in order to improve your search rankings on Google. We've compiled them for you in this one article.

It can get a bit technical, but not to worry. Just take things one step at a time and you'll manage.

Here's a summary of what we'll cover here:

  • Write meta titles and meta descriptions
  • Add structured data
  • Improve page loading speed
  • Integrate with Google Search Console

Writing Meta Titles and Meta Descriptions for Each Product

The first thing you want to look at is meta data. To explain what it is, think of your website this way.

There's content for human beings to look at, and there's content for robots to look at.

Google search programs crawl websites across the web to include them in search results. For simplicity's sake, let's call these programs robots.

When you set your meta data on your site, it makes it easier for Google's robots to read. This makes the search results for your website look much better.

How to edit the meta title and description of your Shopify site

First, click on one your products to edit it.

Scroll all the way to the bottom, you will see a section for Search Engine listing preview.

Fill in all three fields

Title

  • The name of your product, including the brand name and variant
  • Try not to exceed 70 characters

Description

  • Here, you can describe your product a little.
  • Make room for a call-to-action (For example: buy before the promo period is over, or enjoy free shipping)
  • Try not to exceed 180 characters. I know it says that the maximum is 320 characters, but the smaller the chunk of text, the more friendly it is for users.

URL and handle

  • The title, but with hyphens and lowercase letters. This should be automatically generated for you
  • If there are any underscores, change them to hyphens.

Hit save, then rinse and repeat for all your other products.

Give your your products the right names

Now that we're on the topic, let's talk about naming.

Just be sure to include the generic words that describe what your product is. For example, if you're a selling the ASUS Zenbook, be sure to include the word 'laptop' in the title and/or description.

This is to capture the kinds of words that people are likely to use when searching on Google, and to help Google understand your page better.

Next, we'll have to get a little more technical.

Adding Structured Data to your Shopify Site

Remember when we talked about meta data? Things that Google looks at? This is an extension of that concept.

Structured data feeds Google more information than just the title and description. In the case of e-commerce sites, structured data also covers:

  • Price
  • Currency
  • Availability
  • Brand
  • Barcode
  • SKU
  • Reviews

To add structured data to your site, we're going to have to make adjustments to your theme code.

Before you make any changes to your theme code, back up the files by downloading the theme.

Let's assume you use one of Shopify's available themes, like Venture. Thankfully, Venture already covers most of the structured data you need. Now let's fill in the blanks.

Go to online store, Themes, and Edit Code under your active theme Go to sections > product.template.liquid Then, look for this line:

<meta itemprop="name" content="{{ product.title }}">

If your product has a barcode, add this below that line:

<meta itemprop="gtin" content="{{ product.variants.first.barcode }}">

Replace 'gtin' with ISBN or the correct type of barcode you are using

Then add this below that:

<meta itemprop="brand" content="{{ product.vendor }}">

Ensure that you have input the right brand under vendor in your Shopify dashboard.

Then search for the line that contains itemprop="priceCurrency".

Below that, add this line:

<meta itemprop="priceValidUntil" content="2030-01-01">

This only applies if you have a discounted price. The way the robots think is: if you have a price reduction offer, that offer has an expiry date. Even if your discount lasts forever, they are still expecting a date of sorts for this field.

So if your discount doesn't expire, just add a date far into the future. In the case above, it's 2030. Don't worry, your visitors won't see this date.

Next, look for this snippet:

data-sku="{{ variant.sku }}"

Then add this before, not below, that snippet:

itemprop="sku" content="{{ variant.sku }}"

So that it amounts to this:

itemprop="sku" content="{{ variant.sku }}" data-sku="{{ variant.sku }}"

If your product does not have a sku, I suggest just creating one of your own. Think of it as your internal product ID system.

Next, for the reviews. This is very important, as a star rating will show up on Google search results and it will make your listing very attractive.

  1. You'll need to install a free app on Shopify.
  2. Go to Apps > Shopify App Store
  3. Search for Product Reviews, and then install it

Follow the instructions to add the line on your theme code, to show where you want the review button to be shown for your visitors.

Once installed, the structured data for reviews will automatically be included.

Note: If your product does not have a review, there will be no review data for Google to see

So we recommend you asking your happy customers politely to leave a review.

Checking your structured data

Once you have done all of this, check if it's all displaying correctly.

To do this, go to Google Structured Data Testing Tool.

Input your product page URL (Not your homepage) and click run test.

If your site is perfect, there should be 0 warnings.

If there are warnings, click on the item to see which structured data is missing.

That's it! You're all set for meta data.

Improving the speed of loading your page

Your customers are human beings. As the world moves faster, they inherently get more impatient.

Websites that take too long to load will leading to users dropping out.

Speed not only matters to humans, but for Google as well. The faster the page loads, the more favourable it is for Google Search. And in the era of mobile browsing, speed is held to a higher standard.

Test your current page loading speed by visiting Google PageSpeed Insights.

Analyze both your homepage and one of your product pages. See your score? If it's less than 50, you have room for improvement. Ignore the desktop score, it will always be higher than your mobile score.

Speeding up your site with lazyloading

If you have lots of images in your product descriptions, then you should implement lazyloading.

What lazyloading means: Ensuring that your visitors do not have to wait until all your images load before showing them something.

By 'postponing' the appearance of your images, the initial load of your page will be smaller, therefore speeding up the loading time.

Here's how to do it. It's going to get technical, so bear with me.

Go to your theme files again. Themes > Select theme > Edit theme code

Go to Assets > lazysizes.min.js

They already have a lazyloading script here, but it doesn't work out of the box in my experience. So we're going to have to manually replace it.

  • Visit the site of the original author of lazysizes.
  • In the list of files and folders, click on lazysizes.min.js.
  • Copy the code (it's one short line and one long line).

Paste it into lazysizes.min.js on Shopify, replacing the previous code in it.

We're not done yet. Next we have to tag all your photos.

Go to the edit page of your product. Click on the <> button to see the code.

Any appearance of photos will look like this:

<img src="picture.jpg" alt="My Picture" />

You need to edit them to make it look like this:

<img class="lazyload" data-src="picture.jpg" alt="My Picture" />

Rinse and repeat for all photos for all products.

Yes, it is a rather manual and technical process to do this for each and every one of your photos, but anything worth doing is never easy.

Note: you can completely skip the lazyloading step if you have no photos in your product descriptions.

Shrinking your images

This applies only if your images are too large. If they are more than say 900 pixels in width, I suggest you resize them down to say 600px. You can do so with Micrsoft Paint or any good online image editing tool.

Deferring your stylesheet

When you performed the pagespeed test earlier, you may have seen a notice labeled "eliminate render-blocking resources".

This is why you need to defer your stylesheet. The concept is similar to lazyloading. Load page now, then load the stylesheet later.

What is a stylesheet: it is code, written in a separate file, that dictates how your website looks. Colours, fonts, margins, effects, etc.

Edit code again, and go to theme.liquid.

Search for this line:

{{ 'theme.scss.css' | asset_url | stylesheet_tag }}

And replace it with this:

<link rel="preload" href="https://cdn.shopify.com/s/files/0/0000/0000/000/t/0/assets/theme.scss.css?0000" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript>{{ 'theme.scss.css' | asset_url | stylesheet_tag }}</noscript>

How do you get that URL as href? Do this:

  • Before changing that line, view the source of your website
  • Visit view-source:http://myonlineshop.com
  • Search for a line that looks like this:

<link rel="stylesheet" href="https://link-to-your-css-file">

Copy that URL and place it in the href part of your new code in theme.liquid.

Hit save and you're done. Be sure to visit your product page (and refreshing) to see that everything loads fine.

You can't get a perfect PageSpeed Insights Score on Shopify Sites

I'd like to be proven wrong, but this what I can see for now.

There are other mini roadblocks that slowdown the loading of your website. If you host your site on a server you pay for, you will have access to make adjustments at that level.

But for Shopify, there are things you can't do.

  • Access the .htaccess file
  • Tamper with files required for the shopping functions to work.

Therefore, there's only so much you can do to speed up your site. So let's be content with a Google PageSpeed Insights Score of about 60-70.

Analyze your site again, and if your score is better than before, the improvement will count.

Integrating with Google Search Console

Now that your site is all prepped, it's time to tell Google about it.

First, let me explain what a sitemap is.

A sitemap is a list of all the pages of your website, usually for robots to read.

By submitting a sitemap to Google, it saves them the time of having to discover and crawl through your site by other means. This is how to do it.

  • Go to https://search.google.com/search-console
  • Add a property with a URL prefix, enter your website.
  • Be sure that your enter the correct URL. Note the http/https and www/without wwww.
  • Next, verify ownership with an HTML tag.
  • Copy the code provided, paste it at theme.liquid, just before the </head> tag or after the <head> tag.
  • Click verify.

Now that you've created a property, time to add your sitemap.

  • Go to sitemaps on the left sidebar.
  • Add your sitemap: myonlinestore.com/sitemap.xml
  • Wait for a few days for Google to process it.

You're done!

Incidentally, Google Search Console is also the place where you can monitor your search rankings and organic traffic. Just go to Performance on the left sidebar.

Hope this is helpful to you all. Happy selling.

Write Handed Communications

Mailing address:
A-G-40, Jalan PJU 1/43
Aman Suria Damansara
Petaling Jaya
47301 Selangor Malaysia

Connect with us