Sitecore – Shortening URL (for Your SEO Sake)


Hello, all! Tonight seems like the time for me to unleash what I have discovered during my time of blogging-hibernation. Earlier, I talked about WURFL and sitecore’s default way to detect device, now I talk about the way to shorten URL in Sitecore. This way bug me off and I left my question in stackoverflow left unanswered.

I am really aware that there is a default way for Sitecore to perform such task. What I found is my URL is really long and my boss is quite angry for it mess the SEO. Below is the default way.

UrlOptions opt = (UrlOptions)UrlOptions.DefaultOptions.Clone();
opt.SiteResolving = Sitecore.Configuration.Settings.Rendering.SiteResolving;
linkToResep.NavigateUrl = LinkManager.GetItemUrl(citem, opt);

Now, as you see, you need to configure the config too. So that it will shorten the URL as you wish. You can look on my question for detail.

I got various answers from kind people in my question, but, I still having trouble in it. So I am enlightened when my boss said that in PHP we can regex match something. Well, yeah! I will use regex to remove those long link!

As default we know that Sitecore LinkManager will produce a long link that contains /sitecore/content/sites/yoursite/ to access your items. Well, it seem so suck to the SEO. Then we should remove it. Below is how.

  1. Create a link using Sitecore.Links.LinkManager.GetItemURL(myItem). The output will be used as a parameter to my method that will shorten the url.
  2. Create a method that will receive a link and will shorten it for sure. I suggest you to create a helper class that will contain all functions and helpful methods that you need in many classes.
    public static string ShortenURL(string URLToShorten)
    {
        return Regex.Replace(URLToShorten,@"sitecore/content/sites/[\w]{1,}/","");
    }
    
  3. The call will be like below.
    yourHyperLinkObject.NavigateUrl = your.helper.ShortenURL(Sitecore.Links.LinkManager.GetItemURL(myItem));
    

Well, I tested it already, and thank you to the regexpal that ease my testing.

Wait, wait, wait, wait. Hold on! That easy? Yes. Why I didn’t find it out so quickly? Well, people, I didn’t think out of the box. I was when I found this out through my boss’ words about PHP. Okay, problem solved? Not yet! Look on the title, for your SEO sake. We just shorten the URL and not finished optimizing the SEO.

If you are Sitecore developer, then you must have known that you can access your site using both yourdomain.com/sitecore/content/sites/yoursitename/youritemname and yourdomain.com/youritemname. Okay, you knew it already, then what about it. As soon as I can shorten the URL, my boss feel relieved, and he asked whether the old long link still accessible or not. I said, yes. He panicked!

What must I do, first, you need to add canonical to your site tag. The canonical will contains the long link. Second, if you must, you need to put a redirection whenever someone is trying to access the long link to the correct short link.

Using this, well, your SEO is getting better and not screwed up a lot. I hope this is useful to you all folks! Please feel free to comment 🙂

Sitecore – WURFL or Sitecore Device Default Detection


Hi all! I return from my long blogging-hibernation. Lately, I encounter a little problem with mobile detection in Sitecore. Before that, yes, I am still working on the website of my company’s client and yes, though I really tired of this Sitecore stuffs, I still feel so curious about it. I hope through this post, you can find the best way to choose for your Sitecore site in detecting device.

As we know, WURFL is a powerful tool that makes your web page suit the device that opens it. We also know that Sitecore is powerful enough to let the developers set a different look and feel for a different device. I thanked so much to my client for they have provided us, the developers a good-customized-WURFL-system. Our client, that is mainly based in the continent far away customized the 51Degree to suit their needs. I don’t want to write how to do such because greater people than me have written about it in their blog (example: the great mentor – at least for me – Alex’s blog.)

Then using the module that our client have made, we can differentiate the site look and feel on various devices. Well, for now, we just differ between mobile, tablet, and our beloved big screen computer. Well, it works just great. Our client make a fine module and I like it! Well, somehow there is a problem, what if the device have a different user agent and that user agent is not registered, yet? Also the update can be automatically done.

In contrast, you know that most of the devices have a common thing in their user agent. Really? What is it? For example, there will be words like “mobile”, “Blackberry”, “Android”, “iP”, etc. You can add the devices and don’t have to write a module like what my client have done. It can detect automatically, and easily. Really? Yes. So, I tried this, too! The result is just great! Fine and really nice. The goodness is that you can detect most of devices easily because they “must have something in common” on their user agent. What’s the disadvantage? If you add a new device, well, be sure to update all of the items in your Sitecore, which can be so many even though you only update the default value of the template.

In the last two paragraphs, it shows like I am telling you that Sitecore default device detection using user agent is a classic way that cost us more effort than using the WURFL way to detect device. Well, I’m afraid I have to say that is true. Since 51Degree offers a free lite package to use, we can just create a module that will need to be updated once or twice for a long time. We don’t have to really create a new device and trouble us with all the task to assign the layouts and sub-layouts to our Sitecore items.

Well, it is up to you to choose. But I am sure there are more things to consider than just what I wrote in here. Be free to comment.

May, 29 2013 update:
For some reason, the device detection system on my local is having problem. Sometimes it works out, sometimes it don’t. I tried to check the values of IsMobile and width (these two rules are those who are used in detecting mobile device in my project). It shows values that match the rule, but somehow it keeps showing the default layout setting from Sitecore. Will update on the way to prevent it.

Orchard – Piedone Avatar Double Extension Threat


So, I was still developing for a site that using Orchard CMS. I finally get into security testing. Well, that’s a lot of effort to do. 😀

