Follow and Index

There is a meta tag named “robots” that we can use to tell search engine to index a page and following the links on it or not. By default (or if you don’t add this tag) search engine will index the page and following the links on it.) The following are other three options,

<META NAME=“ROBOTS” CONTENT=“INDEX, NOFOLLOW”>
<META NAME=“ROBOTS” CONTENT=“NOINDEX, FOLLOW”>
<META NAME=“ROBOTS” CONTENT=“NOINDEX, NOFOLLOW”>

You may also see the “a” tag with attribute named ‘rel’ having a value ‘nofollow’ in it. For example, in the WordPress comment area, all links there have ‘rel=”nofollow”’, which is a little bit different. This attribute was invented by Google, and means those links won’t get any credit for PageRank when Google ranks websites, but Google may still index and follow those links. The main purpose of this attribute is preventing comment spammers who want to promote their websites’ PageRank by posting spam.But for the link exchange, you should not add this attribute.

Fixes of Google Syntax Highlighter for WordPress

Google Syntax Highlighter for WordPress is a popular plugin. I have seen many sites using it to highlight code snippets within WordPress. I also use it in this blog. Overall it works fine. But there are some problems.

CSS problem

Depend on your WordPress theme, you may or may not have this problem. See the screenshot below,

You see the green bar on the header is not properly aligned, and the bottom of code snippets block is very thick. Based on the definitions in SyntaxHighlighter.css, it should not look like this,

.dp-highlighter .bar {
padding-left:45px;}

.dp-highlighter ol {
background-color:#FFFFFF;
color:#5C5C5C;
list-style:decimal-leading-zero outside none;
margin:0 0 1px 45px;
padding:0 !important;
}

See both ‘.bar’ padding-left is 45 px; and ‘ol’ margin-left is 45px and no padding-left, so they should be aligned. However, I used firebug and found margin definition of ‘ol’ was struck off. And then I figured out this definition was actually overrode by another definition in my WordPress theme. The solution is simple, Add ‘!important’ after margin definition to prevent it from being overrode.

.dp-highlighter ol {
background-color:#FFFFFF;
color:#5C5C5C;
list-style:decimal-leading-zero outside none;
margin:0 0 1px 45px;
padding:0 !important;
}

Non-Standard Attribute ‘name’ in <pre>

Google Syntax Highlighter for WP requires to enclose your code snippet inside “pre” tags and add “name” attribute with value of “code” and then set “class” attribute with the supported language, like the following,

 <pre name="code" class="php"> .... </pre>

However, the “name” is not a standard attribute of <pre>, so when you use it with WordPress WYSIWYG post editor or other WYSIWYG post editors like Windows Live Writer, all the “name” attributes get removed. Therefore every time you change the post using WYSIWYG editor you have to go back to HTML view and add name attributes again.
I looked into the source code and looks like it is easy to fix and use standard attribute instead. Here is how,
0. Make copies of shCore.uncompressed.js and shCore.js (compressed version) under “/wp-content/plugins/google-syntax-highlighter/Scripts”.
1. Open shCore.uncompressed.js in any text editor.
2. Go to line 603, you should see the line,

if(tags[i].getAttribute('name') == name)

replace it with

if(tags[i].getAttribute('class') == name)

3. Go to line 635, you should see the line,

element.attributes['class'], element.className,

replace it with

element.attributes['lang'], element.className,

4. save and compress this file. (You can use this online tool to minify JavaScript) and then replace shCore.js with this one.

And then you are able to use the following code to enclose your code snippet,

 <pre class="code" lang="php"> .... </pre>

Seems to me using ‘lang’ attribute make much more sense than using ‘class’ attribute to specifies a language of code snippet. Not sure why author of GSH picked ‘class’.

Note that if you already used GSH plugin for while, this change will break your existing code snippets. If you have too many code snippets and it’s painful to update every attributes of ‘pre’ tag, then you may try another solution by commenting out the line 603,

//if(tags[i].getAttribute('name') == name)

By doing this, you can just use the following code the enclose your code snippet

 <pre class="php"> .... </pre>

And your existing snippet having “name” attribute in ‘pre’ tag will be still working.

Before and After SEO

CaiApps has been launched about one and half months. Google does index it (about 43 indexes as the time I am writing this.), but only a few of visitors came from Google, which is reasonable, for my site is new and has only a few articles. I uses a very simple way to check if Google index my site by entering “site:caiapps.com” in Google. A few days ago, when I check this, I found that most of pages from my sites indexed in Google had the same description. Finally, I figured out that it’s because I set up my blog theme incorrectly. The theme used in CaiApps is modified from a theme named simplo by site5. When I set up this themes, it allows me to enter Meta Description and Meta Keywords for SEO purpose. I thought they are for the homepage only, but actually those options are associated with header.php and crossed to every single page, no matter what page content it is. I think duplicated meta description is bad. The following is a screenshot I took before I did SEO for my blog,

So I searched around to find a plugin for wordpress SEO. There’s a lot and I picked ‘All in One SEO’. It’s pretty easy to set up this plugin. Before setup this plugin’s options, make sure to remove existing Meta description and Meta keywords and Canonical link if any from your header.php. You might also include wp_head() function in your header template (right before ), which is a function All-in-one uses to populate SEO header tags. Some theme might takes this function away like simplo.  Basically I used the default settings, but choosing “Autogenerate Descriptions”. Note that after installing all-in-one seo plugin, you will see a block at the bottom of “Add New Post” page allowing you to provide seo title, description, and keywords for every single post. So by selecting Autogenerate Descriptions, if you don’t provide all-in-one description, it will use Excerpt, and if you don’t provide Excerpt, it will use a first 160 chars of your post content as description.

