Book Cover Book Cover Book Cover Book Cover Book Cover Book Cover Book Cover Book Cover

3 Things You Should Include In Blog Posts (And The Coding To Do It)

A photo of a bandstand with a black and white film effect

As someone with a web design background, I often notice the nitty gritty of blog posts, especially since blogging platforms have expanded the possibility of fully-fledged websites to a whole new lot of people, whereas before it was pretty much limited to those who knew how to code. This is brilliant, because being a good writer, photographer, musician, whatever, doesn’t always come with coding knowledge.

From my own blogging and through reading others’ I’ve noted some elements that are ‘necessary’ but may not be obvious when you’re using a template or the visual option in your admin section. They are things I use on an almost daily basis, so you could say I’m biased, but when I see that someone hasn’t taken advantage of something, for whatever reason, I can’t help but want to let them know how they might have altered the technical presentation, the way Google sees things, and the like, for the better.

So here are a few elements that are important to a website, and the basic ways you can implement them.

Title And Alt Tags

You can use ‘tags’ (code) on images to let people know the subject of the photo, and also to alert screen-readers (for blind visitors) to what the image shows. For example, if you’ve a photo of an Oxford college, I may not know it’s Oxford unless you say so in your blog post. And given that we often don’t actually want to talk about the subject of the photo – we merely want the image to add beauty to the post – it can be frustrating to a reader if they like the photograph but have no idea what it is of. Often an image will only quote a number, for instance if you’ve uploaded it straight from a camera.

There’s a very easy way to let readers know what the photo shows without altering the content of your posts, and that is to include the title tag when you add the image to the post. For example, if I were adding a photo of Worcester College in Oxford I would type the following (where “img href” specifies the location of the image):

<img href=”/myimagefolder/image.jpg” title=”Worcester College, Oxford University”>

Here is the result. Hover your mouse over the image.

A photo of Worcester College, Oxford University

Similarly, the “alt” tag (“alternative”) helps blind visitors who depend on their browser to read text aloud to them, and it can also be used to tell the browser what the photograph shows in general. It comes into play if an image won’t load – if the browser can’t find the photo, this alternative text will be displayed, so if nothing else readers will know there should be an image there. For example, this is what I use when I include a book cover in a blog post:

<img href=”myimagefolder/50shades.jpg” alt=”Book cover”>

Because I use both “title” and “alt” the final result of the book cover coding will be:

<img href=”myimagefolder/50shades.jpg” title=”E L James: Fifty Shades of Grey” alt=”Book cover”>

Depending on the reason for the photo, I might make my “alt” information similar to the “title” information.

An additional reason for adding these tags, if you want to optimise your blog for search visitors, is that Google and other search engines use the title and alt tags to further understand what your page is about. You’re likely familiar with the idea of keywords – the title and alt tags extend the possibilities for adding your keywords to the post.


You may have noticed that nine times out of ten, any acronyms I use on this site have a dotted line under them. If you hover your mouse over the acronyms you’ll see that the full phrase pops up over the letters. Using this – adding the full term without losing the abbreviation – is great because there will always be acronyms that some people do not know, and including the full phrase means they don’t have to go to Google and search for the meaning. (And searching on Google is difficult in these cases because many people use the same acronyms for different phrases.) Terms like ‘TV’ ‘DVD’ and ‘DNA’ are pretty universal and transcend cultures, but if you think of ‘ARC’, for example, how many casual readers will know that that means ‘Advance Reader Copy’? I know I had to Google it when I first became a book blogger.

If you want to provide acronyms on your blog, the coding is very simple. You include two tags around the acronym itself. The basic structure is full phrase, the acronym itself, then the closing tag. Examples:

<acronym title=”Advance Reader Copy”>ARC</acronym>
<acronym title=”Lord of the Rings”>LOTR</acronym>

To see the result, hover over the following text: ARC.

Using acronyms makes your posts more reader-friendly and limits the chances of you losing readers due to them not being able to understand your book-industry terminology.

The copyright symbol

This is one to use if you want to do things ‘correctly’. It’s easy enough to copy the copyright symbol from, say, a Microsoft Word document, but sometimes an Internet browser won’t show it properly. To combat any issues, there is a simple piece of coding that will produce a text-friendly version:


In other words if I’m writing “[copyright symbol] 2013 The Worm Hole” I will type:

&copy; 2013 The Worm Hole.

Result: © 2013 The Worm Hole.

Both the ampersand and semi-colon are important to include, if you don’t include them it’ll simply say “copy”.