But what I got is that there is double extension threat to my application. At first, I manage to fix it through Media module on Orchard. Then I think it was already safe and clear. I am patiently waiting for the result. What I got is the opposite. The threat still shows up. And it brings me to one conclusion: the problem is in the Piedone Avatar (the current module that I use for avatars in my site).

As usual, I debug the application first, put breakpoints here and there. Searching for the suitable location and looking for the steps. I got the way and I put some modification. The modification that I made is on the IAvatarsService interface , AvatarsServiceExtension class, and AvatarsService (for I have made a modification on the interface).

Here is the added code:

IAvatarsService

...

/// <summary>
/// Saves an avatar file
/// </summary>
/// <param name="id">Id of the content item (user) to attach the file to</param>
/// <param name="stream">The content of the file</param>
/// <param name="extension">The extension of the file</param>
/// <param name="filename">The name of the file (for double extension checking)</param>
/// <returns>True or false indicating success or failure</returns>
bool SaveAvatarFile(int id, Stream stream, string extension, string filename);

...

AvatarsServiceExtension

...

/// <summary>
/// Saves an avatar file
/// </summary>
/// <param name="id">Id of the content item (user) to attach the file to</param>
/// <param name="postedFile">A posted image file</param>
/// <returns>True or false indicating success or failure</returns>
public static bool SaveAvatarFile(this IAvatarsService service, int id, HttpPostedFileBase postedFile)
{
    return service.SaveAvatarFile(id, postedFile.InputStream, Path.GetExtension(postedFile.FileName), postedFile.FileName);
    // I add postedFile.FileName so that it will check the extension first.
}

...

AvatarService

        ...

        public bool SaveAvatarFile(int id, Stream stream, string extension, string filename)
        {
            ...

            if (containsHarmfulDoubleExtension(filename) || !IsFileAllowed(filePath))
            {
                ValidationDictionary.AddError(AvatarsServiceValidationKey.NotAllowedFileType, T("This file type is not allowed as an avatar."));

                return false;
            }

            ...
        }

        /// <summary>
        /// To check whether it have a double extension (and harmful) or not.
        /// Leave the file be like it is if there is a double extension if not harmful
        /// </summary>
        /// <param name="filename">name of the file</param>
        /// <returns>true if contains</returns>
        public bool containsHarmfulDoubleExtension(string filename)
        {
            string harmfulExtensions = "exe php cs ascx cshtml html obj class java bat deb vb vbe reg php3 php4 php5";

            bool hasil = false;
            List<string> splittedFileName = filename.Split('.').ToList<string>();
            if (splittedFileName.Count == 2)
                return false;
            else
            {
                // more dots are found.
                splittedFileName.RemoveAt(0); // remove the first element (considered as a name)
                foreach (string singleBlast in splittedFileName)
                {
                    hasil = harmfulExtensions.ToUpperInvariant().Contains(singleBlast.ToUpperInvariant());
                    if (hasil == true)
                        break;
                }
            }

            return hasil;
        }

        ...

If there is any suggestion you may add or repair on my code, well, please be kind 🙂

Instant or Step-by-Step


Hello! It is me again! I want to discuss about two ways in learning here. My approach is learning in software/web development. In software/web development, the developer have to write their code using text editor or IDE. If they are using text editor, then the code must be interpreted and compiled using different software (not the text editor itself). But if they are using IDE, it will just a button click ahead to build things. Then, what I say instant development learning is learning using the IDE (even for the first time) and step-by-step learning is using the text editor first, then IDE after gaining much knowledge.

This writing is made because I once learn using the step-by-step technique and I met someone (let’s just say that someone is a she) using the instant technique. She is older than me and I can say, she produce more than me. But one day, she met a failure in her application and she gets confused because her IDE just do all task. I just simply don’t want everyone to feel the same experience, that’s why I write this post.

Okay, let’s start the discussion. IDE is a powerful tools. Can detect error, can fix error, can do anything that the text editor mostly can’t do. Text editor is just a tool where you can write the code and that’s all. Text editor that I use is EditPlus. It is quite powerful because it has a feature that most text editor don’t have, template. Now, IDE is giving simplicity to coder so they don’t have to think about any details so much. While in text editor, they do not even recognize the other class (if you are using object oriented programming) that you have made in the other file. But as I said before, because IDE is giving everyone (newbie or expert or even guru) so much feature to ease the work, it will spoil those newbies and make them lazy to understand about what really happen when they type something.

For example, I choose NetBeans IDE. NetBeans have a feature in JavaME to let the user build an application using visualization. Don’t expect EditPlus to do so. But then later on, a newbie come and build an application using the visual. Mostly they will just drag and drop and finish. When other people look on their code, mostly they say, “What is this? I can’t understand it clearly!” While there’s another newbie that using the text editor. He can write as he want, put comments as he want, and let the compiler tell him about the warnings, errors, and he fix it by himself. Also, he only write codes that he needs and what he thinks the other may need (like comments). Then other people look on their code and say, “You write efficiently, great!” I don’t put a bad mark on NetBeans, but newbies that using it mostly do the same mistake, bad dirty codes. Then because of the knowledge of writing good and efficient code, the newbie that use text editor before can use the IDE much more efficient later on. While the other newbie is busy in disturbing the other to help him understand.

What I want to say is, IDE is created to ease people in building their application, not to ease people in learning how to develop application. So, while we are learning, why don’t we use the simple one, understand and use the more complex one in far more efficient way?