How to Structure Your Content in WordPress
A few years ago, Cyrus Shepard of Moz wrote a piece describing SEO Copywriting Tips. His first suggestion? Add structure to your content. While many things in SEO and digital media tend to change, this advice remains evergreen and the reason is simple: structure makes things more interesting for readers.
What is structure? It’s the headings, the lists, the bold and italic text, the colors, the quotes and even the images. An unstructured piece of content might look like a page in a book, where a structured page might look like there is a lot more going on at a glance.
Shepard shared that in an A/B test of two identical pieces of content in different formats, a piece with more structure received 63 times more inbound links than an unstructured post. Despite this, many people and businesses focus on the substance and ignore style.
What I want to do in this post is show you how you can easily add structure to your WordPress content to make it more interesting.
Because WordPress is the most widely used CMS in the world it makes sense to focus on it, but there is an analogous way to create structure on other platforms as well. For example, on a LinkedIn post:
For most things described, WordPress has handy buttons you can use to achieved the desired structure. I also include some HTML and CSS in case you’re not a fan of buttons.
Headings are an important way to structure your content, but also may be a way that search engines contextualize your content. So it’s important to understand how search engines might view your headings first and then structure your headings in a way that is congruent with that.
Search engines may view your headings as hierarchical:
- If a title is a primary (h1) heading, then…
- Subsequent titles would be secondary (h2) headings, and…
- Sub-titles of the h2 would be h3 headings, and so on…
Of course we have to guess how search engines view our content, but by keeping your headings in a logical sequence you can assume you’re doing no harm in search and you’re providing a logical reading structure for your readers to follow. Incidentally, you don’t have to use all of the headings: some sites skip h2 headings altogether and don’t perceive any penalty from Google. The structure that the headings create may be more important than the implementation itself.
What type of heading do you think that I am?
The heading above is a subhead of a h2 heading, a h3 heading. This is a demonstration that nearly every site has size difference between heading types, which creates the visual structure that makes reading your content easier. I also used the indent right button to exacerbate the structural difference:
- There are six types of HTML headings: h1, h2, h3, h4, h5 and h6.
- Indentation is a CSS command using style=”padding-left: (variable) px, pt, cm or %;” within a p, span or div element.
Basic Font Changes
You’re probably familiar with how to create bold, italic and underlined text, and despite this few people use these features to create emphasis within their content. Don’t overdo it…but these can be effective ways to add structure and emphasis to your content.
You can also add color to your fonts to add emphasis to your content. This is somewhat unusual to see online, so it stands out and can be very interesting.
You can also make your text unusually big. (or extraordinarily small)
Note that for the last two, there’s no easy button in WordPress to do this. You have to create a span or div element in HTML and add CSS.
- HTML for bold text is “strong“
- HTML for italics is “em” (this stands for emphasized text)
- To underline text, you have to use CSS rather than HTML, which means creating a span element and adding: style=”text-decoration: underline;”
- To add color to your text, you must also create a span element and add: style=”color: #(variable hex number);”
- To use a different font within a portion of your content, you must also create a span element and add: style=”font-family: (variable font family);”
- To size your font within a portion of your content, you must also create a span element and add: style=”font-size: (variable percentage or px);”
There are two types of lists to create in WordPress: unordered lists and ordered lists. Ordered lists are numbered, unordered lists are bulleted.
This is an example of an ordered list of the top selling Adele albums of all time:
When 25 comes out later this month, that list may change…but you get the point. Here is an unordered list of Adele’s albums:
Pretty simple stuff, but a very powerful tool to add structure to a post.
- The command for an unordered (bulleted) list is “ul,” and for an ordered (numbered) list is “ol.”
- For the actual contents of the list (for either type) each line is opened and closed with “li.”
Blockquotes are the coolest. This is my personal opinion, but the designers of the Cision site made the structure and look of their blockquotes so cool that I try to incorporate a quote into nearly every post that I write. Check this out:
“This is the first test of a gentleman: his respect for those who can be of no possible value to him.” – William Lyon Phelps
The first thing you should notice about this quote is that it has nothing to do with the post, and secondly (and more importantly) that it adds some interesting structure to the piece. Imagine what you could do with a relevant quotation. I love blockquotes and you should, too.
- HTML for blockquotes is pretty straightforward: “blockquote”
One very impactful way to add structure to your posts is to add images (you can add video, audio and other files using WordPress, but it’s advisable to do those as embedded media). Adding images is a pretty straightforward proposition: click the “add media” button, upload an image and it appears within your post. You can go into the HTML attributes for the photo to change its orientation and size, and even add a border by adding “border:(variable)px solid black;”
One of the trickiest things with images is making sure that you have the right to publish them and transforming them into images that you want to use. I personally use Pixabay for royalty-free, attribution-optional images, and then I upload them to the cloud-design site Canva to add text and filters. There are many ways to process images depending upon how much time you want to put into it.
Also, if you want to add a photo that is hosted off-site (and you have permission to), you can use this HTML code to render it within your post:
img src=”(image URL)” alt =”(alt text)”
The one thing to keep in mind is that images tend to slow the load time of your site, so you need to be mindful of number as well as size of images. An image optimizing plugin like Shortpixel or Smush.it is advisable for WordPress users.
Many sites like YouTube, Instagram, Facebook, Twitter, Soundcloud (and myriad others) offer embed codes for most posts. Generally, it’s pretty simple to copy a code from the site, paste and (sometimes) to adjust size. Here are a few examples of embedded media that you could use to enhance the structure or your content:
I fear a future in which Autocorrect achieves consciousness, becomes our texting overlord, and destabilizes civilization. — Neil deGrasse Tyson (@neiltyson) October 24, 2015
I hope some of these tools give you some idea of the creativity that you can assert into your content to make it more interesting to readers. There are a lot of options when it comes to adding structure to your content, and a lot of evidence that style is an important aspect of how we consume digital content.
I’m sure you’ve shared my experience of finding really well-written and underappreciated pieces of content on the web. Oftentimes the structure is indistinguishable from a book, and it deters readers from great content. Hopefully this post helps to make your content a little more appreciated.
Communications Best Practices
Get the latest updates on PR, communications and marketing best practices.
Cision Product News
Keep up with everything Cision. Check here for the most current product news.
Thought leadership and communications strategy for the C-suite written by the C-suite.
A blog for and about the media featuring trends, tips, tools, media moves and more.