Category Archives: HTML

Using META TAG Refresh to redirect

There are several ways to do a page refresh or redirect it to a new one. It can be done in the client side, with HTML or a script language, or in the server side with PHP or in the server configuration directly. The most simple way is using the HTML to tell to the browser what to do, using a meta tag. Besides, the are many simple hosting services that don’t support server side scripting or don’t let clients to change the servers configuration (in apache this can be done with an .htaccess file).

This feature can be very helpful, besides it’s very easy to use. Imagine that we have a website with several languages organized in a folder structure with the language codes. We’ll need to redirect the visitor to the default language. This can easily be done with meta tag refresh.

META tag syntax

The syntax of the refresh META tag is very simple.

<META http-equiv=”refresh” content=”<time>[;URL=<new url>”]>

  • The time, in seconds, represents the time that the browser will wait before refresh the page or redirect it to another one. If you set it to 0 (zero), the browser will redirect to the page without waiting. This use disable the back button of the browser, it behave like there is no initial page and only the one that we redirect the visitors to;
  • The url is an optional parameter. With this parameter we can define the URL of the page that will be loaded by the browser, this is the page that you want the visitor to redirect;

Examples

  1. Using the META tag to refresh or reload the site every one minute (60 seconds)
    <meta http-equiv=”refresh” content=”60″>
     
  2. Using the META tag to redirect to a new page without waiting.
    <meta http-equiv=”refresh” content=”0;url=en/index.html”>
     
  3.  Using the META tag to redirect to a new page after 2 minutes (120 seconds).
    <meta http-equiv=”refresh” content=”120;url=en/index.html”>

Things you must be aware

This META tag is an easy way of doing a refresh or a redirect. However, it has some disadvantages.

  • Using this method to redirect a page to another the crawlers, like Google bot, won’t keep your page rank in the new page. To do that you need to send a 301 redirect either with server script or the server configuration;
  • If the time defined in the META tag refresh is too small, some old browser with a slower connection can disable the browsers back button, even if you don’t define 0;
  • The use of the META tag refresh to reload or redirect a page should be done carefully in terms of usability. Some visitors may think that your site can be a security threat or simply be hungry about seeing the page reloads while he is reading it.

If you are developing a website according to the standard XHTML 1.0 you’ve to use the tag like following:

<META http-equiv=”refresh” content=”<time>[;URL=<new url>”] />

Show PNG transparency in IE6

Every web developer knows that develop cross-browsers web applications is a real pain in the ass. To complicate the things a little bit, the change from IE6 to IE7 bring many differences that turn the develop process harder.

One key limitation in the old Internet Explorer 6 (IE6) is the Portable Network graphics (PNG) transparency problem. In this version of IE, pages that contain PNG images with transparent background are shown wrong. The background of the image is shown gray rather than transparent.

To solve this problem Microsoft recommends that web developers use the AlphaImageLoader filter. This is specific IE CSS filter that can be used with images to show the PNG transparency. The filter can be used as shown below:

<html>
<head>Show PNG transparency in IE6</head>
<body style=”background-color:#FFFFFF;”>
<!– Div that handles the transparent image –>
<div style=”height:400; width:400;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
src=’image.png’, sizingMethod=scale);” >
</div>
</body>
</html>

AlphaImageLoader has two parameters, the src and the sizingMethod. The first one is used to set the source image file to be filtered and the second one is used to set the sizing behavior that the object and the image have. The sizingMethod can take three values:
crop – Clips the image to fit the dimensions of the object;
image – Default. The object fits the dimensions of the image;
scale – The images changes its size to fill the object;

This CSS filter can be used as an object in JavaScript. This way, there is another property called enabled to set or disable the filter.

Form more information about AlphaImageLoader filter check MSDN website.

WordPress blogs SEO

Today there are so many blogs that if you want to let people know that you have one, you must try to optimize it. Sometimes this optimization is right in front of our eyes and small changes can make a difference. In this post i’ll give some advice to improve your wordpress blogs index position in search engines. However, this are not proved actions to improve blog indexing, but are some SEO improvements discussed in SEO world.

Permalinks

Permalink is the permanent URL of your blog pages. This is the URL that visitors will see and that other web bloggers can use to refer a post of your blog. WordPress allow the configuration of the URL format. It offers different options, some of then very ugly and not well accepted by search engines. However, you can define your own format. This way you can either have a good and simple URL and a format that the spiders (search engines bots) like and extract your keywords from it.

The format that i choose to my blog and that i recommend is the “/%category%/%postname%”. The result is a simple and friendly URL that is parsed by the spiders. This bots get the keywords in the URL using them to define your pages value. If you’ve a URL with the date of the post or with a code what the meaning of the URL?

Visit WordPress permalink page

Post and category slug

To complete the benefit of permalinks, the WordPress allows you to choose the name that appear in the URL for each post or category. With post and category slugs you can define a much friendly URL. By default, the WordPress put your post title separated with ‘-‘. Some keywords are not necessary and can be removed. This way you can define your category and post parts of the URL format defined above.

Meta Tag

Another step to improve your blog value to the spiders, is defining some meta tags. Beside the definition of the page title, one of the most important information, we must define the description, the keywords, and other tags.

Bold fields

Some SEO professionals says that we must put strong tags on the keywords that we want to highlight either to the users an to the spiders.