Pages

Friday, May 3, 2013

Drupal behaviors: A quick how to


If you’re adding JavaScript to your custom module it is very easy and tempting to simply add it like this:
jQuery(document).ready(function($){ alert(‘hot dog flavored water’); }); 
Now this code works perfectly fine but what if your JavaScript needs to be executed on page load and after an AJAX request? Imagine you have a view that uses “Views Infinite Scroll” and you want add a CSS class to every result like this:
jQuery(document).ready(function($){ $('.view-display-id-page .views-row').addClass('fancy-pants'); }); 
This will work for the results that are displayed initially but for all the results that are loaded by Infinite Scroll's AJAX call the class is not added. That’s where Drupal behaviors come in handy.  The behaviors will be executed on every request including AJAX requests, so let's do the equivalent of the code above but this time using this method:
Drupal.behaviors.infiniteScrollAddClass = { attach: function (context, settings) { $('.view-display-id-page .views-row').addClass('fancy-pants'); } }; 
I admit that was quick - so here are some explanations:
  • infiniteScrollAddClass: This is your namespace and should be unique. For example, this is typically the name of your module, but it isn't mandatory.
  • context: This is actually really really cool, on page load the context will contain the entire document and after an AJAX request will have all the newly loaded elements. This way you can treat content that is loaded in via AJAX differently than others.
  • settings: This contains information passed on to JavaScript via PHP, it is similar to accessing it via Drupal.settings. For further comprehension I recommend this source.
