How I threw SEO out the window

Like a bane, search engine optimisation, (SEO) has long driven bloggers looking for visitors towards a meta-tag-heavy, Flesch points-restrictive style of writing. That needs to change.

When I started blogging seven years ago, I had to adopt the same practice and, while there is no doubt it worked, I always felt it hindered my style of writing. There is some sense in such optimisation, but the actual method of weighing writing is far too inhuman.

Continue…

From start to finish: details and tips on how to write a blog post quickly, yet thoroughly

As promised in my recent article, I am going to dedicate this one to detail my blogging method. Generally, how to write a blog post so that it saves time, not takes it all away. Many people have asked me specifics before, and, over conversations with other bloggers, I learnt that this is one of the most frequent questions established bloggers get: how exactly do you blog?

When you come down to it, the thing is pretty simple; but some dumb it down so much that it loses meaning. A lot of thinking does go behind a blog post, and my intention today is to explain to you exactly what I do and how I do it. Particularly, the physical process of turning an idea into an article.

If, in my last writing I was unclear that I would talk about the mental approach rather than the physical technique, I apologise. In this one, we will surely talk about doing things — typing and things along those lines, yes. And I hope to keep this article quite short.

(Also note that, in an attempt to address the largest possible group of people, I will be focusing on writing on a WordPress blog. Except for a couple of specifics, however, the process should largely be the same.)

An idea strikes

Like everything else, blog posts too begin with ideas. At the start, it is one at a time; then it floods like a barrage gave way.

That is when you will need two apps I strongly recommend to all you serious WordPress bloggers. Firstly, get the WordPress app (download for Android or for iOS — or download your blogging platform’s app; Blogger, Tumblr, they all have one). Secondly, get Pocket (download for Android or for iOS — other options like Instapaper may serve just as well, although not on your pocket).

It is a universal rule that you get topics to blog about when you are in no position to actually blog. So twist this rule of nature using the two apps above. Ideas that come from offline go straight into your WordPress app: create a new post, title it and leave a note to yourself in your blog. Here is the screenshot I had used in my previous post, just to jog your memory:

Title your post, leave your idea as a note to yourself in the post body. Do not forget to save it as a draft before exiting, lest your post be published.

Title your post, leave your idea as a note to yourself in the post body. Do not forget to save its status as a draft before exiting, lest your post be published.

When you have time to blog and you sit before your computer, voila, WordPress is updated.

Some prefer to use dedicated note-taking applications for this. But in this case I find that complex and unnecessary because you end up noting down in one app and having your phone around when you blog, and copy things over between your blog and computer (or even across apps within a computer if that is the case). The method I have explained above works beautifully.

But what if your idea strikes while online? You can use the Press This bookmarklet in your WordPress Tools > Available tools menu if you are on your PC, but, if you are on your phone, switching to your WordPress app may not be the most time-saving option.

You can instead save to Pocket using a pre-determined tag. I use the tag #ToBlog which is not intuitive, so I never use it anywhere else by mistake. When I need to look things over, I quickly search for all #ToBlog saves and I have the stuff I want.

Organise your dashboard

This is an integral part of blogging. Other services may call it different names, but as a namesake I will call it the dashboard (which is what WordPress users are familiar with).

To focus on your blogging, let no part of your dashboard cry for attention. I have gone the extreme minimalist way and re-designed my dashboard to look something like this (hold on while I jump to my administration home and take a screenshot — there you have it):

Screenshot (115)

The VHBelvadi.com desk is the same as the WordPress dashboard, but it has been fully customised to suit my needs with lots of quick access links. Please click to view it large.

You may not be able to make yours look exactly like this without some unnecessary effort (for most personal bloggers, anyway) but the point is not so much in the looks as in the pending notifications, alerts, messages, errors and the like. Deal with it as they come. Approve comments, make them private or public, reply — the whole aside process.

Now you are set to write and do nothing else.

The writing process: how to write a blog post

a. Where to write

This is a big question to many bloggers. Some of us bloggers hated the original WordPress writing area. And most bloggers hated it because everybody else hated it too. The new version, with the distraction-free writing option, is something I am quite fond of. But I never use the distraction-free editor because I cannot add tags, featured images, excerpts without switching around and that takes time. (I sometimes do these things halfway through an article.)

