How to Use 301 Redirection Without Losing your Search Engine Ranking
Redirection is the process of sending both the site’s human visitors and search engines bots from the original URL to a new URL. This is very useful when restructuring or revamping a website. There are 3 types of URL redirection – 301 redirection, 303 redirection, and meta refresh.
An in-depth understanding of 301 Redirection
If you need to change your website address from your old URL (http://www/oldwebsite.com) to your new website (http://www.newwebsite.com), 301 redirection is your best option; it forwards 90 – 99% of the site’s link juice to the new URL. 301 redirection is the one recommended for SEO.
How does it work?
301 redirection informs both human visitors and search engine crawlers that your website page has been permanently transferred to a new address. Search engine will then pass this information to the crawlers, instructing them not to visit the old address anymore, but instead go directly to the new website. Also, visitors’ won’t even notice that they are being directed to the new address.
However, Note that when a page where you implemented a 301 redirection is not regularly visited by search engines prior to the redirect, then it may take some time for bots to crawl the page and discover the 301 redirection. This means that the transfer of link juice and PR to your new page will depend on how fast the bots can discover the 301 on the old page.
How does it affect your search engine rankings?
When done correctly, 301 redirection won’t have any negative effects on your current search engine rankings. Here’s why:
After implementing a 301 redirect on a page, search engines will remove your old site from their list, index your new site for future crawls and pass all link juice, the PR and everything SEO-related, to the new address.
When should you use 301 redirection?
301 redirection is ideal if:
- • You are migrating your site or part of your site – if you are restructuring the URLs of your site’s internal pages from this format: http://www.websitename/categoryname/postname.htm to this: http://www.websitename/postname.htm, then you should use 301 redirection. You want your visitors, both human and bots, to be redirected immediately to the new page. This also works on site-wide migration.
- • You have an outdated page – if you have pages with expired or outdated contents such an old service or product page, you may want to redirect users to the new and updated page.
- • You have more than one version of your home page – depending on how a website is structured, its homepage can be accessed in different ways:
http://websitename.com/
http://www.websitename.com/
http://www.websitename.com/index.html
http://www.websitename.com/home.html
To be able to direct and concentrate traffic into one place, you need to point all other versions of your site’s home page to the right one, which is usually the http://www.websitename.com/ one.
Final thoughts
Although 301 redirection is fairly easy to implement, there may still be some few hitches which can do significant damage to your website. So, make sure to do some sort of test redirection first with some of your internal pages.
Image by digitalart (freedigitalphotos)
Wasim’s a project manager at Alrayes Web Solutions along with an online SEO consultant & blogger for business at wasimismail.com, specialising in online business.
How to Create Clickable Maps in HTML
It is important that you integrate interactive elements into your site. If you want to show your readers a map of a certain place, for example, rather than just presenting a plain image, it is best to make the sections of the map clickable.
Basically, you will link different sections of your image to multiple pages. The clickable and linkable sections of your map are called hotspots.
Here’s how you can create a clickable map in HTML:
1. Choose a map image with well-defined regions. Use an image editing software to even enhance and thicken borders that separate each region. Save your image in GIF or JPEG format.
2. Find the coordinates of each region. You can find the coordinates of an image by using an editing software. Just hover the mouse on the image and you will get a pair of comma-separated numbers at the bottom of your screen. The numbers represent a point in the image where your mouse is currently at. The coordinates will change as you move the mouse over your image.
3. Create your image hotspots. You can have a circular, rectangular or polygon hotspot.
Rectangular hotspot – you will need the top-left coordinates and bottom-right coordinates of your hotspot region.
Rectangular hotspot format: 108, 124, 250, 110
The first two values represent the top-left coordinated, while the last two values represent the bottom-right coordinates
Circular hotspot – you will need to find the coordinates of the center of the circle and a calculated radius of the circle. The radius of the circle is the distance to its center to any point on the circle.
Circular hotspot format: 285, 400, 43
The first two values correspond to the center of the circle, while the last value represents the radius of the circle.
Polygon hotspot – if the hotspot region can’t be put inside a rectangle or circle, then you need to use the polygon hotspot.
Polygon hotspot format: 76, 97, 50, 68, 90, 82
The above example shows the coordinated of a triangle. Each pair of coordinates corresponds to a point of the triangle.
Before you start with the next step, make sure that you map out all coordinates and label then properly with a name.
4. Name your image map. Use this format:
<map name=”name_of_your_map”>
(insert area tags here)
</map>
Replace ‘name_of_your_map’ with whatever you choose to name your map and insert your tags in the specified section. You can use the syntax provided below:
<area shape=”insert_hotspot_shape_used” cords=”insert_coordinates_here” herf=”insert_link”>
Shape: shape value can either be rect, circle or poly
Coords: the coordinates of your shape. Consult the mapping notes you’ve made in Step 3.
Href: the webpage URL where you want to redirect your readers after they click on a hotspot section
5. Place the image map in your page. To display the map in your web page, you should use the following syntax:
<map name=”name_of_your_map”>
<area shape=”rect” cords=”125,170,100,85” href=”http://www.firstlinkhere”>
<area shape=”circle” cords=”159,400,40” href=”http://www.secondlinkhere”>
<area shape=”poly” cords=”76, 97, 50, 68, 90, 82 href=”http://www.thirdlinkhere”>
</map>
<img scr=”image.gif” usemap=”#name_of_your_map”>
Image by maple (freedigitalphotos.net)
Wasim’s a project manager at Alrayes Web Solutions along with an online SEO consultant & blogger for business at wasimismail.com, specialising in online business.
What Every Small Business Website Needs
The purpose of having a website is for your customers to have easier access to your products and services and for you to be able to extend your reach, cater to a diverse set of your customer base, and ultimately, grow your business.
How you structure and lay out your site elements will have a great impact on the conversion rate of your site. Following are tips to help you have a business website that can effectively convert visitors to loyal customers:
1. A clear branding. Your visitor should immediately know what your site is all about and what it is you offer. This means that your logo should reflect what it is you do. 
Also, displaying some of your products and services on your homepage will tell visitors that “they have landed on the right site”. This will attract and engage visitors immediately.
2. A simple website address. Again, your domain should represent your brand. It should be easy to remember and easy to type in a web browser. Choose a .com domain as most users think that this is the default extension of every website.
3. A sitemap. This is a summary of all your site’s posts and pages. A sitemap will help visitors navigate through your site so that they can easily find the information they came for.
4. An easy-to-find contact info. If you want your visitors to contact you, make it easy for them to get in touch with you. Lay out your contact details clearly on a page. Make sure that you provide them more than one means of reaching you – provide an email address, a phone number and a business postal address (if you have one).
Also, include your “Contact Us” page in your site’s main navigation menu. Visitors are used to finding the contact page in the upper right-hand of your home page, place it there.
5. Ask testimonials from your customers. Honest reviews from real people will add value to your online business. This will help your potential customers trust you.
6. A compelling call-to-action. That’s what call-to-actions are for – compel. Tell your visitors what you want them to do: call you for a free quote, opt-in for free ebooks or add products to their carts.
Make your call-to-action catchy by choosing a color that stands out.
7. Know how to promote your site. As an online business owner, at the very least, you should be able to know how to promote your products and services using basic SEO. Utilize social media and other networking sites so that more people can stumble on your website.
8. Always have fresh, quality content. If you want first-time visitors to visit your site again, provide them quality information. Returning visits mean repeat business.
9. Choose a reliable hosting company. Make sure that your website is hosted in a secure platform and that it is always accessible 99.99% of the time. If your site is down because of hosting issues, you will lose visitors. Yes, they won’t wait for your site to go back up. They’ll browse over the web and probably land on your competitor’s site.
Image by KROMKRATHOG (www.freedigitalphotos.net)
Wasim’s a project manager at Alrayes Web Solutions along with an online SEO consultant & blogger for business at wasimismail.com, specialising in online business.
Understanding JavaScript’s 3 Most Basic Design Patterns
Design patterns are software solutions that can be used over and over again to solve a specific type of problem frequently encountered when developing software applications. As a developer, you need to keep updated with all the available design patterns out there and you 
must have basic understanding on when to apply them.
Types of design patterns
Design patterns are grouped into several categories. Explained below, with examples, are the 3 most important types of design patterns:
1. Creational Design Patterns - focus on the different ways of creating objects and classes.
Example: Builder Pattern – allows you to construct objects without the need to explicitly create them; you only have to specify the type and the content of the object that you are creating. See the jQuery code snippet below:
var sampleDiv = $('<div id="sampleDiv">This is a div</div>');
//a DOM node is now being referenced by the sampleDiv jQuery object
var sampleText = $('<p/>');
//the HTML ParagraphElement is now being referenced by the sampleText JQuery object
var sampleInput = $('<sampleInput />');
The result of the 3 lines of code above is a jQuery object referencing a DOM element.
By using the builder pattern, you will be able to focus on the type and content of the object that you’re creating instead of spending time to explicitly create it.
2. Structural Design Patterns – focus on the different ways of managing relationships between objects for an application to be architected in a scalable way. These patterns ensure that a change or update in one part of an application is independent and does not affect other parts.
Example: Facade Pattern – provides browser incompatibility solutions while providing users with a simple interface to use. The ready() method is one of the more popular JavaScript library method implementing the Facade pattern.
$(document).ready(function() {
//code goes here });
Other methods implemented using Facade include animate() and css().
3. Behavioral Design Patterns – All object-oriented software systems will involve communication between objects. The purpose of Behavioral Patterns is to provide different ways of organizing this communication.
Example: Observer Pattern – works with a subject and an observer
• subject has several observers interested in its lifecycle
• a subject updates or does something interesting, a notification is sent to all of its observers
• If an observer does not find the update interesting or is no longer interested with future updates, it can then remove itself from the list of observers
Here are 3 methods, supported by most JavaScript libraries, to further describe the pattern:
• publish(data): called everytime the subjetc has a notification to be sent
• subscribe(observer): called everyitme the subject wants to add another observer to its current list of observers
• unsubscribe(observer): called everytime the subject wants to remove an observer from its current list of observers
var observer = $({});
$.subscribe = observer.on.bind(observer);
$.unsubscribe = observer.off.bind(observer);
$.publish = observer.trigger.bind(observer);
//usage
document.on( 'tweetsReceived', function(tweets)){
//code for performing actions and firing an event goes here
$.publish('tweetShow', tweets);
});
//subsribing to the event created above
$.subscribe('tweetsShow', function() {
//code to display the tweets
//publish the action after they're shown
$.publish('tweetsDisplayed');
});
$.subscribe('tweetsDisplayed, function() {
});
The great thing about using design patterns is that other developers have already applied them successfully in the past, plus they are event-based so JavaScript can easily adopt them.
Image by Flickr
Wasim’s a project manager at Alrayes Web Solutions along with an online SEO consultant & blogger for business at wasimismail.com, specialising in online business.
HTML 4.0 – Deprecated Tags, New Tags & Obsolete Tags
To keep up with the fast-changing world of the Internet, the Web Hypertext Application Technology Working Group (WHATWG) and World Wide Web Consortium (W3C) continue to make HTML version updates. HTML 4.0 has now 10 deprecated tags, 8 new ones, and 3 obsolete ones.
Deprecated Tags in HTML 4.0
Deprecated attributes and tags are those that have been replaced by newer HTML constructs. They are still included in the draft but are marked with “deprecated”.
<ISINDEX>..</ISINDEX> Used to allow forms to have a simple string search function. This has been replaced by the <INPUT> form element.
<APPLET>..</APPLET> This tag enables any Java applet to run. This has been replaced by the <OBJECT> tag for better encompassing.
<CENTER>..</CENTER> Used to center text or elements in a particular area. This has been replaced by a <div> tag with the align attribute set to center (align=”center”)
<FONT>..</FONT> This define the font size, color and style. CSS is now being used for character formatting.
<BASEFONT>..</BASEFONT> Used for setting the size of a base font that can be referenced for increasing or decreasing the size. This has now been replaced by CSS.
<S>..</S> and <STRIKE>..</STRIKE> These tags create strikethrough characters and has now been replaced with CSS.
<U>..</U> Creates underlined characters. This has also been replaced by using style sheets.
<DIR>..</DIR> Used to describe a directory list. This has now been replaced by <UL>..</UL>
<MENU>..<MENU> This is used to define menu lists in a single column. <UL>..</UL> has also been used to replace the <MENU> tag.
Deprecated tags will soon be obsolete and are therefore no longer recommended for use.
New Tags in HTML 4.0
From HTML 3.2, 8 new tags were added to HTML 4.0
<Q>…</Q> This works in the same manner as the <BLOCKQUOTE> tag, but is applied to a much shorter quoted sections without paragraph breaks.
<ACRONYM>…<ACRONYM> This is a “phrasal” tag used to define the structure of a text phrase. This tag indicates that the text is an acronym. THE <ACRONYM> tag behaves just like the <STRONG>, <CODE>, and <EM>.
<INS>..</INS> and <DEL>..</DEL> The <INS> tag is used to mark part or parts of a document that has been newly added to the previous version, while <DEL> is used to mark document texts that has been deleted since last version.
<COLGROUP>..<COLGROUP> This tag allows finer control on table formatting by specifying groups of columns that have the same properties.
<FIELDSET>..</FIELDSET> This tag is used to group related form fields.
<LABEL>..</LABEL> This allows labeling of group of elements. The <LABEL> tag can be used together with the <FIELDSET> tag.
<BUTTON>…</BUTTON> This tag can be used to create another form element, allowing you to have a push buttons on forms.
Obsolete tags in HTML 4.0
The tags <PLAINTEXT>, <XMP>, and <LISTING> are now obsolete tags and has been replaced by the <PRE> tag. Tags that are obsolete have already been removed from the HTML specification and are no longer guaranteed to work on some of the major browsers.
The Current HTML Version
Both the WHATWG and the W3C are currently working collaboratively on the development of the new HTML version – HTML 5.
Image by FreeDigitalPhotos.Net
Wasim’s a project manager at Alrayes Web Solutions along with an online SEO consultant & blogger for business at wasimismail.com, specialising in online business.
Our Expertise
Hidden Web Genius Solutions - The Complete Software Solution Provider
Why Choose Hidden Web Genious Solutions
Hidden Web Genius Solutions - The Complete Software Solution Provider
