Padizine Blog » Web Design and Development Tutorials http://www.padizine.com/blog Just another WordPress weblog Thu, 14 Jul 2011 14:41:46 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Drupal 6 Tutorial – SEO With Meta Tags http://www.padizine.com/blog/drupal-6-tutorial-seo-with-meta-tags/ http://www.padizine.com/blog/drupal-6-tutorial-seo-with-meta-tags/#comments Fri, 19 Feb 2010 10:49:10 +0000 Alex Petrisor http://www.padizine.com/blog/?p=330 Meta Tags. So what are meta tags exactly? Well, they are tags, but not just any normal tags. They are invisible tags! These tags add additional information about the current page, that search engines can use to your advantage. Your users won't see anything different on your pages at all, but spiders will see quite a bit more. We will be referring to 2 of these meta tags today: Description and Keywords.]]> Today we will be covering another important SEO topic: Meta Tags. So what are meta tags exactly? Well, they are tags, but not just any normal tags. They are invisible tags! These tags add additional information about the current page, that search engines can use to your advantage. Your users won’t see anything different on your pages at all, but spiders will see quite a bit more. We will be referring to 2 of these meta tags today: Description and Keywords.

The Description Meta Tag

If you recall the last tutorial (Drupal 6 Tutorial – SEO With Page Titles) you will remember how I said that search engines list your page’s title in the search results, and that’s why it was so important for SEO. But also, when you do a search, there is some additional text right under the main title. And that usually is the description. It is very important to have meaningful descriptions that actually tell the visitor what the page is about, but what you need to pay extra attention to is that you don’t have any duplicate descriptions (multiple pages with the same description). Keep your descriptions smart and informative, but don’t exceed 150 chars, as most engines will not display more than that.

All meta tags need to be placed inside your html <head> tag. The description meta tag for this page looks like this:

meta name=”description” content=”A descriptive guide on how to optimize meta tags (description and keywords) for search engines, using Drupal 6 and the Nodewords module.”

Imagine that you would have to manage it like that for each and every one of your pages. That would be a pain. Luckily the Nodewords module is here to save the day. Get it here, upload it to your server and activate Nodewords, and Nodewords – basic meta tags. Now go to Administer > Content Management > Meta Tags.

The first option lets you choose what tags will the users be able to alter on the node edit page.


Meta tags to show on edit forms

If you are logged in with the admin account, you will always see all the tags on the edit page. So, depending on what kind of users you have on your website, you may want to change this to fit your needs. However, if you do decide to change it, don’t forget to set up the proper permissions at Administer > User Management > Permissions.


Nodewords Permissions

Next we choose which tags actually get placed in our <head> tag on our pages:


Meta tags to output in HTML

That’s about all you need to do for now. You can also set some default values for your tags, but I don’t recommend it, as you will need to write specific information related to the current page anyway. If your home page is not a node though, you can set its tags in the Default and specific meta tags section. Now you can start editing your nodes to your heart’s content!

What keywords should I pick?

This has been a pretty debated topic in the past, and since google doesn’t care about them, most people just ignore them. Truth is, other smaller engines still use them. Apparently Yahoo ditched them as well, but after a closer inspection it turned out that they haven’t removed them completely, but have greatly decreased their importance.

However, you should still properly research your keywords and strategically place them inside your page title, <h1>, <h2> tags, and description. A good way to find good targeted keywords for your page is by using the Google Keyword Tool. There you can write your own keywords, and you will get a full list of suggestions, accompanied by search statistics and advertiser competition. The best keywords that you can pick have a high number of monthly searches, but a small advertiser competition.

If you are feeling uninspired with your keywords, you can even type in your page URL, and then google will examine it for you, and find some suggestions based on your content.

After you pick your keywords and place them accordingly throughout your content, you can also add them to the keywords meta tag. I usually use 5 to 7 keywords there. But remember, only use keywords that are actually in your page’s content.

