There’s a small back story to this entry. Ive been working with an open source content management system for my company Magicomm and it eventually came time when we decided we were going to start our own blog. My goal was to use the preexisting framework of the CMS to smoothly integrate the blogging software into the back end of the system. It turns out this was the easy part….

So now the goal of this entry. When it came time to output the data into your common blog format I found that their were some small things that helped my blog get indexed by popular blog directories as well as other assorted social media aggregations.

So ultimately I’m assuming you understand the general format and benefits of a blog. You’ve got your title, author, timestamp, and a post of some sort. Other optional features include keywords, permalinks, comments, and an RSS feed.
Now I want to go into a little more detail about the code side of this and show you where some simple HTML syntax separates the blog from the..um… not-blog.

Rel-tag

First I’ll talk a little about my favorite blogging feature, the ‘rel-tag‘. Rel-tag is basically a keyword that physically sits on your screen as apposed to META keywords which hide in your page’s header. Now when you’re displaying ‘rel-tag’ that relate to a specific post you use the relationship attribute of the anchor tag to define the hypertext as a ‘tag’.

1

<a href='http://www.magicomm.biz/tags/great+blog' rel='tag'>great blog</a>

As you can see it it pretty simple to establish a tag. Basically rel-tag is a MicroFormat and what you are doing is declaring that this link is an author-designated keyword for this post. Also note that in the URL of the link I’ve separated the two words with a + sign instead of a space (You could also use %20). You want to try and be sure that your tags relate and are appropriate for your post. Alot of social media aggregators use this information along with specific information in your RSS feed to categorize your post and you can often see your tags displayed on sites such as technorati.com and mybloglog.com.

Permalinks

The second thing I would like to talk about are permalinks which are also often called bookmarks. Permalinks are basically links back to a specific entry that will never change. This makes them ideal for bookmarking which is why it comes as no surprise that the following helps you establish a permalink/bookmark.

1

<a href='http://www.magicomm.biz/blog/cross_media_is_now_our_life' rel='bookmark'>Cross Media is now our life!</a>

As you can see we once again use the relationship tag to define the Permalink. This is not always necessary however Ive found that certain social media sites use the bookmark relationship to determine if this link is a permalink or not.

RSS

Now last but not least there is the RSS feed. I could go on forever about the different formats and everything you can stuff into a solid feed, but i wont. The only thing i want to mention here is how to make your feed available to social media sites (seems to be the theme here). Basically what you do is use a combination of rel=”alternate” and type=”application/rss+xml” to define a META link to an RSS file.

1

<link rel="alternate" type="application/rss+xml" title="MagiBlog - RSS" href="http://feeds.feedburner.com/Magiblog" />

Thats pretty much it. I hope that between the 3 things I’ve showed you and some of the resources ive presented you should have a social media friendly blog thats ready for the masses.

These are just a few ideas to get you started. Any true SEO expert will tell you there is a lot more that goes into it including but not limited to incoming link monitoring and maintenance, following Google’s new search engine patents, optimizing for keywords, etc.

So there are 3 main things to remember when optimizing your website:
1) Choose appropriate keywords:
This includes making sure you have those keywords in 3 different places; your site content, your Meta content, and your incoming links. Also don’t use your keywords too much, this is known as “stuffing”, but too little and Google won’t index your site properly.

2) Friendly URLs:
The following is BAD:
mysite.com/index.php?car=jeep&type=wrangler
This is GOOD:
mysite.com/jeep/wrangler
The difference is easy to see, one is easier to read for both humans and search engines. Also it is a good thing to be specific, so use your keywords in your URL where you can.
To accomplish this most people use Mod-Rewrite (Google it). Another alternative is to use a Content Management System for your website that will automatically create friendly URLs for you. I use PHPwcms but other good ones are Drupal and Mambo but I found mine at http://www.cmsmatrix.org/.

3) QUALITY incoming links to your site
This is the most important in my opinion and usually the hardest to pull off.
Basically the idea is Google will boost your site up on the rankings if you have alot of incoming links from sites similar to yours. This does not include link compilation sites and Google might penalize you for this. Usually the best thing to do is contact the administrators of similar sites and request an affiliate link in exchange for a service or a back link. Another good strategy is to put out press releases with your sites link in it.

Extras:
So if you can’t tell, Google is the most popular search engine out there getting roughly 91 million searches per day. That’s a little less than half of all searches done daily. So it’s usually best practice to optimize your site for Google. If you want more information just contact me through facebook and I can give you some extra pointers.

So i wanted to add the little icon next to my URL in the address bar so i went on a hunt for the easiest solution (kinda counter-productive as i could have just downloaded a program however I so love to find new SAAS apps online). So i finally ran across this site. This was pretty much exactly what i was looking for and it was very easy to use. I went on and created 7 icons:

I ended up using the first one i made for my site, but they still all look kinda cool.

So I’ve been working on this site on the side for a couple of weeks now. Ive mostly just been waiting around for content for the site. This was a different kind of site for me to create because I needed to find a way to make it easy to update for someone who has little or no knowledge about the web.

First thing I did was use photoshop to automate the thumbnail creation process. This turned out to be more useful than i thought as it also let me create medium size pictures for viewing within the site as well as very customizable watermark options. This was all part of the “Web Photo Gallery” option which basically created a little mini site on the fly. This is nice and all however if the photographer ever wanted to edit the site or add more pictures all he would know how to do is create new sites on top of the old one. This could work, however i wanted a more logical solution.

Now that I have two folders (thumbnails and images) All the client would have to do is drag the contents of the folders into their respective folders on an easily accessible ftp account I’ve made for them.

Next, I wrote a pretty basic PHP script that reads the contents of the folder, how many files are in it, and displays them in a 4 x 3 table with a POST variable controlling the pages. This was my first attempt at this kind of organization tool but it worked on the first try.

My next step is to generate Titles for the pics using the pics built in meta data. This is so the client can add titles and photo information from within Photoshop, making the process that much easier. Making this site has been a wonderful learning experience. Go and check it out.

So I was tying so hard to keep my portfolio XHTML valid. When i added the Lightbox++ script (which is a modified version of Lightbox) my portfolio had some errors according to the W3 standards. So after doing a little research and looking around I came to this solution.

First, the problem was that the doctype wasn’t recognizing the height and width attributes i was setting in the tag.

So here was my solution.

1
2
3
4
5
6

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" [
	<!ATTLIST a width CDATA #IMPLIED>
 
	<!ATTLIST a height CDATA #IMPLIED>
	] >

NOTE:Problem with this fix is that it leaves a single ‘>’ at the top of your page