Tag Archives: on-page SEO

Image Processing Automation with Adobe Photoshop

Image processing automation with Adobe Photoshop

Adding content is one of the most challenging activities in an E-commerce web site. As a part of the content, images are playing a very important role. “A picture is worth a thousand words”. Yes, by using the best images to show your products, you can improve greatly the conversion. Add as many as you can, but keep in mind that it will affect your page loading speed.

I am going to show you bellow how can you make your life a bit easier in terms of image processing. Usually, your brand manufactures will provide you hi-resolution product images (landscape or portrait), which need to be modified / cut according to your web design requirements.

Premise: For my example I will assume the following:

- Images are delivered in 300 ppi (points per pixel) in CMYK colour mode, saved as TIFF file format;
- The size of the images is larger than what we need with an aspect ration close to 4:3 (most common SD size).

What result should we obtain

We need to use Adobe Photoshop to modify our images for a 800×600 pixel in 72 ppi resolution and save them in a JPG format.

To work

We will use Actions and Automate Batch techniques to make this process repetitive and very fast to process. You can see the Actions Panel by accessing the Menu > Window > Actions or by pressing the ALT + F9 short-cut (PC or Mac). The Automate Batch option is found on Menu > File > Automate > Batch.

To start an automation process we need to determine first what are the necessary steps to be followed when processing a single picture. These process will be applied to all our images. And we can do that by analyzing our image requirements. We need to:
- resize / crop the image at 800x600x72 ppi resolution
- convert the picture from CMYK to RGB colour space
- save the image into a JPG format

For this example you can find the source picture here (it is 4288 x 2848 pixels x 300 ppi TIFF image, saved in CMYK colour space).

By analyzing your starting image you will notice that your aspect ration is different than what it is required: 4288 divided by 2848 (pixels) is 1.5 different than 4 divided by 3 which is 1.333. So the source image is a 3:2 aspect ratio, not a 4:3 aspect ratio, it means that your final image will be cropped and some details (the left and / or right of the image) will not be shown.

  1. Lets open our test image in Adobe Photoshop CS6, open the “images to be processed\source” folder, select our first image.
  2. Access the Actions Panel (see above ALT + F9), create a New Actions Set Folder (click the small icon on the bottom of the Actions Panel which looks like a folder icon) and rename it as Automation.Actions Panel
  3. Start recording your actions from now on, by creating a New Action (click the small icon on the bottom of the Actions Panel, which looks like a file icon) and rename it as Image Processing, after that press Record button.
  4. Convert your image from CMYK to RGB colour space by using Menu > Image > Mode > RGB Colour.
  5. Access Image Size information panel by going into Menu > Image > Image Size… (by pressing the keyboard shortcut ALT + CTRL + I on PC or by pressing ALT + COMMAND + I on Mac).
  6. Modify the Resolution number (in Document Size Group, middle) from 300 Pixels / Inch in 72 Pixels / Inch.Image Size Panel
  7. Now the most important setting: in Pixel Dimensions Group (top), find the most closest to your value size and modify it with your required value. In our example, once I have modified the document size resolution in 72 pixels/inch, the width became 1029 pixels and height became 683 pixels. My required picture dimension is 800 x 600 pixels. So I will pick to modify the height which is closer to my 600 pixels value. And the image after resizing will be 903 x 600 pixels on 72 pixels / inch resolution.
  8. We need to crop the width from 903 pixels to 800 pixels, and we can do that by accessing the Canvas Size Panel (Menu > Image > Canvas Size… or by pressing the keyboard shortcut ALT + CTRL + C / ALT + COMMAND + C). The new Width is now 800 pixels and the only things left is to save the image into a JPG format in the “images to be processed/output” folder.Canvas Size Panel
  9. Save the file by using Menu > File > Save as… (SHIFT + CTRL + S or SHIFT + COMMAND + S shortcut) into a JPG file (you can pick your own quality here, depends on your hosting most of the time).
  10. And finally, you can stop recording your actions. Now you have a set of actions ready to be applied to all your images to be processed. Of course, you can add your own tweaks to your image-processing actions, what I have done here is just a demonstration.
  11. . To apply the Automate process is relatively easy. Access the Batch Automate by opening the Menu > File > Automate > Batch dialogue, select the Source Folder (my source folder is “images to be processed\source”) and after, select the Destination Folder (my destination folder is “images to be processed\output”) press OK and watch the magic happen.

With Actions Automation in Adobe Photoshop you can process hundreds of photos in just one minute, the hardest part is to structure your files and organize the Actions so they can be applied to your images. Of course, there are even more tricks that can be applied to make this automation easier, but I believe that is the best way to demonstrate for you to understand how it is done.

Popularity and Relevance: Two Metrics for a Better Search Engine Ranking