That’s it for meta tags for today. I hope that this was as useful as you expected it to be :) If not, please share your thoughts below.

]]> http://www.padizine.com/blog/drupal-6-tutorial-seo-with-meta-tags/feed/ 3 Drupal 6 Tutorial – SEO With Page Titles http://www.padizine.com/blog/drupal-6-tutorial-seo-with-page-titles/ http://www.padizine.com/blog/drupal-6-tutorial-seo-with-page-titles/#comments Mon, 08 Feb 2010 07:46:16 +0000 Alex Petrisor http://www.padizine.com/blog/?p=227 As promised in my previous Drupal SEO tutorial, part 2 of the series has arrived! Today we will be talking about the importance of page titles for SEO, and how to set them up properly for Drupal 6 by using the Page Title module.

What are page titles and why do you want to change them

Whenever you browse to a website, if you look at the top of the browser window you will see a title. This is called the page title and you can find it in your HTML file under the <head> tag, inside <title>. Everyone is probably aware of this, but the really important part is this: The page title that you set in that tag is what shows up in google search results. So if someone searches google (or any other search engine) for evil monkey, and I have a page called “Evil Monkey 101 – Chewbacca goes to Holywood!” that’s exactly how it will show up in the results. Thus, your page title is your first interaction with your visitor, and will probably determine whether he will click on the link or not. That is why we need to take full control of our page titles and turn them into useful and meaningful phrases.

1Taking control of the page titles in Drupal

Yep, you guessed it, we will need a module for this. And the name of this module is none other than… Page Title. You need to download it right here, and then upload it to your Drupal installation inside the /sites/all/modules folder, then go to Administer > Site Building > Modules, and under the Other category enable Page Title. You will also need the Token module for this to work, and if you don’t already have it you can find it here.

After that, you can manage the Page Title module settings at Administer > Content Management > Page Titles. Once there, you will be able to set a bunch of presets for your titles, depending on content type or taxonomy. This is where the Token module comes in handy, because it allows you to use a set of replaceable patterns. If you click on the Available Tokens List you will see a big list of variables. You can use any of these variables in your title patterns and they will automatically be replaced with the correct text. For example, if I use the token [nid], that will be replaced with the Node ID of the current node that I am viewing.

The Default field is mandatory. Let’s say that its value is [page-title] – [site-name], and that my site’s name is “Chewbacca goes to Holywood!”. If I browse to a node called “Chewy”, then the title at the top of the browser will be “Chewy – Chewbacca goes to Holywood!”. Why does it do that? Because Drupal sets the page title equal to the node title by default. After that, the Page Title module steps in and appends the “- Chewbacca goes to Holywood!”. But you can change how Drupal handles things in the remaining fields on the Page Title options page. You can set a specific preset to a specific content type, to a specific taxonomy vocabulary, or to the user profile.

2So what are the best titles for SEO?

Good question. People say a lot of things. Some say stuff them with keywords, others say keep them as descriptive as possible. I will tell you what I think and what has worked for me in the past. The problem with many websites is that usually the title is exactly the same as the node title, which is usually (or should be anyway) represented by a <h1> tag. Now if you think about it for a second, and think about how google works and how it has evolved over the past years, it doesn’t take much to realize that spamming keywords won’t do you any good.

First of all, you will need to have a meaningful title that will grab attention, but at the same time is deeply connected to the content on the specific page. Otherwise, even if people get to your site, they will leave in a matter of seconds. Secondly, the node title (and thus the <h1> tag) will have to be different (by using synonyms) and in some cases, even more descriptive. For example, the node title for this tutorial is “Drupal 6 tutorial – SEO with page titles”, and it clearly describes what this page is all about. On the other hand, the page title is “How to optimize Drupal 6 page titles for search engines“. Why is that? Well I have simply replaced the word “SEO” with “optimize for search engines” to add in a few extra keywords. In addition to that, the words “How to” are widely used in searches when people are looking for tutorials, or simply answers to questions. I still kept “Drupal 6” and “page titles” though, as this is what this tutorial is actually about.

3Setting custom titles for specific pages

If you want to take the approach described above, you will need even more control on your titles. On the Page Titles options page, you will see a column called Show Field. It places a checkbox next to all the content types and vocabularies that you have. If you tick that box, next time you edit a node of that content type, under the Title, you will get a new field called Page Title. Change that to your custom title and you’re good to go! But don’t forget, if in the Default field you had something like [page-title] – [site-name], then the site name will be added after your custom title. It is up to you if you want to keep or remove this.

