Drupal

HTTPS is now a Google Ranking Factor

You may have noticed that when you use your web browser to do online banking or shopping, and it generally switches to HTTPS / SSL mode (with the little lock graphic) for added security.  Looks like Google wants to make that the standard for everyone soon. According to the Official Google Webmaster Central Blog

"Over the past few months we’ve been running tests taking into account whether sites use secure, encrypted connections as a signal in our search ranking algorithms. We've seen positive results, so we're starting to use HTTPS as a ranking signal."

When HTTPS mode is enabled, all traffic is encrypted between your computer and the web server. Which is generally a good thing, but does add a small performance penalty for the time it takes to encrypt and decrypt all the traffic.  Often this is done on non-ecommerce Drupal websites just for the user login and user editing pages, as most content is really not that security sensitive.  But with this announcement from Google, it's time to start thinking about switching your entire site over to HTTPS.

So, how to do that in Drupal? The complete process is too complex for the scope of this blog post, and you will need to make changes on both the webserver and the Drupal sides.  On the server side, you will need to install an X.509 SSL certificate and make some configuration changes. Many web hosts will greatly help with that process, including our hosting partner, Pantheon. On the Drupal side, the easiest way to enable HTTPS mode is by using the Secure Pages module.

Screenshot of Drupal Secure Pages module configuration

The Secure Pages module will not let you engage secure mode until the server is correctly configured to use SSL.  To best comply with the Google initiative, you should select Make every page secure .. and delete all the pages listed in the Pages box, so that every page runs in HTTPS.

Ironically, that Google blog post (and the entire website) is not running in HTTPS mode.

Google And Drupal : Alt and Title Tags for Images

Generally when you see an image on a webpage, the <img> HTML tag is being used on that web page to instruct the browser which image file to display and how.  The code looks like a little something like this (from this very page):
 
<img src="http://fireroaddigital.com/sites/default/files/frd-blog-alt-title-tags.jpg" alt="Squirrel using a video camera">
 
Simple enough, but what’s that alt tag?  
 
The alt attribute is used to help search engines and assistive technology such as screen readers for the visually impaired to understand the image.  Googlebots are getting smarter and smarter, but may not yet know that image is of a 1940’s film camera being operated by a 1940’s squirrel. Or that it might be an Australian spotted flying squirrel.  Or maybe it’s a muskrat.  I’m a human and I can’t even really tell what it is.
 
Sites like Google Images use this alt data to help categorize their collections of images, and the use of alt tags across your site is known to be one of the many Google search engine ranking factors.  So, not only is the use of the alt tag required to achieve HTML conformance, it’s good for SEO.
 
So how do we enable it on our Drupal sites?  Easily, of course.  First we make sure our Drupal site is providing a place for a content editor to enter the alt text for all images and that the resulting text is included in the resulting HTML code.
 
For an example, let’s look at the default Drupal content type Article. Navigate on your admin menu to Structure >> Content types, then under Article, click on manage fields.  If you haven't changed the default Article content type, it should look like this:
 
Figure 1- Screen shot showing Article content type fields

Figure 1: Article content type

The Article content type comes with an Image field by default.  You can also add an Image field to any new content types that you create. Click on edit under Image. Scroll down about halfway until you see this.

Figure 2- Screen shot showing how to enable the Alt tag on the Drupal Article content type

Figure 2 - Enable Alt Field on Article content type

On the Article content type, the Enable Alt field checkbox should already be checked- comes that way by default.  But it won't when you add an Image field to a new content type you created. You will need to check that box.  And notice the Enable Title field checkbox?  Go ahead and check it too - we will talk about it shortly.

So then how do you enter Alt text for images?  Let's create a new Article and find out.  Navigate to Content >> Add Content >> Article.  Enter title & body content.  Scroll down to the Image section.

Figure 3 - Screen shot showing adding an Image to an Article

Figure 3 - Adding an Image to an Article

Choose a file and upload it. I've chosen a picture of four lovely donkeys standing in field.  It's also generally a good idea to name the field descriptively (and use keywords related to your content if applicable).

Figure 4 - Screen shot showing Added Image

Figure 4 - Added Image

Save the node and you are done!  The alt text will show up in your page HTML code.

A few more loose ends though:

  • what about all those little design-element images throughout your website- do they need alt text?
  • what about inline images I add to a page using the WYSIWYG editor- how do I add alt text to them?
  • what about that title attribute you said you'd talk about later?

Ahh good- you've been paying attention.  Let's start with the first one.  You probably have small graphics, lines, shadows etc. all over your website, sprucing up the design.  The W3C standards say that for images that have no semantic meaning to the viewer, you can set the alt tag to null.  ".. if the alt text is set to null (i.e. alt="") it indicates to assistive technology that the image can be safely ignored."

For inline images (like all screenshots I've included in this post) - your Drupal WYSIWYG editor should have a way to enter the alt text.  We use CKEditor on this site, which looks like this while inserting an image. Other editors work similarly.

Figure 5- Screen shot showing setting the title tag for inline images using CKEditor

Figure 5 - Setting the alt tag for inline images using CKEditor

And finally, the title tag.  It tells the browser what to display as a tooltip when the viewer hovers his cursor over the image.  It is generally more useful when the image serves as a link, either to a larger version of itself or to another webpage.  The best practice then is to put a description of what will happen when the user clicks on the image.  It is generally not thought by the community to have any search engine ranking value.  But it is a good practice to follow for good user interaction, which may indirectly lead to better conversions.

If you check the Enable title field checkbox on the Image field in the content type, it will add an additional field under alt for you to enter title text for images.  In CKEditor, the title text can be entered under Advisory Title on the Advanced tab.  

Pages