Tuesday, 12 November 2019

How to format a blog post in 8 easy steps

Web users decide within seconds of visiting your website whether they’ll stay or leave and never come back.
If the page takes any longer than 2 seconds to load, it’s game over for nearly 50% of users. If the page loads within 2 seconds, but they don’t like what they see within the next 0.5 seconds, it’s also game over. If your site looks like this …

… it’s game over.
For 88% of web users, all it takes is one bad experience to put them off your brand for good.
This underscores the significance of good web design – for service and product pages, but also your company blog.
Your hub for resources and best practices should look polished, engaging and easily navigable. Like this:

And each click should take your target audience to a well-formatted blog post that’s organized, scannable for key points and visually appealing.
Otherwise, it’s game over.

So, without further ado, here’s how to format a blog post that will keep readers engaged:
  1. Use style consistency
  2. Divide text into sections with H2, H3, H4 (plus WP migration tips)
  3. Provide an interlinking table of contents
  4. Break up large chunks of copy with lists, pull quotes
  5. Add imagery
  6. Embed media
  7. Incorporate a clear call to action
  8. Do a test run

1. Use a style guide

Consistent branding is part of how your blog posts deliver a consistent experience for visitors.
If you’re creating and managing a blog, you need to have a brand style guide that will help you develop a consistent, tone, look and feel – especially if you have multiple people contributing to or managing the content.
Visually, you need to answer questions such as:
  • What font will you use?
  • What font size will you use?
  • What type of spacing will you use?
  • Will you justify your text (please don’t) or flush it left?
  • What kind of headers will you use (more on that later)?
Within the copy, style elements to consider include:
  • Do you capitalize the first letter of each word in your headline?
  • Do you put punctuation at the end of each item on a bulleted list? Like so.
  • How will you address dashes used to break up sentences – with the en-dash (–) the em-dash (—) or the hyphen (-)?
Are we picking at nits? Possibly – but who’s to say your audience won’t, especially if you’re writing to educated, well-read prospects? Could you imagine how much credibility you would lose if, in one sentence you used the Oxford comma, and then in the next, you didn’t?

Use a consistent style in your visual and verbal branding. And while you’re at it, make sure you edit and proofread everything you publish, whether it’s a blog or not.
Pobody’s nerfect.

2. Divide text into sections with H2, H3, H4 (plus WP migration tips)

Dividing your text into clearly labeled sections helps make your content more scannable, and ultimately much more useful to your target audience.
It can also simplify the process of blog writing by helping you create a rough skeleton for how you intend to organize the content.
If you’re writing in Google Docs, incorporating these headers is fairly straightforward:

In your copy, you can nest H2 headers under H1 headers, nest H4 headers under H3 headers, etc. At Brafton, we use H2 headers for the main headers throughout the post and then H3 and H4 for sub-sections within those. The specifics are really up to you (just be consistent).
Simple enough, right? On the page, you’ll end up with something like this:
In this example, “The visuals and tactics to use” is an h2 and “1. Always use high-quality images” is an h3 heading.
But there’s a catch, of course. Migrating content from Google Docs to WordPress often results in formatting changes or inconsistencies. Spaces are added, H2, H3 and H4 headers might be unformatted, typefaces can get left behind, images might not display correctly, etc.
There is no perfect solution that we know of to migrate content from Google Docs to WordPress, but here are the best solutions:

Move to the Gutenberg Block Editor