4Conclusion and best practices

Page titles play an incredible role in on-site SEO, but many people often underestimate “the little text at the top of the browser that nobody cares about”. I hope that at least now, you are not one of them any more. If so, there are two more things that you need to remember when writing your titles:

  1. Most search engines use a maximum of 60 characters per title, so for the extra zealous ones: keep it short.
  2. Be careful with duplicate titles. Google doesn’t like duplicate content, so make sure that you double check your titles and that they are all unique.

That’s it for today, I hope that you’ve enjoyed this tutorial, and if you have anything to add about Drupal, SEO, Page Titles or the philosophy of life, you are more then welcome. Next time we will be talking about descriptions and keywords, so stay tuned!

]]> http://www.padizine.com/blog/drupal-6-tutorial-seo-with-page-titles/feed/ 9 SWFAddress Tutorial For ActionScript 2.0 http://www.padizine.com/blog/swfaddress-tutorial-for-actionscript-2-0/ http://www.padizine.com/blog/swfaddress-tutorial-for-actionscript-2-0/#comments Wed, 27 Jan 2010 16:56:35 +0000 Alex Petrisor http://www.padizine.com/blog/?p=103 Recently I’ve been working on my portfolio at padizine.com which is a full Flash AS2 website. It is still WIP, but I knew that I had to do something from a SEO point of view. Flash SEO has always been a big controversy, even after the changes that google brought to flash indexing, but there are some tricks that work well. The first thing that I did was to get deep linking working. What’s deep linking you ask? Well keep on reading!

What deep linking is and how it can help you.

Well normally for any flash website you would have a Flash SWF file embedded in a HTML page. Whenever a visitor clicks on a link in the menu and is taken to a different page in your site, the actual HTML page and thus the URL doesn’t change. The change is made within the Flash SWF and the user is taken to a different zone within the timeline, or a different page is shown through ActionScript. That means that however many pages your flash site will have, you will only have one URL address. This causes quite a few disadvantages:

  • If someone presses the browser back button while deep in your page hierarchy, he will be taken to the page visited prior to your homepage, as there is no history entry for your individual pages.
  • That also means that visitors can only bookmark your homepage.
  • And that also means that you can only have one HTML <title> that will stay the same regardless of what page the visitor is on.

Deep linking solves all these problems beautifully. All the pages inside your Flash file will generate different URLs, and have different titles. Because of that they will also create history entries in the browser, and the user will be able to use the back and forward buttons on your site. Finally, you can supply visitors with links that take them directly to an area inside your site. Flash SEO has been waiting for this for years. Too good to be true? It’s actually not, but you have to admit that it’s damn sweet.

1Preparing your HTML by using swfaddress.js

So how is this possible? Well by using a great tool called SWFAddress, thanks to the awesome folks at Asual.com. To get started, you will need to download SWFAddress here.

After you extract the files, you will see a folder called dist. This is the distribution folder and it contains all the files that we will need. First, browse to dist\js and copy swfaddress.js to the root folder of your website, where index.html is. I assume that you are using SWFObject to load the flash into the HTML.

In your <head>, right after

<script type=”text/javascript” src=”swfobject.js” charset=”utf-8″></script>
add
<script type=”text/javascript” src=”swfaddress.js” charset=”utf-8″></script>

This makes sure that your page will load the swfaddress.js and use it accordingly. Make sure that it’s after the SWFObject declaration.

2Adding SWFAddress to your Flash file

1. Importing the SWFAddress library

This is where it gets interesting. First we will need to include the SWFAddress library in our FLA. I’ve created a folder on my hard drive that holds several tools and libraries. This keeps me organised and keeps my libraries safe from random format c: moments :) So let’s say that the path for our external ActionScript code is E:\Tools\AS. You will need to go to the dist\as\2 folder in your SWFAddress folder, and copy the com folder over to E:\Tools\AS. These are the libraries for ActionScript 2.

Next, in your FLA file, go to Publish Settings > Flash > And next to ActionScript 2.0 click on Settings. Here you will need to add the path to your E:\Tools\AS folder.

