Google Blogger: staying in control of your content and other tips

[2011-05-30] dev, hack, blogging, blogger

I am very happy with Google Blogger, but that does not mean that your out-of-the-box experience cannot be improved. This post contains tips for optimizing your blog: Avoid the loss of your content, tweak the look, etc.

Avoid losing your content

There are three ways in which you can lose your content:

Google might close down your blog: This happened to me on Google Groups and it is very scary – an automated trigger fires at Google and then all the content that you have written becomes inaccessible. Thankfully (and in contrast to Google Groups), Blogger does have a human-supervised process for appealing against such an act, but that takes time and might not go your way.
Google might lose your content: During the Blogger outage last week, Google lost one complete post of mine.
Comments: Should you decide to host your blog yourself, you lose all comments that people made when you were using Blogger.

The measures to protect yourself are: migratable post URLs, continuous backup, and letting Disqus manage comments. The core idea is to prepare your blog so that you can quickly switch from Blogger to your own hosting, should something happen.

Migratable post URLs

If your URLs have the shape

    example.blogspot.com/2011/05/mypost.html

then none of the links out there that point to your posts will work should Google shut down your blog. That’s because Google owns the domain blogspot.com. What you want instead, are URLs that look like

    blog.example.com/2011/05/mypost.html

The idea is that you own the domain example.com (and thus blog.example.com) and Google only shows your content at that location. Should Google stop showing your content, you can point the domain blog.example.com to your own server and show your content yourself. In order to show your Blogger content at the custom domain, two things must happen:

You must point the domain blog.example.com to a Google server.
Blogger must make sure that all of the absolute links in the blog use the domain blog.example.com (and never example.blogspot.com).

(2) can be configured via Blogger’s custom domain feature (Settings → Publishing → Advanced Settings), where you enter your domain. Note that this only applies to links in the template; you still have to change the links in your content yourself.

Forwarding: Google will even make sure that existing links (that others have made or that you have put into your blog content) still work, by forwarding the old example.blogspot.com URLs to blog.example.com. This should be thought of as a temporary measure to help migrate to the new domain. It makes sure that existing links don’t break all of a sudden and prevents new links from being made that still have the old domain (when people use the old domain in a browser, the URL will be “corrected”). Naturally, you will probably lose this functionality should Google close down your blog.
Tell Google about your new domain: Just in case, go to blogsearch.google.com/ping and tell Google’s search engine about the new location of your blog.

Continuous backup

Continuous backup is a technique for ensuring that you always have a backup for all of your content on your local hard drive.

Downloading a backup: You can download a complete backup of your blog (without images!) via “Settings → Basic → Blog Tools → Export blog”. Doing this regularly is a bit cumbersome, which is why I now edit my content offline.
- Caveat: You only get full posts in your backup if “Settings → Site Feed → Allow Blog Feeds” is set to “Full”.
Offline editing: I now mirror Blogger’s file structure on my hard drive and use an HTML source code editor to edit my posts. Whenever changes need to be made, I make them in the file and copy the new content over to Blogger’s editor (in “Edit HTML” mode).
- File structure: The file contains just the body of the HTML data to make it easier to copy content to the Blogger editor.
- Meta-data: labels and title. I prefix them to the file like this (using the more universal term “tags” instead of “labels”):
```
    <pre>
    tags: computers, blogging
    </pre>
    <h1>My post on blogging</h1>
```
- Images: are a bit more tricky. You can either host the images yourself or go to the Blogger editor, insert the image there (either in HTML or in Compose mode) and then copy the resulting HTML code back to your file.
Benefits of this approach:
- Automatic backup.
- <pre> tags work: The Blogger WYSIWYG editor still does not support <pre> tags well (which are important for code samples etc.).
File downloads: Blogger hosts your text and your images, but files for download have to be somewhere else. A feature called missing files host allows you to create the illusion that the downloads are available next to your post HTML files: Go to “Settings → Publishing → Advanced Settings → Use a missing files host?”, enter a host such as downloads.example.com and your file will seem to be at
```
    blog.example.com/2011/05/mypost/archive.zip
```
while it actually is at
```
    download.example.com/2011/05/mypost/archive.zip
```
It is nice that your URLs are thus closer to the file structure on your hard drive.

Let Disqus manage comments

Use Disqus for comments: It hosts comments to your posts for you. This has the advantage that you can easily migrate your comments from Blogger to your own hosting solution. It also allows you to have dynamic commenting if you host your blog as static web pages.

Install Disqus on Blogger. Disqus’ instructions for doing so are easy to follow. Kudos to Blogger for making something like this so simple.
You can import existing comments. This works well, but authors will be linked to their Blogger profiles and not their Disqus accounts.
Reactions: Disqus collects mentions on the web (e.g. when your post is mentioned in a tweet) and displays them under your post.
Trackbacks: If a blog post B refers to a blog post A, then a trackback allows you to mention that fact under post A. Blogger does not support trackbacks. Disqus provides URLs for receiving a trackback, sites such as the WizbangTech Trackback Pinger let you send a trackback.

Customize the looks of your blog

Show ads inside posts: By default, ads are shown between posts in lists or after all the comments on single-post pages. This post explains how to show them directly after the content, inside the posts, instead. That leads to better visibility on single-post pages.
Better page titles: By default, the title contains the complete name of the blog on every page (as a suffix on single-post pages). These instructions tell you how to change that. On my blog, I display the blog title on multi-post pages and just the post title (without any prefix or suffix) on the page of a post.
Custom favicon: A favicon is the icon that is displayed next to the URL of a web page in many browsers. Blogger now lets you configure the favicon under “Layout”.
Display tweets in a sidebar: Twitter offers several widgets for doing so. The result is HTML code that you paste into an HTML widget on Blogger.

Blog post content

Concise file names: Blogger automatically creates a file name from the title of your blog post. This causes the following problems.
- Non-english languages: The abbreviation doesn’t handle international languages very well: it does not know stop words and umlauts are converted wrong. For example, “Gut für München” becomes gut-fur-munchen when it should be gut-fuer-muenchen.
- Not a good fit. The generated file name does not capture the essence of a post well, because it too closely mirrors the title (a prefix for long titles). Thus, file names tend to be too long and not descriptive enough and become outdated if you change the title later on.
Solution: When you first publish your post, think of a good hyphenated name for the “file” of the post. Enter that name as the initial post title and Blogger will use it verbatim as the file name. After publishing the post for the first time, you can change its title to anything you want, because that won’t affect the file name, any more.
- Problem: Automatic Twitter posts (e.g. via Feedburner) will have the hyphenated title. Solution: tweet your blog posts manually. Bookmarklets such as [1] can help you with this.
- Problem: Google shows the hyphenated title in searches. Solution: Wait until it recrawls your page (which might take a while).
Embedding YouTube videos: The normal way of embedding forces visitors to use Flash. If you copy the embedding code manually from YouTube, there is no such requirement and the video is directly accessible on iOS devices. YouTube allows you to set the dimensions to your liking. On Mac OS, Command-Shift-4 lets you make a screen shot by selecting a rectangle on your screen (while displaying the dimensions of the rectangle). That feature can be used to measure how large your video should be.