You have a blog! Congratulations!
You built it out of your own blood, sweat, and way-too-many tears to share your amazing content with the world.
How do you share content? Text, right? You write stuff, yes? This is the whole purpose of a blog. Duh.
Well, not entirely.
What’s the Problem?
When a person goes on a website it isn’t the same thing as opening a book. When we’re on the internet, humans have been known to have the average attention span of a drunken fruit fly. We skim, we fast scroll, we read nothing but headers…
For this very unfortunate reason, bloggers can’t and shouldn’t assume people are going to be reading every word of your blogs, genius as they might be. Humanity is busy. We have kids to raise, jobs to do, and (don’t forget) that we have little to no delayed gratification skills (cough, cough, Amazon Prime generation, cough).
This is why we bloggers have to spoon-feed our readers with easy-to-process, visually appealing, and eye-catching blog entries that will make people actually want to read all the way to the bottom.
People are never going to visit your blog again if they log on and are immediately faced with the ominous brick wall of text.
Yeah, no one is going to read that.
Why This Sucks
This really does suck. As an author, I’ll be the first to admit it. You spend so much time writing these witty, insightful, well-researched masterpieces. You want to think that people are going to recognize your content for the epic wonder it actually is and read it based on merit alone.
Trust me, the fact that we live in a generation completely devoid of sticking power isn’t your fault.
To try and save some of your dying optimism, think of it like this.
Your blog post is like a blind date. If your reader gets to the restaurant and sees a nerdy-looking man with a pocket protector and a unibrow staring blankly at a wall, it won’t matter how interesting he is on the inside because they’re going to climb out the bathroom window before the appetizer arrives.
It’s your job as a blogger to make your post look interesting enough that your reader sticks around long enough to appreciate what you’ve written.
How to Handle It
So instead of giving your readers a migraine, you want to use headers, images, and other embedded media to put some visual distance between your paragraphs and make sure your blog posts have lots of readability and visual points of interest.
There is an endless array of different things you could include in your blog posts, but we’re going to stick with my top 10 favorite ways to give your blog posts some visual appeal.
1) Headings
Headings are important for two main reasons: readability and SEO.
From a readability perspective, effective usage of headers is your first line of defense against the dreaded wall of text. They create visual space between sections, give big text summaries that are easy to skim, and give the main points your blog covers.
From an SEO perspective, think of your headers as the basic outline of your blog post. The bots are going to look through your headings and try to figure out the basic gist of your post (much like your readers may do), so you want to make sure that if you read nothing but your headings your post would be appropriately-described and would make logical sense.
Here’s the basic purpose of each level of header:
- Header 1: Your H1 tags should contain the title of your blog. For SEO reasons, you should only have one H1 per page. (e.g. “How to Write a Blog”)
- Header 2: These are the main sections of your post and should contain the main SEO keyword phrases you’re pursuing. If you were to list the main sections of your blog, each one of them would get its own H2. (e.g. “Research Your Topic”, “Write an Outline”, “Write the First Draft”, etc.)
- Header 3: These are subdivisions or subtopics of each H2 section. Once you get to H3 you can sometimes get funnier or more creative with your wording (whereas H2 is still a more important location for accurate descriptions and keywords), but they should all be relevant to the H2 under which they fall (e.g. “Why You Need to Write an Outline”, “How to Write an Outline”, “How to Tell If Your Outline Sucks”, etc.).
- Header 4 and Beyond: Some bloggers never make it this far down the food chain, but if your H3 subjects have logical subdivisions, don’t hesitate to pop them in H4 groupings. The more logical and detailed your outline, the more readable your post will be both to readers and to SEO bots.
2) In-Post Images
In-post images are exactly what they sound like. Images that go…in your post (as opposed to being the main image at the top).
There are a few special varieties of in-post images that we talk about in other sections (i.e. infographics, GIFs, and Pinterest Pins), but for now let’s just talk about standard, still images.
Images are a fantastic way to break up text, to give the reader something to look at, to illustrate a key point, or to show something that is easier to understand or conceptualize visually than it is through text.
That said, there are also some ways to do images really, really badly in a way that could really turn readers off to your blog in a big way.
A Non-Comprehensive of Blogging Image Faux Pas
Please, in the name of all that is holy, do not do any of the following with your blog images:
- Images that are stretched (the aspect ratio is wrong)
- Images that are pixellated (the image is too big for its resolution)
- Images that are taller than the user’s screen
- Images that are wider than the user’s screen
- Images that are so big they make it hard to fluidly read the text
- Images with text on top of them (in a hard-to-read way)
Basically, your images should be complimentary to your text, instead of overpowering it. They should make it easier to read your blog, not harder. And above all they should be relevant and well-formatted.
My Personal Recommendations for Images
Every blog is different, but here are the styling techniques and standards I usually use for images on the blogs I run. There is no “right” way to do it, but this is what works for me.
Images should be centered or the text should flow around them. As an example, instead of taking a paragraph each to explain these terms, I’ll place a few relevant and explanatory images.
This is an image that is displayed centered, on its own line:
On the other hand, this is an image that has been floated to the left so the text wraps around it.
If you want to wrap your text around your images, you should use (something like) the following CSS:
img {
float: left;
}
/* This could also be 'right', depending on your preferences. */Images should be small enough to see the whole image on the screen, alongside the relevant text. This means you shouldn’t have meaningful images (aka non-background images) that take up the entire screen. Try to think from the reader’s perspective and make it possible to see the image as well as the words describing it all on the screen at the same time.
Images should have consistent styling. For me, I typically like a mild shadow for my in-text images, which makes it look like they’re hovering a little off the page. In just a few minutes you can experiment with the CSS necessary to make this happen with an online box shadow generator and then create a custom “box-shadow” class on the custom CSS section of your blog.
The one we use here looks like this:
.box-shadow {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}(If this sounds like Greek to you, you might want to check out our blog on HTML attributes.)
You don’t have to do box shadows though. You might want all your images to have a white padding around the edge (to make them look like a Polaroid) or a brand-colored border. You may want only black and white images or only images with a sepia feel to them.
Whatever your image standards are for your blog, just ensure the branding is consistent across the various images in one blog entry as well as across multiple blogs. Your readers will thank you.
Stock Images
Now that you know what your images should (and shouldn’t look like), you need to know how to get them.
The most sure-fire way to have original, relevant images is to take them yourself. However, this is outside of many people’s time and budgeting constraints.
The next best thing is stock images. These are images other people have taken that can be used (either for free or for a fee) by the public.
Be very careful of copyright issues. Do not steal, borrow, or otherwise use other peoples photos without the right legal permissions. It will save you 30 seconds now, but could jeopardize your entire blog if you trespass against the wrong person.
If this last paragraph scared the crap out of you (and it should have, at least a little), let me make you feel better.
Here is a list of my personal favorite free stock image sites. They all have amazing photos that you can use worry-free on your blog without paying a dime. If you have others, drop a comment to us below. I’d love to keep adding to this list:
- Pexels
- Unsplash
- Pixabay
- Stockvault
- Kaboom Pics
- Stock Snap
- Pic Jumbo
- Picography
- Life of Pics
- New Old Stock
- Burst
- Free Stocks
- Reshot
- Gratisography
- Skitterphoto
- Foca Stock
- Pic Spree
- Foodies Feed
- Little Visuals
3) Infographics
Infographics are a fantastic tool for bloggers because they’re very visually appealing, they communicate a lot of information at once, and (most importantly) they’re incredibly shareable. No matter how awesome your pins are, they still don’t communicate much information to your readers (other than usually the blog title and maybe a short teaser).
An infographic is a great way to visually sum up your post in a way that people can easily digest and share.
Infographic: A visual image such as a chart or diagram used to represent information or data.
For example, here’s a sample infographic for this post:
You can see how this might be more shareable or eye-catching than a simple pin with the name of the blog post and a picture of someone blogging.
Infographic Best Practices
Limit Your Text: When you’re making one of these, you want to keep your text as limited as possible. Use numbers, charts, graphics, or any other visual representation of your data, rather than just paragraphs of text.
Long is Okay: Unlike pins (which have a pretty standard size) infographics can be almost any size you want. You usually see them either square or tall and skinny. Make sure your data guides your formatting.
Branding is Key: Since infographics are so shareable, these might end up being your brand’s ambassador to lots of fresh eyeballs. Make sure to include your logo and website on all infographics to ensure people know who is creating this awesome content. You can deviate from your brand colors if you want to, but usually there’s an easy and design-friendly way of creating an infographic using your existing color scheme.
How to Make Infographics
There are lots of easy and free tools online to create infographics.
If you know what format you’re going to use (aka how you want to present your data) you can use Canva, PowerPoint, Word, or almost any of the programs in the Adobe suite (Photoshop, InDesign, Illustrator) to create an awesome infographic.
If you want a little more help, you can opt for an infographic tool such as Piktochart, Visme, or Easel.ly to get really great infographics created in just a few minutes. Just be careful with the pricing/functionality plans for the tools you use before you start creating. No one wants to create the perfect infographic only to realize it’ll cost them $24.99 a month to download it. (The ones I mentioned above are free at the time of writing, but it’s really always best to check pricing whenever you look for any new tools…just in general.)
4) Pre-Set Tweets (aka “Click to Tweet”)
One of the easiest ways for your readers to share your content is using preset tweets like this one:
Adding “click to tweet” quotes in your blogs makes it easier for your readers to share your content! Check out this step-by-step guide on how to use them! https://bit.ly/3glZE2j Click to Tweet
When your reader clicks this link, Twitter will automatically load in a new window (with their account open if they’re already logged in, prompting them to log in if they aren’t) and a new tweet already composed with your preset message.
This is a fantastic feature because it takes all the effort, guesswork, and (really) thought out of sharing snippets from your blog. It’s also a great way to prevent the “wall of text” and visually break up an otherwise monotonous-looking section.
Step 1: Create a shortened link to your blog post using Bit.ly.
This takes a long URL (like https://donelikeamother.free-blogging-tools) and gives it a shorter link (like https://bit.ly/3iZHft2) that will take the user to the exact same place when clicked.
Step 2: Create a link to your pre-set tweet using Click to Tweet.
You’ll have to log in using your Twitter account, but then you can input your tweet text (aka what you want the tweet to say) including the shortened link to your blog (see step #1) in the text box and hit “Generate Basic Link” to get a single URL (e.g. https://ctt.ac/ndSPV).
Step 3: Create an “example” tweet in the correct location of your blog post.
The link you generate in Step #2 won’t actually show the tweet on your post; it will just take the user to Twitter. You want them to be able to see what they’re going to be tweeting in your post. Put the same text you used in Step #2 in your blog, with a link to the Click to Tweet URL you generated. The most basic way to do this will look something like this (in HTML):
<p>Adding "click to tweet" quotes in your blogs makes it easier for your readers to share your content! Check out this step-by-step guide on how to use them! Click <a href="https://ctt.ac/ndSPV">here</a> to Tweet this important message.</p>Step 4: Style Your Tweet (like a Tweet).
What you did in Step #3 will give you all the functionality, but it will still look like a basic paragraph of text. To style your tweets to actually look like tweets will involve a little bit of HTML/CSS magic. Here’s what the HTML for the little speech bubble you see above looks like in HTML:
<div class="tweet">
<p>Adding "click to tweet" quotes in your blogs makes it easier for your readers to share your content! Check out this step-by-step guide on how to use them!</p>
<a href="https://ctt.ac/8r054">Click to Tweet</a>
</div>This basically uses a div tag (HTML for “a container for stuff”) with a class of “tweet” ty style the paragraph. (If this sounds like gobbledygook, check out our post on HTML attributes for bloggers for an easy-to-follow, non-technical tutorial).
On the back end of your site, add the following (or something like it, if you speak CSS and want to fiddle) CSS code to style anything with the class of “tweet”:
.tweet {
width: 75%;
margin-left: auto;
margin-right: auto;
position: relative;
background: white;
border-radius: .4em;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}
.tweet:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-right-color: white;
border-left: 0;
border-bottom: 0;
margin-top: -10px;
margin-left: -20px;
}
.tweet a {
font-weight: 800;
color: #00ACEE !important;
}
.tweet a:before {
font-family: FontAwesome;
content: "f099";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
}If you want to see how this works before you try it on your site, you can check out this interactive HTML/CSS example where you can play around and see how it works ‘under the hood’, so to speak. (If this makes your eyes gloss over, you can check out our HTML basics guide for a quick tutorial). This uses the FontAwesome Plugin on WordPress or some other way of installing the FontAwesome library, but it also works perfectly well without it.
All of this will give you a lovely, pre-populated tweet that will send your readers straight to their Twitter account with the wording you choose already locked and loaded:
Adding “click to tweet” quotes in your blogs makes it easier for your readers to share your content! Check out this step-by-step guide on how to use them! Click to Tweet
5) Embedded Videos
Embedded videos are excellent ways to give your readers a multimedia experience, rather than just bombarding them with text. Also, if you’re talking about a current event, song, movie, or basically anything else on the planet…there’s probably a YouTube video (or ninety) on that exact topic.
Whether you’re embedding videos you have created or ones made by someone else, giving an in-text video is a great way to make your post more useful and more interesting.
YouTube
While there are a million different video-hosting services, most people are going to use YouTube anyway, so I thought I’d go over just how easy it is to embed a video that is currently hosted on YouTube.
Where a video is hosted refers to the website that actually stores the file for the video, rather than streaming it from someone else’s site. Hosting basically means where the actual video file lives. For example, when you embed a video, you aren’t saving the file on your blog, simply giving your readers a window to watch a video that is saved on YouTube without navigating away from your post.
It is actually an incredibly simple process. You basically need to navigate to the video you want to embed and hit the share button:
You then click the “embed” option from the menu that pops up:
And finally copy the HTML code that YouTube automatically generates. You don’t even have to highlight it, just click the copy button and it’ll automatically grab the whole code:
You can then insert this HTML code wherever you like within your blog and it should take care of formatting and everything. Just make sure your text entry tool recognizes it as HTML, not as plain text, or the video won’t appear and your reader will just get a random bit of code where it should be.
The process for embedding videos from other websites (e.g. Vimeo, etc.) is remarkably similar, but most video is run through YouTube, so that’s the only example we wanted to go through in detail. If you need help with a specific platform, you can always do the Googlies for “embed video from _____” and you should get scadzillions of appropriate tutorials.
6) Blog Text Videos
One specific type of video that has become immensely popular is a video that is actually created from your blog post itself, usually layered on top of relevant stock video footage.
These videos look professional and are much more eye-grabbing than the typical image, especially when it comes to sharing on social media. Fortunately, they’re also incredibly easy to make.
I usually make mine using a tool called Lumen 5, which can make a text video out of your blog post using just the post URL in a few minutes’ time. There are many tools that do similar things, but this is my personal favorite (and is what was used to make the above video).
7) Pinterest Pins
Pinterest is one of the best ways for bloggers to generate traffic for free.
Rather than just a place to look at pictures of cute puppies or collect recipes you’ll never have time to cook (sorry, babe, you have kids now…) Pinterest for business is a self-described “visual search engine”, which means you should think about it being like Google, but with search results in the form of pictures instead of website descriptions.
Setting up Pinterest for your blog isn’t that hard. (If you need help we have a full tutorial on how to install Pinterest on your blog.)
However, outside the technical elements you basically need to create “pins” for each of your blog entries. They look like this:
As people read your blog, they can save these pins to their Pinterest account, which then allows anyone else on Pinterest to see that pin and click it to access your blog post.
While there are many articles (and entire courses) on the exact specifics of how to utilize pins for blogs, here are a few of the basic best practices:
- As of 2020, you want to make an image with a 2:3 aspect ratio, ideally 1000px by 1500px.
- Always make vertical pins, as horizontal ones will show up very small on the Pinterest platform newsfeed.
- Your pins should have the post title and an eye-grabbing image.
- Your pins should have your website URL on them.
- Your pins should make people want to read more…create intrigue!
8) GIFs
A GIF is like a wizarding image in Harry Potter….basically a picture that moves.
GIFs are a great way to make a funny, witty, or sarcastic counter-point to something you’re writing about in your blog. While not seen on more formal types of writing, they are a great way to spice up an informal or conversational post and give your reader a visual break from the dreaded wall of text.
There are many GIF sites (such as Tenor or Giphy), each with their own specific methods of embedding GIFs in your posts, but usually you can locate a GIF with a quick Google search and the word “GIF” and then embed it using the same method you use to embed a video (as discussed above).
Quick GIF Caveat: As GIFs repeat indefinitely, try not to put too many GIFs too close together. (It can get really irritating, really quickly.) A good rule of thumb is that no matter how the reader scrolls, they should only ever have one GIF on the screen at a time.
9) Embedded Social Media
Embedding social media (such as tweets, Instagram posts, or Facebook posts) can have a huge impact on your reader.
Humans use social cues to help validate our decision-making process, so showing your reader that other people agree with the points you are making can secure a level of confidence from your reader that is difficult to achieve by yourself.
The method for embedding posts from various social networks varies (by social network and as time progresses and platforms evolve), but by Googling “embed posts from” and then the name of the social media platform you are trying to use, you can get up-to-date and easy-to-follow tutorials by the bushel.
10) Tables of Contents
The final trick that is highly recommended, especially for long posts (like this one) is a table of contents.
This allows people to see up front a visual outline of what the post will cover and click to the section or sections they want to read without having to scroll through the whole thing.
Not only do these make the post more readable, but it’s also a great way to acknowledge that your reader may not have an infinite amount of time. This common courtesy nod to your reader’s business will win you immense goodwill and loyalty from the busy people that go to you for information.
Skimmer’s Guide
By adding visual aspects to a blog post, you can break up the dreaded “wall of text” and give your reader added functionality or content all at the same time. Done well, this can make your blog immensely binge-worthy, while done poorly it can make it feel like a 90’s MySpace page.
Whatever techniques you choose to use, exercise these visual strategies in a classy, understated way that is consistent with your branding and blog voice.
Your fellow soldier against the wall of text,
Liz Bayardelle, PhD
Liz is the mom of three human(ish) kids, three furkids, three businesses, and eight blogs. She also has a PhD in Business Psychology, several published books on parenting psychology, and a serious Chick-fil-a addiction. Hobbies include color coding anything that will hold still, reading textbooks for fun, swearing at her herd of dustbunnies, and nodding off mid-sentence at the dinner table.