For the SWFAddress functions to work when you compile your FLA, you need to include the library in your ActionScript like this:

import com.asual.swfaddress.SWFAddress;
You need to put this on the first line of every frame of ActionScript that uses SWFAddress functions.

The next bit is and will be depending on how your site is actually built. There are a few methods that you need to call, depending on what is happening inside your movie.

2. Using the SWFAddress library to enable deep linking
on your flash website

Fist of all, there is SWFAddress.setValue(). This one sets the current URL to the value thrown at it, prefixed by #/. For example, if my flash page is at http://yoursite.com, and you run SWFAddress.setValue(“awesome”), the URL will turn into http://yoursite.com/#/awesome. It’s as simple as that! However, that only changes the URL you see, if someone actually typed in that URL in their browser it wouldn’t work. We will get to that in a moment, but first let’s make sure this setValue() thing sinks in :)

So where would you use this? Well let’s say that you have a menu button called About, that takes you to your About page. You will need to add the setValue() function here then:

About.onRelease = function()
{
SWFAddress.setValue(“about”);
//Navigation code
}

So when someone presses About, they get taken to the About page, and the URL changes accordingly. This was a pretty basic example, but wherever you place setValue(), you will use the same logic. For example, on my website I load my menu dynamically from an XML file. I then add a click function to all the buttons, that would look like this:

_global.clickFunction = function (object)
{
SWFAddress.setValue(object.name.text.toLowerCase());
//Navigation code
}

Secondly, there is the SWFAddress.setTitle() function. This works in the same way as setValue() but instead of changing the URL it changes the title displayed in your browser window. This is pretty straightforward, so we will go on to the last and most important function which is…

SWFAddress.onChange() is where all the magic happens. This function automatically gets triggered whenever the URL changes, either from your application, or from the browser itself. So this is basically where you make your website navigate to a certain page when it “sees” that the URL has changed. In my FLA, I have a lot of stuff happening on frame 1 of the stage (loading XML, resizing window etc.) so that is where I put this function:

SWFAddress.onChange = function()
{
var addr = SWFAddress.getValue(); //This gets the current URL, but only what was appended to http://yoursite.com/#
switch (addr)
{
case “/”:
SWFAddress.setTitle(‘My Homepage’);
//Code for navigation to homepage goes here
break;
case “/awesome”:
SWFAddress.setTitle(‘My Website – Awesome’);
//Code for navigation to awesome page code goes here
break;
//And so on
}
}

And that’s about it! Remember that this function gets called when the browser changes the URL, i.e. when someone is pressing the back button, but also when your application changes the URL. Why is this so important? Because when you place the setValue() code like explained above, you won’t need any more Navigation code whatsoever! When setValue() changes the URL for you, onChange() is called and the navigation is done anyway. So the onRelease method would become something like this:

About.onRelease = function()
{
SWFAddress.setValue(“about”);
}
3. XML Troubleshooting

When you have a site that loads all the stuff via an XML file and external SWFs that might load other XML files and other external SWFs, it can get a bit tricky. The main problem that I faced was that SWFAddress.onChange() would get called before the site managed to load the XML, thus the menu and everything else. This happened when someone typed in an URL that was already deep in the hierarchy. So whatever URL they typed in, they still ended up on the homepage.

So to fix this, I simply went to the the XML load function, and when the XML gets loaded completely I simply call SWFAddress.onChange(). This way, if it was called before the site got loaded and didn’t do anything, after it loads it is called again, checks the URL, and takes the user to the correct page.

3Conclusion and Flash SEO

Search engines really care about URLs and what they look like. You can read more about this in my previous post, Drupal SEO for URLs. More and more Flash sites are picking up on this, and that’s great. Fact is, for the best possible implementation of SWFAddress, you need to think about it before developing your site, and write your code in such a way that it helps SWFAddress instead of hindering it. If you’d like to know more, there’s a host of resources available at Asual.com.