The Gutenberg Block Editor is available as part of WordPress 5.0 and later, and will replace the Classic Editor in 2021. It’s supposedly designed to fix the formatting issues introduced from a copy-paste into WordPress.
Instead of having one large text block that you can format as you please, you add “blocks,” each pre-formatted to display a certain type of content. For example, there’s a header block (which you can assign as an H2, H3 or another size. There are also blocks classic paragraphs, images, custom HTML and more.
Choose the plus sign to open a menu of block options in the Gutenberg editor.

Use the Docs to Markdown add-on (our preferred method)

This Google Docs add-on converts the text in the document to HTML, which can then be copied and pasted directly into the WordPress text editor. The classic paragraph block in the Gutenberg editor has the option to view the source code. This is where you can paste your HTML.
This helps maintain blog formatting, including lists and hyperlinks, and eliminate any extraneous code additions (such as extra spacing). The only caveat is that images and embedded media will have to be added manually.

Other options exist – such as the Mammoth .docx converter plugin – but almost all of them have some sort of flaw or imperfection, some of which are more annoying than others.
We stick by our recommendations, but this might be one of those instances where a bit of trial and error is in order.

3. Provide an interlinking table of contents

Especially for long-form content (like this blog post), a clickable, interlinking table of contents – like the one at the top of this post – can save a lot of scanning to find the specific subset of information a reader is searching for.
Ideally, you want to include this table of contents as close to the top of your blog posts as possible. Try to work the table of contents into an introduction organically, rather than plopping it at the top of the post. This might require a bit of finessing, but you can take cues from this blog post.
Here’s another example (this one uses two columns!):

In this post, the writer has a short introduction that flows into an overview of what will be covered. Pretty straightforward.
As for how to create a table of contents that links to specific sections of your blog post?
Our preferred method is to place anchors next to your headers, then link to them from a list of those same headers at the top of your article.
Basically, place your cursor on the subhead that you would like to link to. Then click Insert > Anchor:

Next, name your anchor – keep it simple, so it’s not a pain to type in the anchor id later on.

Once you’ve done that, you’ll be able to see the id tag in the text version – notice that the end tag () comes immediately after the opening tag:
You can see the id tag within the h3 element tags.
Next, go back up to the top of your article and enter an href attribute around that item in your table of content, like this:
The href tag surrounds the text you want linked to the content further down in your article.
Note: the hash symbol is an important part of the equation; this is what attaches the hyperlink to the element id in the page.
And voila. You can now click on the link in the table of contents to bring you to any part of the blog post.

4. Break up large chunks of copy with lists, pull quotes

First and foremost, use short paragraphs where you can. Large blocks of text make readers feel claustrophobic and force them to wade through more copy to find the information they’re looking for.

Conversely, short, concise paragraphs can make a blog post feel airy and generally more readable.
Non-textual elements, meanwhile, can help break up otherwise dense copy and emphasize certain information. Consider a few examples:
  • Bulleted lists.
  • Pull quotes (or blockquotes).
  • Imagery.
  • Social media embeds.
Another way to emphasize certain messaging is with italics, underlining and bold text.
But a word to the wise: Use bold text sparingly. Same with italics and underlining. They blunt their impact when you overuse them.
Also, don’t do the underline, italicsbold and ALL CAPS THING.

5. Add imagery

They say that the brain processes images faster than text. They also say that visual information is retained longer.
Some have even suggested that imagery has a positive effect on traffic, bringing in as much as 94% more page views.
Imagery also helps you rank in an image search (especially if you use alt text to contextualize the imagery for Google), as long as you avoid uploading pictures that are excessively large or unwieldy, as this can negatively affect page speed, and in turn, foil SEO.
But imagery’s greatest value is as another form of storytelling that conveys information in ways that are sometimes more engaging or entertaining than text.
For example GIFs and memes – the inside jokes of the web – can add personality. Charts can help simplify data.
Then there are GIFs of charts:

Screenshots, meanwhile can be instructive, especially for visual learners. For instance, here’s how you can find license-free imagery on a Google Image search:
Always cite imagery you use that you don’t have the rights to – and remove it from your site if the publisher complains.
As for stock imagery?
We’d recommend avoiding it where you can, and instead opting for custom illustrations, like the one at the very top of this blog post.
If you don’t have in-house graphic designers, free tools such as Canva can help you create your own graphics – though they make lack the style, nuance and craft that only a professional designer can provide.
And if you absolutely have to use stock imagery, here is a list of the sites that we recommend.

6. Embed media

By media, we primarily mean audio, video and social posts. As with imagery, you shouldn’t necessarily embed them in your content just for the sake of having them.
For example, we embedded the video below as a complement to this post:
If your brand produces webinars or podcasts, be on the lookout for opportunities to plug that content where relevant. Remember, you want to keep leads and prospects on your site as long as possible – even if that means navigating away from your blog post to another page.
The best part? Embedding media is super easy. For popular video platforms such as YouTube and Vimeo, all you need is to include a link – plain old URL format – in the editor, and WordPress does the rest. Another option is to take the embed code straight from the video – in YouTube, you’ll find it when you click the “share” button and select the “embed” option. Insert the code into the text version of your post.
Same deal for social posts from Facebook, Twitter and Instagram. With Facebook and Twitter, just click on the timestamp of the post you want to embed, and then copy the URL for that page into the editor. Alternatively, you can find the embed code by clicking the small carrot in the upper righthand corner of your tweet:

If you prefer to customize of the post or video, however, you will need to copy and paste the embed code, and then tweak the dimensions.
And that’s really all there is to it.

7. Incorporate a clear call to action

Content marketing is about so much more than making your website more visible to search engines with primary and secondary keywords, or generating site traffic.
It’s also about fostering brand engagements that will ultimately make it easier for you to sell to prospects.
Every blog post you write should therefore contain one or more action items that will prolong the reader’s engagement with your brand and ultimately build a relationship that will turn leads into prospects.
For instance, you can use tools like SleekNote and OptinMonster to create popup boxes that will encourage readers to sign up for your newsletter, like this one:

Keep in mind that a first-time visitor might not be sold on your brand at first, so make sure you include a subscribe button somewhere on your site that they can come back to:

You’ll also notice that we’ve made it super easy for our audience to share our content on social media.
We also have a clear “Contact Us” button and several articles listed in the margin that might be of interest to readers.
In addition to all of that, you can also embed clickable calls to action within your content that encourage readers to take some other action, such as downloading an eBook:

8. Do a test run

In other words, click the preview button in WordPress to see what your article will look like when it’s live. Here a few steps to take in preview mode:
  • Scroll through your content and look for any extra paragraph breaks or other potential areas where formatting got wonky.
  • Open links to make sure they’re working correctly.
  • Ensure that video previews and images are displaying correctly.
  • Click on your CTAs and fill in the form with your own contact information to make sure that’s working correctly.
  • Click each item on your table of contents to ensure everything is linked correctly.
Once you’ve done all that, go right ahead and publish your content.
WordPress previews is pretty foolproof in terms of showing you exactly how everything will appear and function on the page, but it never hurts to do a quick scan of the live post.
If everything looks neat and tidy, then you’re good to go.
Pat yourself on the back, and move on to the next one.

Questions, comments, tips? We’re all ears!

Feel free to leave a comment below with your most profound and useful blog formatting tips and tricks.

No comments:

Post a Comment

Post Top Ad

Your Ad Spot