Custom Page Titles

When it comes to better ranking on search engine results, page title tags that include relevant key words can play a valuable part. This new feature lets you set a custom value on the <title> html tags of your shop's pages by replacing the default value of page_title in your shop's liquid templates. And because page_title already exists in all default Shopify themes, there's likely no need to make any changes to your templates to take advantage of it!

You can now set this custom value for the majority of your shop's content: products, collections, pages, blogs, and articles.

To set a title tag, go to the edit page of any product, collection, page, blog or article and click on "Modify title tag and url" to expand the form.

Now you'll be able able to set your title tag to a custom value.

From now on, this title tag value should replace the default title in the page_title liquid tag. To change it back, simply set the field to blank once again.

Here's an example of how to make use of the page_title within your template's theme.liquid <head>:

{% if template == 'index' %}
<title>{{ shop.name }}</title>
{% else %}
<title>{{ page_title }} | {{ shop.name }}</title>
{% endif %}

Product Image ALT Tags

We've also introduced another great new feature to the product admin tab that allows you to specify custom alt tags for each image.  alt tags help make your site's images more accessible to customers and can also help improve search engine results when using the image search feature on some search engines.


To use this feature, click on the edit alt text (or simply ALT with multiple images) link on the right hand side and enter your alt description.  Click the save button and you're done. The alt tag will now be available to all of your store's product image templates.  

If you're using a custom theme or an older template, you'll need to edit your template to include this new feature. Here's an example on how to use the new Liquid product image object in the product.liquid template: 

 {% for image in product.images %}
  <div class="thumbnail">
    <a href="{{ image.src | product_img_url: 'original' }}" title="{{ image.alt | escape }}">
      <img src="{{ image.src | product_img_url: 'thumb' }}" alt="{{ image.alt | escape }}" />
    </a>
  </div>
 {% endfor %}

Check out the wiki for the full description of the Image object.

For best results, try to be as concise and descriptive as possible and only describe the image itself. For more information on how to properly use alt tags, check out this blog post from the Google Webmaster Central Blog.