Category: SEO

SEO for images

The image should be relevant to your article. The name of the file should be relevant to the content of the image and be of the form: main-keyword-secondary-keyword.jpg

The image should be served at the size it will be displayed

Use srcset for responsiveness

Serve compressed image if possible in webp.

The number one SEO factor for images is the file name. It should have a structure such as keyword-secondaryword-index.jpg

The image URL is also important in giving context for the image to the search engine.

Create good URL structure for your images: Google uses the URL path as well as the file name to help it understand your images. Consider organizing your image content so that URLs are constructed logically.

Google Images Bet Practice

Use structured data for your content and include the image :

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "Reguleeritav kontorilaud",
    "image": "https://www.example.com/images/category-productname1.jpg",
      "description": "A compelling descritpion",
      "offers":{
    "@type": "Offer",
    "priceCurrency": "EUR",
    "price": "575"
  }
}
</script>

Alt description and title should contain your keyword but it doesn’t seem to be a major ranking factor.

Title and meta tags for the image are used by google to generate title and snippet for the image this might impact the click through rate. Most of the job regarding CTR must be done by the picture itself but I sometime use snippet to verify that the picture I am interested in is actually the right thing in the right context (imagine checking picture of clelbrities, you might sometime stop and check if that picture is actually from the celebrity, or if that product picture actually match the exact model you were interested in.

Google Images automatically generates a title and snippet to best explain each result and how it relates to the user query. This helps users decide whether or not to click on a result.

We use a number of different sources for this information, including descriptive information in the title, and meta tags for each page. 

Google Images Best Practice

About image quality:

Don’t use images that are too small or have a low resolution on the mobile version. Small or low-quality images might not be selected for inclusion in Google Images, or shown as favorably when indexed.

https://webmasters.googleblog.com/2020/07/prepare-for-mobile-first-indexing-with.html?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+blogspot%2FamDG+%28Official+Google+Webmaster+Central+Blog%29

Keyword research

The number one place for your keyword research is Google Ads Keyword planner.

This tool will give you suggestions, amount of search for each suggestion during a given time frame as well as competition on the keyword regarding advertisement. A lot of useful information.

If your site is up and running, you will find another useful source of keyword to explore in google webmaster tools.

Other sources of keyword are ahref and semrush

Open chrome from command line

To start a new chrome window without any userl profile loaded run cmd and type:

start chrome

You can also simply call the run interface and type “chrome” then enter to have the same effect.

Now, more interesting, if you want to open a new chrome windows with an alternative profile, or simply a different user:

C:\Users\user1>runas /user:alternative_profile_name "C:\Program Files (x86)\Google\Chrome\Application\Chrome.exe"

replace “alternative_profile_name” with the user name you want to use. It is usefull if you engage in multilanguage SEO activity to have profile set with different languages as default. Or if you work in a different language that the one you use for your everyday account, you can have a “professional” profile setting with all the appropriate default.

You might also need to open Incognito window to check website without your browser cache. Emptying your cache everytime can be cumbersome, so you can simply open an incognito window:

start chrome /incognito

For that matter I rather use a Firefox developer installation set to not cache anything.

Google I/O 2019 take away

The number one take away is to have a light weight website that is mobile friendly.

We have covered some of the very important topic in previous articles about optimization so we will focus here on the surprise features and highlight some point we have skipped previously.

Schema markup for rich results

One of the topic I didn’t cover so far is schema markup for rich results. Google likes it as it allow its search engine to extract the useful information from your page and display that on their search resuls. One can ponder why we should provide content for Google. There is the hope of figuring prominenttly and rank higher but if people get their answer directly from the search page, what economical model do you have left to make money from your website, unless you are paid directly by google. That would be the case for a recipe site.

One thing that has been highlighted in the talk is that schema information might be used with assistive technology, to walk you through a recipe for instance.

Concerning product page, if you are competitive, you might attract customer with your super price or the super brands you have available at your store.

So that’s the two core benefits you can expect from product mark-up. Event mark up might actually be useful to provide straight from the search information about your live event with clear information for google about when the information will be out of date. Leading for a better user experience, unlike the recipe case where you don’t really your recipe to be displayed directly on search page unless you got some compensation from Google for using your content.

For product markup, in sector where negotiation is important, you might not want to have any kind of price displayed publicly to avoid giving any cue to your competitors and allow you larger freedom regarding your pricing. For instance the price might largely vary depending on the quantity of a single item or the total amount of the order due to saving on scale, distance , options, it would be a daunting task to give all available options and integrate all factors influencing the final price and integrate that in a schema markup, plus as seen above it is totally counter productive in terms of conversion as your competition would only have to check your site to propose a more competitive offer.

Needless to say that all schema markup are not made equal and you might consider the benefit of implementing specific schema markup depending on your activity.

Users like large, high definition images

Google aknowledge that people like large, high definition images and will feature those images in their search.

Using proper compression will help reduce the bandwidth necessary to load the image.

Google will start to show in search 3D models directly available in the search results as AR.

There is a talk dedicated to adding 3D to your website:

All those topic needs further investigation, needless to say that product markup is already implemented on my some of my sites.

Light weight website

Time is money and on the web every millisecond of load time count.

Javascript libraries have become too heavy and css frameworks do not use the most advance capabilities of modern css.

Time to refresh your code and crack down on resource call, scripting and rendering.

One of the main reason I used bootsrap was the grid system, simple and efficient. Nowadays css includes grid-column markup:

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

https://drafts.csswg.org/css-grid/#propdef-grid-column

The other good reason I had to use Bootstrap framework was the modals. I like their modals, so much I built a webshop with products popping up in modals. The good thing is that you don’t have to go back and forth product pages and category pages and the down side is that category pages code started to grow a tad whith the store products line up.

Avoid webfonts

Replace glyphicon and fontawesome with css sprites use Hover css selector to change color, icon or size on hover and point to another version of the icon etc.

Inline your scripts

Load essential css and js inline for faster rendering

Avoid libraries. Inline your scripts. Defer everything that can be defered.

Optimize image serving

Use fixed size images and use srcset to load properly sized mobile version.

Lazyload images.

One point I need to clarify is the following: properly displaying compressed images on high DPI screen requires to serve an image larger than the size it will be displayed to accomodate the higher density of screen pixel. The questions being: does it impact user experience positively? and Does it impact SEO positively? And John Müller would proabably answers that only the former matters and he would be right in that respect.

How to test locally hosted page with google tool before release

There are two solutions available:

One is to simply test the code directly on the test page. The three google search testing tools, namely Mobile Friendly tool, AMP testing page, and the Rich Snippet/ Strucure Data testing tool offer this possibility. You have to keep in mind that external resources such as your css and js files should also be available for rendering in the case of the Mobile friendly tool.

You can modify your code directly online and test your modification which is a really nice feature.

If you want to integrate the test in your workflow but your pages are hosted behind a firewall or are simply available on your local machine, google wrote a nice article on how to make this file available for testing online.

https://developers.google.com/search/docs/guides/debug

Defer the execution of javascript and load js files in the footer

In a previous article we have seen how to manually concatenate scripts in your main theme to avoid loading multiple files.

In case you can’t concatenate some scripts here are two options to defer the exectution of the script until after the page has fully loaded or simply load a php script in the footer rather than in the header of your page.

Defer the execution of a script:

For your inline scripts:

<script defer> your script</script>

And it is exactly the same when the scripts are in an external file:

<script src="/path/to/your/script" defer></script>

Execute a function in the footer instead of the header.

In one of my plugn I had the case where I needed to fetch all the categories and product variation in jquery plugin that allow live display and filtering for a given search string. As such, the jquery is prepared in a php file that I then included in my theme header with and include function. Until I realize I can as easily load the script in the footer and avoid to overload my header.

In the index.php file of the plugin:

add_action('wp_header', 'PluginName::functionName);

simply becomes:

add_action('wp_footer', 'PluginName::functionName);

functionName is your plugin function that contains the include statement that should be loaded in the footer.

Control what javascript and css files your wordpress plugins load.

Javascript and css can heavily impact your page load time and the ability of google bots to render your page. The consequence on your ranking might be heavy in case the page to be marked as not mobile friendly due to this rendering issue.

A solution is to reduce the number of css and js files your wordpress site loading.

As you have noticed, many plugins load their own css and js in order to perform their function and nicely display the output, which is perfectly legitimate, although it might not be desirable for a web designer concern with performance, as you ought to be ;)

I am pretty sure I don’t need to make the matter clear, as you are reading this article but just in case, let’s recall here that on top of impacting your SEO as stated above, there is a 5% drop in sales for each 0.1 sec of load time (I am not sure I state that correctly but you got the idea).

So, what the solution you may ask, rightfully, so let’s dig into that without any further delay.

The strategy we will explore here is to dequeue the plugin css and js and concatenate it to your theme js and cs

Dequeue a plugins javascript file or css stylesheet:

To dequeue the script you want to concatenate add the following code
in your theme functions.php :


add_action('wp_print_styles', 'deregister_styles', 100);

function deregister_styles() {
  wp_deregister_style('name-of-style');
}

Merge Javascript and styling with your existing files

Locate the style or js you have deregistered and copy and paste it’s content in your theme css or js.

Test your site thoroughly to make sure there is no conflict. Paste the code in your stylesheet in the order they are loaded on your page. Once you are sure everything is displaying properly, you might merge the style rules and remove the duplicated one in case there are.

There are more advance technique to load css such as css preprocessing. which we will cover in further articles.

More info on this excellent article:
https://davidwalsh.name/remove-stylesheets

Tips:

In order to make sure you are removing the right css files from the queue, use the developper tool of your browser and inspect the element related to your plugin, you will which css rules affect them and from what file they come from. Once you have noted the name of the css file you know which one you need to copy to your own css rules and remove from the queue.

Content wider than screen in Google Search Console and Woocommerce site

I noticed some of my pages were marked as not mobile friendly with indication that some pages shows the following errors:

  • Content is wider than screen
  • Clickable elements too close together
  • Text too small to read

For a start, I’d like to deal with the Content wider than screen message as I think I have identified the cause of the issue. Woocommerce magnifier keep a full size picture of the product on the page with the following styling:

class="zoomImg" style="position: absolute; top: 0px; left: 0px; opacity: 0; width: 1000px; height: 1000px; border: none; max-width: none; max-height: none;"

We can see that the opacity is set to 0, so the picture is transparent and that the width and height are the picture full size in pixel.

So there is no mystery any longer on what element on the page generate the content wider than screen message.

Now that (at least one of) the culprit has been identified, we need to elaborate a fix. The first strategy that come to mind would be to resize the pic when it is transparent and only switch it to full size when the picture is magnified. This could be done by doing some overwriting of woocommerce files.

Does noreferrer tags pass page rank

Actually it does pass link juice according tho this article in forbes: https://www.forbes.com/sites/johnrampton/2017/11/06/the-difference-between-nofollow-and-noreferrer-and-why-it-matters/#4bda7e711e06

The good news is that the noreferrer tag has zero impact on SEO. Simply put, it operates on the analytics/browser level, not the search engine level. 

Indeed we can read in w3 consortium website:

 noreferrer: Requires that the browser should not send an HTTP referer header if the user follows the hyperlink

Source: https://www.w3.org/TR/referrer-policy/#referrer-policy-no-referrer

Where as nofollow is clearly a link to an unendorsed document. A typical exemple is an advertisement link.