If you still hate the WordPress editor, try an alternative such as JustWriteBlog for Chrome. I do not use it myself, but have tried it and found it usable on a regular basis. (Why do I not use it then? I do not see the need for an alternative to my VHBelvadi.com desk — not yet, anyway!) Alternatively, ScribeFire for Firefox is an equally trusted and (perhaps better looking) option. It is also available for Chrome as well as for Safari.

b. Know your WordPress editor shortcuts

If you use an alternative editor to the default WordPress editor, skip this section; if not, you will have some fun here.

When typing an article, know that all the regular shortcuts work. But make sure the cursor is clicked within the visual editor area. Hit Ctrl+B to embolden; hit Ctrl+I to italicise; hit Ctrl+Z/Y to undo/redo; similarly Ctrl+C/V/X will copy/paste/cut; and Ctrl+A will select all text.

Deeper shortcuts include several things you can do with the combination of Alt+Shift+shortcut where the shortcut (key) can be any of the following: D to strikethrough, N to spell-check, U to start a bullet list, O to start a numbered list (that is O, the letter, not 0, the number), M for image, and Q for quoting.

This is what my editor looks like. As you see, it is not the distraction-free mode because I then lose access to the areas on the right here. Besides, I have re-designed it to be pretty minimal, so there is not a lot of distraction stemming from this screen. More details typed into the screenshot (including a type -- sorry) so please click to view large.

This is what my editor looks like. As you see, it is not the distraction-free mode because I then lose access to the areas on the right here. Besides, I have re-designed it to be pretty minimal, so there is not a lot of distraction stemming from this screen. More details typed into the screenshot (including a typo — sorry). To view it exactly the way I do, please click on the image.

You can also hit Alt+Shift+W to go full-screen (distraction-free editing) and once there, special shortcuts work, such as Alt++ to increase width of the text area, and, conversely, Alt+- to decrease it. If you messed it up, Alt+0 will return it to the default dimensions (and it is 0, the number, here and not O, the letter).

Hitting Ctrl+number will quickly format your writing. 1 goes to heading 1 style, 2 goes heading 2 all the way to 6; then 7, 8 and 9 will turn it into regular paragraph text, pre-formatted code or address text.

Also make it a habit to hit Ctrl+S to instantly, temporarily save as you write, so that you do not lose your work.

Mac users, remember the eternal lesson: Ctrl = Cmd. Also, not all of these may work on all browsers.

c. What single button do I use most?

I am a big fan of the preview button at the top-right. Some lucky people can hit Ctrl+Alt+I to preview instantly. This gives me an idea of how my post will look once it is published for the world to read. I do not have to return to bulk-edit my work after publication, because that would be a foolish thing to do.

Using the preview capability helps not only to keep track of the post length (sometimes 2,000 words seem short in the editor) but reading in the actual format and design that the article would ultimately be read in, in my experience, makes it a lot easier to manually spell-check.

d. Add any images

It is generally a good idea to add images to your writing. It acts as a buffer between large chunks of text and gives your reader some rest. Five images in a 500 word article is too much, but three or four for a 1,000 word article is a good measure.

I add images at the very end, because doing so while writing is not only distracting, but also time-consuming. This, of course, is unless I have to make references to any content inside the image.

e. Tag, file and save

Finally, tag your post. My limit (and a good limit, unanimously accepted) is no more than five tags. Two things to remember when you tag your posts are, first, whether each tag represents the whole article rather than a portion of it. If you have only two words that truly represent your article, tag it with just two words.

Second, avoid long, spaced out, phrase-like tags. These are not only unnatural but may backfire by narrowing down your results too much; on the contrary, try not to be too vague either. For instance, I have tagged this article with the words blog, wordpress and technique.

h. Copying from elsewhere

I know a few people write their articles on text editors like Word. When you copy and paste across softwares, things get real jazzy. But the dangerous part is sometimes code is added to your copied text that does not make a visual difference when you look at it, but its presence is quite harmful for robots indexing your website.