So there we are. Three pieces of coding that are easy to remember and use, and will aid your site in being visitor-friendly and search-engine-friendly, too.

What coding elements do you regularly use on your blog?



January 13, 2014, 7:25 am

I had no clue you could do that with acronyms :-) Thanks!


January 13, 2014, 9:00 am

Thanks for describing these wonderful ways of improving our blog posts, Charlie, and including the actual code using which we can do it. Very informative and very useful. I am bookmarking this page :)


January 13, 2014, 12:48 pm

The idea of coding is something I’m a little scared of. That’s why I use wordpress it does nearly everything for me!

Rebecca @ Love at First Book

January 13, 2014, 11:13 pm

That’s awesome! I’m going to add the &copy to my blog right now :D


January 14, 2014, 4:10 am

These are very useful tips! I’ve always wondered how to include the copyright symbol in my posts.

Laurie C

January 14, 2014, 10:58 am

This was really useful to me, too! I know a tiny little bit of HTML, enough to do a little formatting, add a link, or maybe see where a problem is happening, but that’s it. I’ve been adding the alt text since I found out it what it was for, but I didn’t see why I should also include an image title. Now it makes more sense! I’ll definitely try out all of these tips!


January 14, 2014, 3:03 pm

I am bookmarking this for when I have time to go through my blog and fix all my images! I’m terrible for not affixing them with the correct information.

Audra (Unabridged Chick)

January 14, 2014, 4:52 pm

What a fabu post — thank you! I keep forgetting to use alt tags but your other two recs are new to me — I’m grateful you shared these tips!

Literary Feline

January 14, 2014, 7:50 pm

Thank you for the tips! I definitely need to give some of these tips a try, especially when it comes to labeling my photos.

Judy B

January 14, 2014, 9:13 pm

Thanks so much. Being a fairly new blogger and an old lady to-boot. I am learning by trial and error. I am going to try these tips.


January 16, 2014, 7:20 pm

Hi Charlie,
I don’t know if I will be able to do it myself, but this post is really interesting because you mention things I didn’t know anything about and they are very useful :)) My coding knowledge is non-existent; I always have to ask my boyfriend to make things work!

Lady Bren

January 16, 2014, 7:22 pm

I don’t think I’ve ever seen these tips before.
Sharing by tweet and linkedin as well
Are you on Triberr?


January 19, 2014, 5:38 am

Thank you for posting! These tips have been a lot of help!


January 20, 2014, 12:17 am

I’ve done the alt tag on images before, but never the title one – I’ll have to add that one in. Thanks!

Brianna (The Book Vixen)

January 20, 2014, 7:05 pm

I had no idea about the acronym code! Thank you for that :D

Andrew Blackman

January 25, 2014, 4:39 pm

Nice tips, Charlie! I always use the title and alt tags, but had no idea about the acronym code – that’s really useful!


January 26, 2014, 1:11 pm

Iris: Yep :) It’s very useful.

Vishy: You’re welcome. I learned something myself, too – how to add the coding so that it’s written on the page! (You have to write it differently otherwise it will show the result instead.)

Jessica: The visual option of WordPress is very good, I have to agree. I remember the same they had years ago on other sites, it was difficult to do anything slightly interesting unless you knew how to code (that’s why I decided to teach myself.) Nowadays it is much better but there are things left out.

Rebecca: © is very useful.

Anbolyn: That’s what led me to first seek it out. I used to create the symbol in MSWord and copy it. It worked but there was always that thought – how long will it work for?

Laurie: Honestly when I first read about it I didn’t either – in a way you could get by with just the alt text. It’s just that it would make the on-hover potentially too long. Using WordPress I’d say you know a good amount to make it your own :)

Alice: As someone who recently didn’t similar (went through my 500-odd pages to change something) I’d say if you’re going to do it, do it sooner rather than later so there’s not so much work!

Audra: You’re welcome :)

Literary Feline: It’s actually pretty useful when you’re going back to edit posts, when you have the image titles etc there. Less to double-check when you’re looking for something.

Judy: I’m *hoping* that my explanation was simple enough – when I first learned them myself explanations were confusing. Hope it works well :)

Isi: If your boyfriend knows about this coding he’ll be able to show you better than I could sitting here :)

Lady Bren: Thanks, Bren :) No, I looked at Triberr but it wasn’t for me.

Angie: You’re welcome :)

Aarti: Obviously it adds to the time and space on the visual section of the text box, but it’s worth it in the end.

Brianna: You’re welcome. It’s useful :)

Andrew: It is. There are too many acronyms around that are shared across the board, so it’s a good one to have.



Comments closed