And now, after I used all-in-one seo plugin for a week, I run “site:caiapps.com” in Google, oh yes, I see the changes. The description of pages are much better related to the page content. The following is a screenshot I took before I did SEO.

Based on my understanding, if your site is a new site and you don’t have any meta description, then Google may pick some words from your page content, but don’t quite relevant. If you provide meta description, then Google most likely will take it regardless your page content, but there is indeed some exception, for example in the first screenshot (i.e, before seo), you can see the description of Stick on Facebox is exactly from the first paragraph of that article.

Even your articles in Google index have a good description, it does not mean your articles have a good position in the search results to let people find them. So to me SEO is a small part, and writing a high quality article is key.

PS: I enter “site:caiapps.com” in Firefox, IE, and Chrome almost the same time in the same computer, I see the same results form Firefox and IE, but different result in Chrome (I have tried several times) . I know Google search result could be from different servers, but different search result in Chrome is a little bit surprised me.

Blog to Facebook & Twitter

Everything is difficult at the beginning. Too much is going on in this site/blog. I plan to update blog’s theme, promote it by adding FaceBook fan page and linking to twitter, and setup blog feed maybe on feedburner, etc.

UPDATE: I just found networkedBlogs application actually does not do the auto post for me. Here is an explanation.

We (networkedblogs) keep doing that 24 hours a day, every day, for every blog. As you can imagine, this process of constant checking puts a lot of load on our servers, so we can’t do it too often. So we came up with a fare system to pull blogs that has more followers more often as explained next.

So for a brand new blog and brand new fan page, the feed only will be pulled every 12 hours. Although I can manually pull the feed and manually publish it thru networkedblogs application, it’s not automatic at all. So the real solution will be to write an application by myself and run a cron job to pull the feed and post to Facebook or Twitter. I will write a tutorial on this when I get it done.  <— end of update–>

Today I want to show you how I did to connect my blog to Facebook and Twitter. The goal is when I write a new post, it can be automatically post to Facebook and Twitter.

  1. Create a Facebook account if you don’t have one. This is easy just need to go http://www.facebook.com, and open an account.
  2. Create a Facebook fan page. If you are new to Facebook, it may take some time to figure out how to create a Facebook page, for there is not a visible link to create a page. But you can just use this link, http://www.facebook.com/pages/create.php
  3. When you are creating a page, you have two options, create a official page or a community page. What I did is create a official page for my “brand” – caiapps.com :-)
  4. After the page is created, you may see some url, like, http://www.facebook.com/pages/Cai-Apps/136134553096471?created, anything before “?created” will be your Facebook page url. You can keep on updating your fan page information, but basically, you can start using it and your fan can write something on your wall already.
  5. There is no a visible link on your Facebook homepage to link to the page you created. In case you forget the url,  you can click Account (on the top right on your Facebook homepage), and then click Manage Pages, and then you will see your page(s) on the popup window. You may ask if there is a short link of your fan page. The answer is “yes”, but it is not available to your page until you have at least 25 fans. After some day your fan page hits 25 fans, what can do is using this link, http://www.facebook.com/username/, again this link is not visible on your login page. (Humm, Facebook is not user friendly, isn’t it?)  Please keep in mind, by default, this link is used to set up username for your Facebook homepage, not other pages (or fan page) your created. As long as the name is taken, you can neither edit it nor assign it to other pages. So make sure don’t set an username, which you want to use for your fan page, to your home page. Unfortunately, this was exactly a mistake I just made. I intented to use http://www.facebook.com/caiapps/ for my blog’s fan page, but now it is become my personal Facebook homepage. Anyway, the fan page is here. Hopefully, it can reach 25 fans soon, then I can set up a short url for it.
  6. Ok, now you have a Facebook fan page, but how to automatically post your blog to there. That needs a Facebook application, and you can create one by our own, but what I use is created by Networkblogs, you can start for there. It takes some steps, but should be easy to follow.  (I will not give you the details on the step. If you have any questions, feel free to leave comment, and I would try my best to answer your questions)
  7. Setting up twitter is mush simpler. Go to twitter.com, and create an account, and you will get a short and pretty url as long as it has not been taken. You can now follow my blog at http://twitter.com/caiapps.
  8. There are many plugins out there allowing you to feed your post to twitter. Because I setup the post to Facebook, I just simply add connection between Facebook and Twitter, so whatever updates on my Facebook would be updated on my Twitter. Facebook Twitter page is right here, http://www.facebook.com/twitter/

That’s it. Hope this helps!

Post to WordPress using Windows Live Writer

WordPress comes with a pretty functional post editor. Most of time you can use it with no problem. But personally, I like use desktop blogging tool. Windows Live Writer (WLW) is the best desktop blogging tool I have ever used.

First, there might be some advantages by using WLW,

  1. You don’t need to worry about losing your unsaved work, when your browser is frozen for some network issue.
  2. You get more room in WLW when editing your post (No left navi and you can also close right taskpane by ‘F9’), which is good for a small screen user.
  3. There are many plugins out there,  which you can download for free and make your posting much easier. For exmaple, you can use”Source Code Formatter” plugin to post syntax highlighted source code in your articles.
  4. You can control multiple blogs in one place, and if you save your password, then you don’t need to login to write a post.

To setup WLW to write a post is quite simple,

  1. Enable Remote Publishing in your WordPress Admin Panel
    1. Settings->Writing->Remote Publishing
    2. Check Atom Publishing Protocol and XML-PRC
  2. Download/Install Windows Live Writer
  3. Start WLW, and add blog account (on the top menu, Blogs->Add Blog Account, see below)
  4. Follow the instruction to add your blog account. Basically, what you need to provide is blog url, user name and password.

That’s it! If you are a Windows user, it should be very easy for you to get familiar with how to use it. Hope this helps for a beginner, and I will come back sometime with some WLW tips.