Popularity and relevance on Search Engines

What we understand by Popularity

- page / web site authority (PageRank for Google) calculated by the Search Engine
- social media impact
In short phrase: Popularity is what is measured outside your web site, how others see you. This is determined by comparing your metrics with other web sites from the same category as yours.

Couple of Relevance factors

- content (the quality of your page overall: information, page source etc.)
- language (declared page / web site language)
- domain / link name
In short: Relevance is what you can measure in your own page or web site. This is calculated by comparing your information with other information from relevant sources.

If for Relevance you can do something about it immediately (Conduct a keyword research and improve the quality of your content), then for Popularity is a bit different. Factors like authority and page rank are impossible to change in a short period of time, all you are left with is to work on Social Media impact. But don’t get me wrong: this can be very time consuming and costly too.

The Must-Haves Elements in a Product Page in an E-Commerce Web Site

The must haves elements in a product page in an E-Commerce web site

I hope this article will help people that are thinking of starting an e-commerce web site. It is very important to begin with a good basic product structure. Even though these elements can be easily identified by analysing a popular e-commerce web site, I think it is better if you have them structured in one place. Also, I will comment a bit about the importance of each element (from SEO and Usability point of view). Click the picture above to see a graphic structure.

Product Title

Usually reflects the official name of the product. However, for a better understanding, you can include more elements here.

Composed from: [Brand name] + Product name + [Code] + [Attribute] + [Collection] + Category name

  • [Brand name] – Can be omitted if you are selling one brand or if you do not want to disclose manufacturer’s name;
  • [Code] – Product’s unique identifier (like SKU). More details below;
  • [Attribute] – An identifier which helps the user to identify user’s needs. If it is a clothing product for example, attribute can be the genre or colour: “Men’s Running Shoes” / “Red Dress”;
  • [Collection] – Optional attribute, present for items belonging to collections;
  • Category name – Like the attribute, adding category’s name in product’s title will help the user to understand if this product is what is he looking for. Also, useful for SEO.

Usability: The customer will understand from the beginning if he is on the right page.
SEO: You are building a powerful long-tail expression.

Tip: In an e-commerce web site, most of the URLs are built using the Product Title

Model identifier

Unique code used in your web site to identify the product. Can be the SKU (stock-keeping unit) code.

Usability: In case of phone orders, this is the quickest way to identify a product.
SEO: By adding manufacturer’s SKU, the Search Engine will identify your product and will be easier for data consolidation.

Breadcrumb

Path used for user’s navigation. Like in Hansel and Gretel’s story by Brothers Grimm, you can trace your way back home.

Usability: Reconstructing user’s path while browsing your web site. In case of landing on a product’s page from another web site, you will be suggested a default breadcrumb (home page > category 1 > category 2 > product).
SEO: Developing a good path can also be useful for Search Engine Crawlers to understand your web site’s tree structure.

Manufacturer / Brand

Link where you can browse all products from the same manufacturer.

Usability: Some people (including myself) have favourite brands. This will help in cross-selling various items.
SEO: By adding this field to your product’s details you will make things easy to crawl and consolidate.

Description

Details used to describe all product’s features. Can be split in two: short description (used for listing the basic details) and long description (here you can write everything about the product, use it to convince the customer to buy it).

Usability: Like described above, customer will have all details listed here.
SEO: By doing a keyword research and after a good copywriting, with the description you can generate on-target relevant content, which will help you rank higher in SERP.

Images / Video

Product’s photos and videos. Better if present with captions and in hi-resolution.

Usability: A picture is worth a thousand words. Until you see it, you won’t buy it, right? By adding images of your product, even pictures for additional finishes, variants or close-ups, you can convince further more the customer to make up his mind. A short video demo can improve a lot the conversion as well.
SEO: Especially good for Image Search. For popular searches, SERP will include results from Images.

Shipping and availability information

Another factor that can be decisive for buying on-line. It is important to let customers know long will take until the product will arrive or how much they will be charged for transportation.

Usability: A factor in greater conversions.
SEO: With the introduction of Microdata, the Search Engine will offer this information directly to the end customer.

Price

Maybe the most important factor of all, here you can include information about RRP (Recommended Retail Price), VAT, Sale etc..

Usability: By displaying price and availability information you show transparency towards the customer.
SEO: With the introduction of structured data / product schema / rich snippets, this field became very important cu SEO. Your products will convert more likely in SERP.

Buy / Add to cart / Add to favourites / Add to wish-list

This button provides great utility. You can place your order via phone or by visiting the physical store if any, but this is not how e-commerce is suppose to work.

Usability: The core button of e-commerce. Enough said.
SEO: No importance.

Other important entities

Social media sharing, product reviews, stock, cross-selling products, awards and certifications, warranty, FAQ, returns etc..