SEO for Flash has always been a tough battle, but with such a great ally on our side, I can’t stop thinking that we will get there at some point. Have something to say? Go ahead then!

]]> http://www.padizine.com/blog/swfaddress-tutorial-for-actionscript-2-0/feed/ 32 Drupal 6 Tutorial – SEO For URLs http://www.padizine.com/blog/drupal-seo-for-urls/ http://www.padizine.com/blog/drupal-seo-for-urls/#comments Mon, 25 Jan 2010 14:20:17 +0000 Alex Petrisor http://www.padizine.com/blog/?p=70 Hello everyone, allow me to introduce myself, as this is my first tutorial (from many to come hopefully). My name is Alex Petrisor and I’m a Creative Advertising student. However, I also work as a freelance web developer in London.

Recently I’ve been working on an on-line store which was created in Drupal 6. As important as SEO might be for any site, for an on-line shop it’s crucial. I was pleased to see how well Drupal handles that, even out-of-the-box.

Well, enough of that, let’s jump in!

1Clean URLs

Enable Clean URLs – This should be already on, but just to make sure go to http://www.yoursite.com/admin/settings/clean-urls and make sure that it’s Enabled.

2The Path Module – Custom URL aliases

Enable the Path module – This is the module that allows you to rename your URLs. Enable it on your modules page at http://www.yoursite.com/admin/build/modules under Core – optional. You will now have the option to manually type in the URL for your nodes, on the node editing form at URL path settings. This will be a relative path to your domain. So if your domain is http://www.yoursite.com/ and you set the URL alias for the node Cookies as cookies, the full path of the node will be http://www.yoursite.com/cookies.

3The Token Module

Download and install the Token module here. You will probably need this for any Drupal installation, as it provides other modules with certain helpful text variables like the username, post title, taxonomy, etc. In our case it will help with the next module we will use, which is…

4The Pathauto Module – Automatic URL aliases

Download and install the Pathauto module here. This is highly recommended as it creates nice URLs automatically for you, whenever you create new content. It does that based on several things like title, taxonomy, content type, and username. To be honest this will work out-of-the-box, but in case you want a more granular control over the URL structure you can easily change that in the module’s settings. This is where the Token module comes in handy.

Let’s say that you wanted all your content of the type page to fall under the following path pattern: http://www.yoursite.com/pages/page-name. For that to happen you would need to go to the Node Path Settings under Pathauto, and under Pattern for all Page paths write pages/[title-raw] and hit Save configuration. The [title-raw] will automatically get replaced with an alias that reflects your current page’s title, thanks to Token. If you click on Replacement Patterns you will get a list of all the variables that you can use in your URLs.

5The Global Redirect Module

Download and install the Global Redirect module here. This module addresses one important SEO issue: canonicalization of your URLs. What that means is that it makes sure that for each piece of content you have, there is one URL and one URL only. These are some of the things it does:

  • Removes trailing slashes from URLs (“/”)
  • Permanently redirects any requests for content using the non-clean URL format
  • Permanently redirects any requests that refer to the homepage, but use something other than the canonical URL for the homepage address.
  • Permanently redirects any requests for content where the case of the requested URL does not match the case of the canonical URL.

This, as expected, won’t need much (if any) configuration either.

6Drupal Rewrite Rules – htaccess friendly url

Last, but not least, as the final step for URL SEO, you need to decide whether to use http://www.yoursite.com or http://yoursite.com. By default both work and point to the same place. That can confuse the spider so it’s best if you just use one of them. I tend to use the www version, but it’s entirely up to you.

So here’s how we do this: In your drupal 6 installation folder, you will find a file called .htaccess. You need to edit that file, so scroll down to

# If your site can be accessed both with and without the ‘www.’ prefix, you
# can use one of the following settings to redirect users to your preferred
# URL, either WITH or WITHOUT the ‘www.’ prefix. Choose ONLY one option:
and follow the instructions (you just need to remove a couple of # and write down your domain name).

7Rejoice!

That’s right, you deserve it! And remember, keep your pages rich with meaningful content. There is not much point for optimization if there is nothing to optimize right?

Well, that’s about it for drupal SEO for now. I hope that you’ve enjoyed this tutorial, and if you have, you’ll be happy to hear that I will write a new one soon covering page titles, keywords, descriptions, sitemaps and some more juicy stuff.

Do you have anything to add to optimizing Drupal 6 URLs?

]]> http://www.padizine.com/blog/drupal-seo-for-urls/feed/ 2