Once you paste, WordPress has a handy tool called the remove formatting button. In the kitchen sink (Alr+Shift+Z) it is the sixth button (next to the paste from Word button with a W). Hit that and, even if you noticed no changes, you are good to go.

Publish or schedule it

Ah, the end.

You can publish your article right away, of course, but if you were feeling particularly energetic and wrote three in a day, you would not want to throw them all out at once, so hit schedule to post at your preferred time and date.

Then sit back and talk to your readers. It’s the second most rewarding part of blogging.

 Cover image: Flickr/Christine and Hagen Graf 

VHBsign

How to add an end mark to your articles on WordPress

END-MARKS ARE A typographical feature, most probably derived from the technology and computer-science industry, that employs a use of a symbol, text or icon to signal the end of a piece of text to the reader.

Personally, I am a great fan of end-marks, and I was using them in my first blog at WordPress.com but things changed later and, (unless I manually inserted them every time,) I had no way of fitting one into my articles… until now!

[hr_padding] [hr_padding]

As magazine features

If you have ever seen an end-mark before, it is probably in a magazine, at the end of every article (see picture below for examples.) Apart from being typographically good looking, these things serve to signal a more finished end to an article, much like a full stop does to a sentence. Once I managed to write a handful of code, I began employing end-marks on this website as my regular readers would probably have noticed.

Endmark examples

As I said already, manually inserting end-marks after every article is a tedious job; but, on the other hand, it cannot always be fully automated either. For instance, Colin Temple has a great endmark plugin that appends an end-mark of your choice to your articles.

[hr_top] [hr_padding]

Endmark plugin

However, as I found out myself, if you have meddled with some of the code previously (or even if you have not, in some cases,) such as including certain sharing options after your blog post etc., the sharing buttons come wrapped into the main content division (they even do so native-ly on some themes) and you end up with an endmark after the sharing options, which can turn out to be awkward.

Colin’s plugin has some other features that need working, as he says on the website himself, but — if you care enough about your blog to remember adding an end-mark — I have a quick and foolproof solution for you with one of WordPress’ best introductions: shortcodes.

I have not come up with a method to fully automate it for the same reasons stated earlier, but if a code as simple as [x] is too hard to type in, then this exercise is not for you!

[hr_top] [hr_padding]

What is a shortcode?

Ever since WordPress introduced shortcodes, the platform — and well neigh the blogosphere itself — has begun a sort of new era in that clients can do quite a bit of flexible work themselves now.

Basically, a shortcode is a small piece of text that signals the browser to do something a programmer has pre-programmed into your website. For instance, if I pre-programme a code into your website to print a red block every time you type in [red] then the code [red] is called a shortcode and you can use it without really knowing the original code that tells the browser to display the red block. (And you don’t have to call me up to find out how to do it either!)

In my solution, I decided to create a shortcode to my liking, and that is what I will show you now in as much step-by-step detail as possible.

[hr_top] [hr_padding]

 Step #1:  Creating a shortcode

We will start by writing a small piece of code that does some simple things:

[hr_padding]
  • It tells the browser to start executing the end-mark function
  • It tells the browser what the end-mark is, and
  • It tells the browser how to recognise your request to display the end-mark

I have already written the most basic structure of that code for you, so all you have to do is copy it and hold on to it for now. (Hover over the code and click the second icon that appears to copy it.)

If you’d like, you can paste it onto a text editor like Notepad and edit certain areas. First of all, change the  UniqueFunctionName , in the two places that it appears, to a name of your choice. You can call it anything you like, but avoid spaces and use under_scores instead.

Next change the text that says  end  to whatever you want the shortcode to be. In this case, calling [end] will get the browser to load your end-mark. You can change it to anything you like; for instance, I keep mine as [ vhb ] so I can sign off with it each time I finish an article and have the end-mark displayed. While making changes at these places, be careful not to alter inverted commas and other punctuation.

Once you are done with the changes, copy the altered code to your clipboard (i.e. Ctrl+C on your PC, or Cmd+C on your Mac.)

[hr_top] [hr_padding]

 Step #2:  Adding the code to your theme and calling it