There obviously are cases where some functionality should not be executed on every request. In such a case its great to use jQuery's .once() method. So let's say we want to give all the initially loaded results in our view an additional class, for something like this we would proceed like so:
Drupal.behaviors.infiniteScrollAddClass = { attach: function (context, settings) { // these are the elements loaded in first $('.view-display-id-page').once(function(){ $(this).find('.views-row').addClass('i-was-here-first'); });  // everybody $('.view-display-id-page .views-row').addClass('fancy-pants'); } }; 
This will add the class “i-was-here-first” to all the view results present on page load, everybody else joining in via AJAX will just get the “fancy-pants” class.
So that’s a quick look at Drupal behaviors, if you haven’t used it do use it!
If you are looking for additional theoretical insight into this topic I can recommend these two sources for further reading:


5 Drupal Security Tips


Drupal is one of the most secure content management platforms around. Despite its high level of security, it is still vulnerable to certain types of security problems. Many of the potential security problems are preventable if you know what to look for. Here are five security tips for Drupal.
1. Security Updates
Some security problems are actually just loopholes that are found in certain developmental versions of the platform. Security loopholes can actually open to door to malware, hacking, and other attempts to compromise the security of the website. One easy solution is to stay with the recommended distributions until the developmental versions have been stabilized. Be sure to keep everything up to date whenever new releases are available because they will usually have the security solutions that you need to keep your site secure.
2. Be Selective About 3rd Party Modules
Third party modules can help your website run faster and offer some helpful features, but you should use them with a grain of salt. Unfortunately, there are some third party modules may actually create some security issues that may not have been present otherwise. In order to prevent this, it is recommended that you carefully review each one before installation. Try to stick with the ones that are recommended by other users and be sure to look through it yourself to see if there are any problems.
3. Regularly Change Passwords
You should always use tough passwords to ensure the security of your website, but another thing you should be doing is changing your passwords regularly. Hackers can penetrate your system if you use the same passwords continuously, which is common as many people do that because it can be difficult to remember a lot of passwords. It is vital that you change your passwords at least every 3 months for all of your entire system.
4. Monitor Other User Accounts
 Although it is perfectly fine to have other users, their privileges should be carefully monitored and restricted. Sometimes security issues can occur when other users inadvertently let in malicious code or even invite other users. Make sure that they must have permission to make posts, change settings, or add code to your website.
5. Backup, Backup, Backup
As always, backing up yours system is essential. If you do not backup your system, then it will be much more difficult to recover from a security issue that has significantly altered your website. The best solution to this problem is to perform regular backups. Go through all of the steps to make sure that your information is still there.
Securing your Drupal website is relatively easy to do as long as you follow these general guidelines. Be careful about what you allow other users to do with your site, backup your information, change your passwords, update your modules, and be selective about using third party modules. If you do all of this your site will more than likely stay safe.

Drupal SEO Checklist for 2013


The SEO environment has changed significantly during the last 18 months, especially after the Panda and Penguin updates. What worked a couple of years ago, is just not relevant anymore. Before those updates, it was much easier to achieve high rankings in search engines just by building or buying links from low quality sites. Post-penguin SEO requires a more holistic approach, with focus on quality content but also requires a technical perfection.
But, Drupal is already SEO friendly; you are going to answer. Of course it is, but that does not mean that it is perfect right out of the box, but that it has the flexibility to become a SEO-perfect platform. A plain Drupal installation does not provide everything that is required so, here are the basic steps to optimize it to the last detail.

Planning

  1. Begin with the Search Optimization planning, before beginning to build the site. The development of the website is the not the final destination after all, it’s just the medium for the creation and promotion of site’s content. 
  2. Do your keyword research to understand what people are looking for and how you can help them to find it. Plan your site architecture, hierarchy and layout based on your findings. Use the Keyword Tools from Google or Bing. For a more advanced tool, use KeywordSpy (paid, with a free trial).

Setting up Drupal

  1. Create a redirect between the www and the non-www version of your site. If you don’t, search engines will index both versions and you will have a duplicate content issue. It really does not matter which version you’re using, but stick to one. To enable it, open the .htaccess file and uncomment the related lines (lines 81-82 with the www version, lines 87-88 without the non-www version).
  2. Install the SEO Checklist module. This module does not provide any functionality by itself, but it gives you a 58-points checklist for the most important actions related to the On-Site SEO. It helps to keep things organized and it also provides some automated tests for installed modules etc.
  3. Enable Clean URLs. This one is more than obvious, must check it just in case.
  4. Install and configure Pathauto module. The default URL for a Drupal node page is node/nid. Use this module to define URL patterns for every content type, taxonomy and user pages. Now, every time you create something new, a URL alias will be created automatically, which will be search engine friendly. For better results, try to limit the URL length to 115 characters.
  5. Install and configure Global Redirect module. In the previous step, we actually created a duplicate URL for every piece of content. When search engine’s spiders visit the site, they will actually track two different pages and it’s very possible to have a duplicate content penalty. This module solves this problem by creating 301 redirects from the original to the alias URL.
  6. Install and configure Redirect module. If you change the URL in a page which is already indexed in a search engine, when a user clicks on this specific result will land on a 404 error page on your site. You’ll also lose the benefit that you had from existing incoming links to this page. This module creates redirects from the old to the new alias and improves the search experience of the users.
  7. Install and configure Pathologic module. It fixes images paths and URLs inside your content, so that you can move them in different domains, subdomains or folders without creating broken links.
  8. Install and customize Transliteration module if you are creating a web site in a language different than English and you want to use only US-ASCII characters in your URLs.
  9. Create an account in Google Analytics and install and configureGoogle Analytics module. Google Analytics does not only have information about traffic, but it can also provide useful insights about the performance of the site’s landing pages for different keywords.
  10. Install XML sitemap module. Do not forget to configure the module and declare the content types and taxonomy terms that you want to be included in it the XML sitemap. 
  11. Create an account in Google Webmasters Tools and submit the XML sitemap. This is a step, which is often overlooked. After the creation of the XML sitemap do not forget to submit it in GWT. Make a check a after a while that it was submitted successfully and there were no errors.
  12. Create an account in Bing Webmasters Tools and submit the XML sitemap. We all tend to focus on Google, but as Bing has now a market share of 16%, it is an important player that you cannot ignore.
  13. The default robots.txt of Drupal works fine in most cases, but some minor changes are usually required. In many cases you want to hide specific pages or folders of the site for search engines, by adding a new line with the “Disallow” command and the name of file or folder.
    Also, add the URL of the XML sitemap inside the robots.txt file.
    If you’re running a multi-site Drupal installation, use RobotsTxtto generate different files for every one of them.

Optimizing Pages

  1. Install Meta tags module. It allows the creation of patterns for automated generation of meta tags in the <head> section of the page. You can define global settings, but also different settings for every content type, taxonomy, file type or users.
  2. Configure page titles from meta tags settings.  Every URL should have a page title; it is the main definition for search engines and their users, about the page’s content.  To be compatible with the main search engines, try to limit the title’s length to 65 characters. Also, avoid duplicate page titles.
  3. Configure meta descriptions from meta tags settings. Meta description is not a ranking factor, but is the text that users read in the search engine results pages.  The automated generation method uses the first paragraph from your text, so it’s not always ideal. It’s better to take a quick look before posting a node and adjust accordingly.  Avoid duplicate meta descriptions and try to limit their length to 156 characters.
  4. Do not bother to use the keyword tag. Search engines stopped using it several years ago, so it’s not a ranking factor anymore. Actually, it can only help your competitors, as they can easily understand what keywords you are targeting for.
  5. Use proper heading tags. Drupal usually does it right by default, as node pages ,pages created by the Page Manager or Views, are using <h1> titles. Also, secondary elements like blocks or panes are using <h2> titles. Things to watch: some themes are using <h1> to display the site name, so be sure that you do not have two <h1> tags per page. Also, when you are creating your template overrides, be sure that you are using the appropriate markup for heading tags.
  6. Add the rel=”canonical” link element to declare the preferred version for search engines, among the different URLs that a Drupal page has. It can be performed through the meta tags module settings. 
  7. Use the <alt> attribute for your images. Without it, search engines cannot understand the content of the image. Remember that you can have search engine visibility not only for pages, but for images as well.
    When you’re using an image field, you can enable the alt attribute, through the field settings and then add it for every new image.
  8. Optimize your image file names. Using a descriptive file name helps to achieve better rankings. Also, it is the first piece of text that is displayed in Google Images results, so an appropriate file name will attract more clicks.
  9. In many cases you create nodes in Drupal (like images, or tweets), with the only purpose to be included in other nodes, views or panels. To completely hide those pages from search engines, you can use the Rabbit Hole module, which creates redirects from this nodes to custom paths, so they are not visible or crawlable.
  10. Pay special attention when you are creating multilingual web sites. Translating only the site’s content and header tags is not enough. Every important element like page titles, page descriptions and alt attributes should be translated as well.
  11. Install and customize microdata module. Using microdata to markup you pages according to schema.org specifications, will increase the change for rich snippets to be displayed in search engine results pages and will have as a result increased visibility for your web site and clicks from the search engines. Alternatively, you can use RDFa.
  12. Social signals are becoming an important ranking factor, so it’s good to add social share buttons to your pages. There are many different modules for this task, like Social Share or Share This. Even better use custom code, as described in the Google Analytics social integration guidelines.
  13. You may read that Google+ is a failure or it’s dead. The truth is that even if it’s still a small network, it’s growing fast. In many cases Google+ is an important ranking factor for Google. So, creating a page in Google+ is a beneficial strategy.  Also, use rel=”publisher” to connect your website with your Google+ page. 
  14. Google authorship provides several benefits related to SEO. In many cases, it adds the author’s picture in the search results, thus increasing trustworthiness and click-through rates. Also, it generates a “more from author” button, to check other posts from the same author.  So, first ask your site authors to create personal profiles in Google+ and add the site details in them.  Then, add the rel=”author” attribute, a way to do it in Drupal is described here.
  15. If you’re creating a news website, optimize your site for Google news. Generate a Google news site map by installing the relatedmodule Also, consider using the news keyword metatag (yes, it’s a keyword metatag!) to help Google to better understand your content. 
  16. Be careful when you’re using https. Many times both the http and the https versions of your pages will be indexed as separate pages.  Search in Google for “site:yourdomain.com inurl:https”  to locate duplicate content. Use robots.txt to keep search engines from indexing https pages.
    Consider also to switch the whole site to https, as Matt Cutts from Google says in a comment that it’s OK to do it.
  17. Unfortunately, Views or Panels do not have meta tags by default. Install and configure the Meta Tags Quick module, which allows the addition of the main meta tags for any path that is generated by Drupal.
  18. For the pager links of paginated content like Views, use rel=“next” and rel=“prev”. An easy way to do it is described here.
  19. Faceted Search is a great feature and very helpful for site visitors. If it’s not handled right though, it can cause serious problems to the site’s SEO. First of all, the generated URLs are containing a lot of parameters and are not search engine friendly. Faceted API Pretty Paths module solves this problem, as it allows the creation of URLs with an appropriate format. Also, as every filter and every sorting option creates a new URL with an extra parameter, even a small site with a few nodes can generate thousands of different URLs and gave a duplicate content issue. The correct use of canonical tags can eliminate this conflict.

Launching and beyond

  1. Hide or delete your development site. Your client will not like it when it is ranked higher than the production site in search engines. 
  2. On the other hand, if you put a “Disallow: /” in your robots.txt file, remember to remove it, so that search engine’s spiders can crawl your new web site.
  3. Site speed is a factor in search rankings, and it also affects conversion rates.  Read carefully the Drupal caching, speed and performance guide and optimize every aspect to your web site to the maximum.
  4. Use Screaming Frog to quick analyze your site and detect possible issues. Check for client and server errors, broken links, titles, headers, images and be sure that your new site is error-free.
  5. Forget the traditional link-building methods. Create a content creation and promotion plan and acquire links through social media and relationship building. Do not expect to rank well just because you stuffed some nice keywords and you are using Drupal.
  6. Be a part of the Search Engine Optimization Drupal group or chat on irc://irc.freenode.net/drupal-seo
SEO does not end with site launch, but it is a continuous process. Google algorithm changes about 500-600 times a year, so you have to be sure that everything is up-to-date. Make monthly audits in your website, study your analytics, check that all the new content is SEO optimized and make sure that no issues were causes by new functionality or updated modules.

Friday, March 1, 2013

Using Drupal Taxonomy to Post Content


Now that we have created the vocabulary and we have added terms to it, we can use it when posting content on the web site. 
tags
Note that the tags option auto completes the vocabulary field with one of the terms we have created before.

If you choose terms from the vocabulary they will be displayed as tags on the page you have posted them as shown below:
tags
Note that the terms presented do not indicate their underlying structure to the reader. The vocabulary just displays all terms for this content item.

The Drupal taxonomy provides a great way to manage the content sorting of your web site. Those are just basic examples and you can achieve amazing results extending the taxonomy vocabularies and terms for your web site.