Codeable info

Understanding Tags in WordPress

Posted on by in WordPress Tutorials

Tags, some people know what they are and some people have no clue. In this tutorial we will discuss tags in WordPress. I hope to give those of you that do know what tags are all about some insight into using them to better optimize your WordPress site. I will also demonstrate a new method for creating image tags that will allow you to have an image heading and improve keywords on your website or blog. For those of you that don’t understand tags at all, I will explain them so you can be up to speed and you too will be able to make use of tags in WordPress after reading this tutorial.

What is a Tag?

A tag is actually an attribute added to the HTML anchor tag technically. A typical HTML anchor or link tag looks similar to this:

web design

Notice the use of the “rel” attribute in the above link. That is what converts the link into a tag. Such tags normally are placed at the foot of an article or blog post so that if the reader of the article or post wants to read more information on the same topic, they can easily do so by clicking on one of the tags provided after the passage they just read.

Adding tags in WordPress

Tags are simple enough to add from the WordPress admin when editing posts. Simply look in the lower right corner of your edit posts or new posts page and you will see a simple form for entering new tags for the post in which you are working on at the moment. Be certain to add tags to each post you make before publishing it so that the tags will show up on your blog. While typically tags will appear at the end of a post, different themes place the tags in different areas of the webpage. For instance, the tags could be either after an article, before an article or in the sidebar. No matter where they appear, they work the same.


Tags and SEO

In the not-to-distant past, keywords were all the rage for moving up higher in the search engine rankings. Today, mostly due to wide spread abuse by web developers and bloggers, keyword stuffing is no longer possible. People used to insert tons of keywords on their page just to get search engines to recognize their page for a certain type of keyword or phrase. Many people took advantage if this by hiding keywords in their page specifically to manipulate search engine rankings. Sure enough, the major search engines all caught on to this less than honest tactic and took preventative measures so that it is no longer possible to manipulate search engine rankings by keyword stuffing. If you use keyword stuffing techniques today, they will actually harm your search engine ranking rather than improve them because search engines actually penalize you now for using such techniques to attempt to fool them.

Today, tags play an important role in SEO because they help link similar content to the content on the page where the tags are found. Of course, the use of tags can either work for you or against you when it comes to keeping a reader on your site, but in almost all cases, search engines look favorably on the correct usage of tags in WordPress or any other website. To make tags work for you, make sure you use mostly tags that link to other pages of your own website or blog instead of an outside site whenever possible. If you don’t have similar pages, it is advantageous to you to create some, otherwise link to external sites because any tag is probably better for search engine rankings than no tags at all.

What do Tags do in WordPress?

In WordPress tags perform several important functions. First and foremost, they provide a way for your readers to continue to read similar content from your blog after they finish reading a post they were particularly interested in. Sometimes the reader might click on a post topic and find out that is not quite what they wanted, but the tag links will provide alternatives that may be closer to what they were looking for. Therefore, tags are an important navigation tool for your blog or websites readers to find what they are looking for.

Secondly, as I discussed above, tags are a great way for search engines to index your site’s pages, posts and articles. Other web 2.0 sites such as also use tags to index your site. Tags are great for search engine optimization when used correctly. Over using tags can cause damage. Stuffing your site with too many tags is akin to keyword stuffing; search engines do not like it and will punish you for it by giving you a lower ranking.

Finally, tags are a way to group together posts with similar content, keywords and categories. WordPress makes use of the archive template to display all posts of a specific keyword, category, date or tag used. You can customize the effect by making changes to the archive.php script in your themes main directory as you will see if you participate in the exercise later on in this tutorial.

How to Add Image Tags in WordPress

In a recent WordPress project for a client of mine, I had to add a unique type of tag to a customized WordPress blog. The client wanted a tag in the upper right corner of each image in blog posts. The trick here was how to get WordPress to associate the tags with the images since the client wanted the tags to describe the image, not the text of the posts. I devised a solution for this by utilizing an existing feature in the WordPress admin and adding a function to it rather than using a custom field or any other more complex WordPress technique.