Our next step is to add this code to our theme. There are several ways to do this, but if you are not too good with code, it is better to make as little change as possible to the original files, so below is the method I suggest.

[hr_padding] [notice type=”blue”] The best way to edit a theme is to leave the original files alone and create a child theme instead, but I will not explain that here since it is a huge topic on it own!
[/notice]

First go to your core files (your control panel/ftp area where your website files are stored) and create a new file; call it something like endmark.php. Of course, you can call it whatever you want, but this is the name I will be using in this tutorial.

Paste the code you copied (or the one you altered) in step #1 to the endmark.php file and save it.

Now we are going to make sure the lines of code that load your website onto a browser remember to call the new endmark.php file, else your shortcode will not work. Again, there are several ways to do this — including conditionally — but, since this code is light-weight and will hardly delay the page load time, we can afford to do it in a simple, straightforward manner.

Open your theme functions file (named functions.php) or a child-theme you have created and add the line of code that I have written below to it. If you do not know where exactly to add it, just make sure you put it before the  ?>  symbols at the very end.

Now, onto the next step!

[hr_top] [hr_padding]

 Step #3:  Designing the end mark

By now I take it you have decided what your end-mark will be. Most prefer to use a small square block or an ancient, intricate glyph. I, for one, use my wordmark (see the end of this article.) If you have not, you have one more step before you start using the end mark, so start thinking!

In this step, we will make sure our end mark is displayed where we want it to. To start, open the endmark.php file.

If you have not made any alterations (except the ones stated in step #1) then, in the line 3, you should find this:  <p>fin</p> .

Alongside this I also suggest you open a new post editor on your WordPress dashboard, type in your endmark shortcode (in this case, [end]) and use the preview button to see how it is working out. The chances are you see the word fin at the end of the article, but it is on a new line. The reason for this is that html does not support multiple <p> tags on the same line. (One <p> tag is already being used by your body, and using a second one moves it to a new line — after all it is the paragraph tag!)

Now there are two things you might want to do here. You can either use this and, perhaps, center the end-mark on its own line; or you can push the end-mark to the same line as the last line of the article, like you see on this website.

Let us examine the first case: you can, of course, simply edit the  <p>’fin'</p>  tags in the endmark.php file to  

‘fin’

 , however, the align attribute of the paragraph tag is unsupported after HTML4.0 — in other words, you may not be able to do this successfully.

So our next solution is to use CSS, which does work. Simply change the line to something like  <p style=”text-align:center”>fin</p>  where the center attribute may be used as left also, to left-align the endmark.

The second case is if you do not want the end mark in a line of its own: edit line 3 to put the paragraph tags inside span tags like  <span><p>fin</p></span> . Preview your post now and, voila, you see the end mark in the same line as the last line of the paragraph.

[hr_padding] [notice type=”blue”] You might notice how I have a little space between the last full stop and the end mark on this website, but you cannot see so much space in your preview before the fin end mark we have added.

The trick is to use an HTML code called the non-breaking space (i.e. white space that the browser does not collapse.) You can do this by typing in  &nbsp;  where you need a space. Do it several times to leave lots of space.
[/notice] [hr_top] [hr_padding]

 Step #4:  Making the end-mark yours!

Who wants a lousy fin as their end mark? In this final step, we will make the end mark truly yours!

You have probably decided on what you want the end mark to be be now. Perhaps a square, or a circle, or a half-circle or a weird scribble, or an elvish initial, or maybe even your own signature like I used to use before. The simplest way to use this is to create an image; keep it within 10 – 14px in height, depending on your text, and making it square is always your best bet.

Upload the image somewhere — I strongly urge you to use your own website — and copy the image location. We will call this  http://mysite.com/location/of/my/image.jpg . JPG files are slimmest, and therefore the fastest to load, but you can use any common format you like.

All you have to do is replace the word  fin  in your endmark.php file with  <img src=”http://mysite.com/location/of/my/image.jpg”> . Replace our fake image location with yours and there you have it: your own unique end mark!

If you have any questions, feel free to ask me with a comment here or simply by dropping me an email, and I will help you as best as I can. Have fun with your new end mark. [vhb]