Posts Tagged ‘website navigation’

Tweaking WordPress – Sitemap

March 31st, 2010

 

Way To Improve Your Content Overview

 

 

 

I was looking for some site map solution that would satisfy my picky needs (to be seen as wp page not as wp post and to show list of categories with posts inside them). Sitemap is cool webmaster tool. It helps visitor to easy navigate through your site. It shows page structure and also, some sitemap WordPress plugins create sitemap.xml file that is very useful when search engines map your site. I found couple that were partially good enough. First was WP-Archives by Jim Penaloza Calixto (more info at http://blog.unijimpe.net/, wp plug-in download url – http://downloads.wordpress.org/plugin/wp-archives.zip). It was easy and simple to install and configure. It is installed as post and it shows posts in chronological order (but not what category they belong) with day/month info. The second was PS Auto Sitemap by Hitoshi Omagari (more info at http://www.web-strategy.jp/wp_plugin/ps_auto_sitemap/, wp plug-in download url – http://downloads.wordpress.org/plugin/ps-auto-sitemap.zip). It had visually all that I wanted (categories with list of posts that belong to them), but it was implemented as a post. I didn’t want that (yes, I know I could easily put it in sidebar as a link, but I wanted it to be on the top with other page links). So I was using the WP Archives plug-in for a while. It looked like this:


Old Sitemap

 

When I managed to find more free time, I decided to fix this. I used PS Auto Sitemap plug-in and did some simple code change in php.

After plug-in installation, I edited header.php of my current theme and I put something like this at the place where pages are being listed:

<li <?php if($post->ID == xxx) echo ‘class=”current_page_item”‘; ?>><a href=”http://yoursite/post-name-xxx”>Post Name</a></li>

Here, xxx is ID of your plug-in post that you can find in your post URL at the end, or in _posts table of your WordPress database. In my case ID was 391, table name was wp_posts, page url was www.geekwidget.com and post name was Sitemap Widget, and it looked like this:


Header Tweak

 

Now, it was still a post. In some themes, like in one that I am using, it had previous post and next post links whenever a post was separately opened. Since I was picky, as mentioned, I wanted to change that, too. I edited single.php in same folder and put something like this:

<?php if ($post->ID != xxx) { ?>

<div>
<div><?php previous_post_link(‘&laquo; %link’) ?></div>
<div><?php next_post_link(‘%link &raquo;’) ?></div>
</div>

<?php } ?>

The xxx part was again plugin post id. In my case it looked like this:


Single Tweak

 

After that I had what I wanted:


New Sitemap

 

 

Google’s SEO Starter Guide – Images

March 23rd, 2010

 

Optimize Your Use of Images

 

 

 

Images may seem like a straightforward component of your site, but you can optimize your use of them. All images can have a distinct filename and “alt” attribute, both of which you should take advantage of.

The “alt” attribute allows you to specify alternative text for the image if it cannot be displayed for some reason.

 

 


SEO Guide Images1


Our alt text here is a brief but accurate description of the image

 

 

Why use this attribute? If a user is viewing your site on a browser that doesn’t support images, or is using alternative technologies, such as a screen reader, the contents of the alt attribute provide information about the picture.

 

 


SEO Guide Images2


Our image wasn’t displayed to the user for some reason, but at least the alt text was

 

 

Another reason is that if you’re using an image as a link, the alt text for that image will be treated similarly to the anchor text of a text link. However, we don’t recommend using too many images for links in your site’s navigation when text links could serve the same purpose. Lastly, optimizing your image filenames and alt text makes it easier for image search projects like Google Image Search to better understand your images.

 

 

Good practices for images

 

• Use brief, but descriptive filenames and alt text – Like many of the other parts of the page targeted for optimization, filenames and alt text (for ASCII languages) are best when they’re short, but descriptive.
Avoid:
•• using generic filenames like “image1.jpg”, “pic.gif”, “1.jpg” when possible (some sites with thousands of images might consider automating the naming of images)
•• writing extremely lengthy filenames
•• stuffing keywords into alt text or copying and pasting entire sentences

• Supply alt text when using images as links – If you do decide to use an image as a link, filling out its alt text helps Google understand more about the page you’re linking to. Imagine that you’re writing anchor text for a text link.
Avoid:
•• writing excessively long alt text that would be considered spammy
•• using only image links for your site’s navigation

• Store images in a directory of their own – Instead of having image files spread out in numerous directories and subdirectories across your domain, consider consolidating your images into a single directory (e.g. brandonsbaseballcards.com/images/). This simplifies the path to your images.

• Use commonly supported filetypes – Most browsers support JPEG, GIF, PNG, and BMP image formats. It’s also a good idea to have the extension of your filename match with the filetype.

 

Google’s SEO Starter Guide – Heading Tags

March 22nd, 2010

 

Use Heading Tags Appropriately

 

 

 

Heading tags (not to be confused with the HTML tag or HTTP headers) are used to present structure on the page to users. There are six sizes of heading tags, beginning with <h1>, the most important, and ending with <h6>, the least important.

 

 

SEO Guide Heading Tags1



On a page containing a news story, we might put the name of our site into an <h1> tag and the topic of the story into an <h2> tag

 

 

Since heading tags typically make text contained in them larger than normal text on the page, this is a visual cue to users that this text is important and could help them understand something about the type of content underneath the heading text. Multiple heading sizes used in order create a hierarchical structure for your content, making it easier for users to navigate through your document.

 

 

Good practices for heading tags

 

• Imagine you’re writing an outline – Similar to writing an outline for a large paper, put some thought into what the main points and sub-points of the content on the page will be and decide where to use heading tags appropriately.
Avoid:
•• placing text in heading tags that wouldn’t be helpful in defining the structure of the page
•• using heading tags where other tags like <em> and <strong> may be more appropriate
•• erratically moving from one heading tag size to another

• Use headings sparingly across the page – Use heading tags where it makes sense. Too many heading tags on a page can make it hard for users to scan the content and determine where one topic ends and another begins.
Avoid:
•• excessively using heading tags throughout the page
•• putting all of the page’s text into a heading tag
•• using heading tags only for styling text and not presenting structure