The first thing I did was took a close look at the image upload feature the standard WordPress admin’s WYSIWYG editor. I decided to go with the title field to use for entering my tag words and phrases. What you enter in the title field is the text that the user will see when they hover over an image in your blog. This worked great for my client because I made it so WordPress displays the title text as a tag above the images in any post. So not only can you see the tag above the image, but you can hover over the image and see the same text. Below I will go over each step of how I did it for those of you that care to try it:

  1. First you need a simple blog post with at least one image. From the admin area, edit that post. In the WYSIWYG editor, click on the image and an image icon should appear in the upper left corner of the image. Click that icon to get to your image settings dialog. See where you can enter the image title? That’s the field I used for my image tags. Enter your tag as a title. Refer to the image below to see what the dialog looks like:

    add media

    See the title at the top? Replace whatever is there with the text for your image tag, then click “Insert into post” and you are done with that part.

  2. Go to your FTP client and navigate to wp-content/themes/yourTheme/index.php and open the file in your favorite text editor for coding.
  3. Find the famous WordPress loop in index.php. It will normally be commented something like: “start loop”, but if you can’t find it, just look for the “the_title()” function which is called from within the WordPress loop. Just after that is where we will add our unique image title code as in the following example block of code. Also, be careful if you use copy and paste to transport the code below. If you copy it from a webpage, some characters could get messed up such as quotes. Many times you have to replace curly type quotes with regular ones like notepad uses for the quotes to be recognized by a web browser.

    			//Extract image title and display it top right of img:
    			//get the content in a php var:
    			$html = get_the_content();//puts current post's HTML in a php var.
    			//Cut out just the img title text:
    			//Get text before img title and after it:
    			$htmlarr = explode("<img",$html);  // $htmlarr[1] has all after <img
    			$block1 = $htmlarr[1];  //has all text following "<img"
    			$titarr = explode("/>",$block1);// $titarr[0] has code inside img tag
    			$block2 = $titarr[0];  //text inside the img tag
    			$titlarr = explode('title="',$block2);
    			$block3 = $titlarr[1];  //has title at start and end with double quote
    			$titlearr = explode('"',$block3);  //complete title is in $titlearr[0]!
    			$finaltit = $titlearr[0];  //assigns img title to variable.
    			<a href=”your taglink.html” rel=”tag”><span class="imgTitle"><?php echo $finaltit; ?></span>

    The above should go after the_title function and before the meta.php include and the_content function. The meta.php and the_content() part of index.php should look something like this:

    			<?php include (TEMPLATEPATH . '/_/inc/meta.php' ); ?>
    			<div class="entry">
    				<?php the_content(); ?>
  4. After fixing your index.php file there are other modifications to be made. Notice where we added the “imgTitle” class to the span just after the PHP code above. You will want to add that class to your style.css script which will be in the same directory as the index.php file where you added the above code.
  5. Next, if you want the image tags to appear in other parts of your blogs, you will want to add the same code as in step 3 above to single.php, archive.php and any other scripts that your theme might use to show the posts in. Most commonly though you will just be dealing with index.php, archive.php and single.php. You could also add most of the PHP code into a PHP function and include it in functions.php instead of putting it inline as I have above, but that is up to you.

That is really all there is to it! Now you have image tags. Some things you could do with them might include creating unique headings to describe the images or the subjects of the images, link to similar images, link to content similar to what is in the images or even just to provide an image title above the image that doesn’t link to anywhere. After all who says you have to use it like a traditional tag? That’s right, no one!


Now that you have completed the WordPress tags tutorial, I hope you have learned to use regular WordPress tags more efficiently. You should at least understand their purpose now. You should understand they are used to help your blog visitors find similar content to what they just read and that they help for search engines and SEO. If you are a more advanced reader, you may have even tried my custom image tag modification for WordPress. Good luck with all of you future WordPress endeavors and above all else, have fun blogging!

Codeable info

Comments (2)

Comment by Patrick Nommensen says:

Very thorough tutorial on WP Tags Ian! I will be referring a few clients to this post for sure. thanks :-)

Comment by Shuvo Habib says:

Really a great Tutorial about WP Tags . Thanks!

Codeable info