Styling a Blog Post to Make It Work for Humans and Robots

I’ve been doing visual editing for Hop Online for a while now, and if there’s one thing I’ve learned it’s that not every content creator knows how to properly style their articles.

And that’s ok, as long as there’s somebody to take care of the minor imperfections here and there.

But are they really minor? And who gets affected by them — the reader or search engines?

HTML 101: What You’ll Need for WordPress

Many bloggers are initially petrified by the thought that they’ll have to learn how to code in order to successfully run a blog. Many others will confess that they actually can’t code as well as might be expected.

Nobody blames them. WordPress, despite being more than a decade old, has all the right tools for blogging with minimal knowledge about coding. But fortunately, knowing a handful of tags is all you need to present your audience with well structured and good looking posts.

This being said, becoming master of HTML/CSS is easy with the excellent 30 Days to Learn HTML & CSS course from Tuts Plus.

Insert Images That Make Everyone Happy

In the past Braille was used to deliver pages to people with visual impairment. Today, pages, including the alt text, are read out loud by the browser itself.

In the world of blogging, content is king, but it’s the images you add to your posts that will make your king a beloved one.

Picking the right visuals is but the first step to finalising a good post. It’s a cardinal sin not to use any images, but it’s just as bad to use any old image. Pick relevant images and if you think outside of the box about an image or two, put a caption on it. Relevant and well-explained images help to form a more complete reading experience.

And speaking of reading experience — keep images either centered or on the right. Wide photos look best centred and can serve as introduction into a new part of the article. They can also be used on the right, but you must sacrifice size in order to keep the text area wide enough to be readable.

Tall images are best suited for the right side of your posts. We choose not to put such images on the left in order to keep the reading flow intact.

The <img> tag is pretty straight forward, but there’s an important attribute which tends to get forgotten — alt. It is an absolute necessity if you want your content to be optimised for search engines and accessible for people with visual impairment. the text between the quotation marks is what search engines see when they come across your image and it’s what’s displayed if the image can’t load or is accessed by visually impaired readers.

The Difference Between <p> and <div>

Although sometimes interchangeable and are used in the same way (by wrapping the content with a closing tags </p> and </div>) , these two tags serve different purposes. The <p> tag defines a paragraph and it is usually styled to improve the reading experience. This is achieved through the extra spacing between paragraphs. A good WordPress blog would take full advantage of this and give its paragraphs room to breathe.

The <div> tag is a container for other elements. It’s styled differently, too. Oftentimes this tag leaves no room after it, thus impeding readability. So do yourself and your readers a favor — don’t wrap your paragraphs with <div>. Here, at Hop Online, we use <div> to embed images in blog posts and include copyright attribution.

<b> Is Not for Headings

…the same goes for <strong>. <b> and <strong> don’t look like a headings to your readers and are not seen as a headings by search engines. It comes under number nine in Line 25’s 10 HTML Tag Crimes You Really Shouldn’t Commit, however when style and SEO are high priorities, it ranks much higher.

A heading is more than just bolded text. Its font size and color may be different or a different font may be used altogether to make the heading stand out. <h2> also indicates the second most important heading (after you article title) and will positively impact your SEO rating if you take your time and carefully pick keywords to use in the headings.

And if you want to emphasise on something in your paragraphs, stick to <strong> rather than <b>. I won’t go into details here because better explanations have already been given.

Make Sure Your Links Are SEO and User Friendly

Just like the <img> tag, <a> also benefits from including alt text. This text appears as a tooltip when you point at links and gives your users clues as to what exactly to expect from the link. It’s more versatile than the anchored text (between <a> and </a>), because it doesn’t have to flow with your text. The best practice is to use the page title as an alt text as it will give your readers the right idea and titles are usually already SEO optimised.

Well-executed blog posts are more than just a great source of information. This essential part of content marketing can be a pleasant reading experience to your users and a nice SEO boost to your site.

Contact us for FREE consultation

Let's Talk!

Drop us your contacts and we'll get right back to you to discuss your needs.

Your message was sent successfully!

Error. Please try again!

See locations
We use cookies and local storage for better UX, analytics, and ads.
Learn More