Writing for the Web has its own rules, which differ in many ways compared to print. According to studies, people rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences.
It’s the very nature of the web, with the many distractions and a multitude of ways to present content, which makes predictability important. The less you make your reader think about the structure of your page and how to navigate through its contents, the better.
The tips that follow are not strict rules that should be blindly followed. Some of them are suggestions that should be taken into consideration, depending on the intricacies of each case. With that in mind, here we go:
Make your text easier to read (a.k.a.: easier to scan)
Leaving aside the style of a text (formal, informal etc.) and how well-written it is, which is entirely up to you, when it comes to form, there are a few tips that can make it more readable, which, when it comes to the Web means, more or less, easier to scan:
- Prefer using many small paragraphs, instead of few large ones. Furthermore, try to describe one idea per paragraph, as users are likely to overlook an entire paragraph if its first sentence fails to catch their attention.
- Group paragraphs together under descriptive subtitles (sub-headings). There is no strict limit as to the number of paragraphs each such group should contain, as it depends on their content. Two to four paragraphs would be a good starting point, though, as you should also avoid having one subtitle per paragraph.
- Speaking of subtitles and headings, make sure that you keep the proper hierarchy when using them. The main title of the page should be Heading 1 and reserved as the only Heading 1 of the page. That means that you should start from Heading 2 and if you must nest more subsections in a deeper level, you should use Heading 3, Heading 4 etc., depending on their depth. Not only does this make more sense for the reader, but it is also good for SEO.
- Use bullets and numbered lists often when it makes sense. Online users prefer them, as it makes the text more “scannable”.
- Emphasize your most powerful words with bold, to direct the reader’s eye to the key-points of your text.
- Avoid underlining words. On the web, there is the convention that underlined words are usually links. An underlined word that is not a link might confuse the reader and confusion, even if it is momentarily, is bad UX.
- Align text to the left (unless the text is in an RTL language, obviously) and avoid Justify. Justified alignment might look good on print, where there is a specific width, but it is considered a bad practice on the web. Depending on the content, it might leave big spaces between words on certain screens. Also, it is considered harder to read compared to the left aligned text, as when scanning each line, it is easier to find the next line if the lines are of uneven length. This is even more prominent with dyslexic readers.
- For a similar reason, you should avoid center-aligned text, unless it’s too small. If we are talking about 1-3 lines, then it might be acceptable. Anything more, though, could make the text harder to follow.
- If you want to leave an extra blank line between two paragraphs, you should avoid leaving an empty paragraph. It is not semantically correct (HTML Markup validators might display an error), and depending on your CSS, it might make little or no visual difference (e.g., if your
ptag has zero padding). Instead, you could type
Shift + Enter, which would add a
<br>(Line Break) element. For larger gaps, WordPress’ Editor has the spacer block which can be adjusted to any size you like.
(for more tips on how to use the WordPress Editor, you can check out my older article on Gutenberg tips for content editors).
Use the Inverted Pyramid
On informative texts, like a news article, you can use the highly popular in journalism, inverted pyramid technique, to communicate the basics about the topic in the initial sentences.
A reliable way to determine whether the first paragraph is complete, is to check how many of the so-called “Five Ws” it answers:
You can add How as a sixth entry on that list of questions whose answers are considered basic in information gathering or problem solving.
The reason that you might want to answer as many of those question as possible within the first paragraph is because online users are impatient, and they will often avoid moving to the second one.
Of course, the Inverted Pyramid technique doesn’t apply on fiction or texts that aim to entertain.
Make proper use of images and multimedia
The benefit of hypertext over print is that it can have interactive content and multimedia. “Breaking” the text flow with images, video and other multimedia content can be beneficial in many ways; It makes the process of reading more pleasant and, most importantly, provides additional meaning to the content. As with every other thing, though, there are some rules to follow and pitfalls to avoid.
Use the right image format
Before uploading an image, it is important to pick the right format and optimize it. Knowing which is the best format for an image is easy:
- If it’s a photo, prefer JPEG, as you can adjust its quality level to find a good balance with its size. JPEG is especially preferable for bigger, more visual images, taken, for example, by a photographer.
- If it’s an image with transparent background or transparent parts, prefer PNG, as JPEG doesn’t support transparency. As PNG can get too large, though, you are advised to optimize it before uploading, using tinypng.com, which is great at optimizing the specific format.
- If it’s an icon with not much complex design, prefer SVG (Scalable Vector Graphics) whenever you can. SVGs are lightweight and maintain their quality at any resolution, which means that they don’t lose any quality if they are zoomed or resized. Keep in mind that SVG is an XML file, which makes it potentially open to vulnerabilities of which normal image format aren’t affected. For that, it isn’t yet part of the WordPress Core. Therefore, before trying to upload an SVG, you should ask your Admin whether SVG support is enabled or not.
- Avoid GIFs for static images, unless you want to present some short, animated loop. On that case, a good, animated GIF can be great content. You should be careful with the file size, though, as GIFs tend to become too large very easily. If you need to use an animated GIF, don’t forget to optimize it first with a service like ezgif.com.
Add Alt texts to your photos
When you use photos, make sure that you add meaningful Alt texts. Alt texts are used within an HTML code to describe the appearance and function of an image on a page and they are important for both accessibility and SEO.
As moz.com puts it, “The best format for alt text is sufficiently descriptive but doesn’t contain any spammy attempts at keyword stuffing. If you can close your eyes, have someone read the alt text to you, and imagine a reasonably accurate version of the image, you’re on the right track”.
Change the image’s filename
Before uploading an image, it wouldn’t hurt to change its filename to something meaningful. It can be a bit of a hassle but having a descriptive filename like “typing-wordpress-post.jpg” is much better for SEO than something like “IMG_3234435.jpg”.
To avoid potential bugs, you might want to prefer using Latin characters, avoid hyphens, and separate the words with a dash instead of a blank space.
Know when (and when not) to use an image
Don’t use multimedia content just to make the page prettier, if it doesn’t add extra value to its meaning. Photos and videos should be part of the narrative and not intervals of no additional meaning, so take some time to choose them carefully.
On the other hand, you shouldn’t forget the featured image, unless, of course, you actually don’t want to have one. Apart from that, even if your theme doesn’t make use of the featured image, assigning one is advised, as it might be used when someone shares your post on social media or elsewhere (e.g. via Slack, email etc.).
Bonus tip: If you try to share your post on Facebook and it seems that it doesn’t take the correct image even if you did change it, you might need to paste your post’s URL on Facebook’s Sharing Debugger, click “Debug” and see if it fetches the correct image. If it doesn’t, click on “Scrape Again”. This will fetch the most recent data and probably solve your problem.
Be careful with the copyrights
Unless you are the one who took the photo, make sure that its license allows you to re-use it on your site. If it does, make sure that you include the proper attribution whenever necessary. You should avoid picking random photos from Google, as you might break some copyright license.
Host videos on external services
While hosting content on your own server is a good practice, as it helps you keep all your content under the same roof, videos can be an exception. The large size that a video usually has, the bandwidth that it requires and the complexity of serving it properly depending on the user’s internet connection, makes self-hosting videos a bad idea, at least for the average site.
Instead, you should prefer hosting your videos on services like YouTube or Vimeo (Vimeo should be better if you want your video to be private) and embed it on your website. Not only will this take away all the hassle of uploading, encoding, and hosting the video but, unless it’s a private video, it promotes it to an additional channel.
Use hyperlinks (but don’t overdo it)
Do not be afraid to use hyperlinks, internal or external, in your text. Especially internal links to related content within your own site can increase the time that the users spend on it and help them discover more interesting content that you’ve written.
External links, on the other hand, increase the credibility of your content and help the users investigate the subject in more depth if they want to.
To prevent users from leaving your site entirely when they click on an external link, you can set it to open in a new tab. Keep in mind, though, that there is a debate on whether you should force links opening in a new tab/window, as it removes control from the user and, therefore, is generally considered a bad practice, so use it sparingly.
On the other hand, you should be careful to not over-stuff your content with links, as it might make it unreadable or even spammy.
Use tags and taxonomies with caution
If you use tags, make sure that you do it properly and that you don’t misuse the functionality. The main difference between a tag and a category is that categories allow you to broadly group post topics, while you can use tags to describe your post in more detail. A few things that you need to keep in mind when using tags, are the following:
- Do not overuse tags. There is no technical restriction or a strict rule, but usually, a post shouldn’t have too many tags (anything between 1 to 5 seem like a reasonable number).
- Make sure that you add the right tags and create a new tag only if you are certain that it doesn’t exist already. Tags can be created very easily directly from the post’s edit screen, which makes it prone to errors and mistypes. For example, you might accidentally add the same tag twice because of a small spelling error and before you know it, you end up with a tag-hell, with more tags than posts.
- Do not confuse tags with the (obsolete) meta keywords. Back in the early days of SEO, web pages included lists of keywords in the code. These keywords were ones that you may have felt were relevant to the content on your pages, and that you would like your page to rank for. Often, we used to include variations of the same term, to “catch” misspells and mistypes. This practice not only offers no benefit anymore, as Google doesn’t seem to use meta keyword elements, but it might even harm your site if you overdo it, as it might appear as “spammy”. On any case, tags have nothing to do with meta keywords, which means that you should avoid creating tags that way. Instead, use tags to organize your content in a meaningful way.
The same advices apply, more or less, to categories and custom taxonomies as well. It’s just that with tags, because of their structure, misuse is more often.
Don’t forget the search engine metadata
When you write a post, its search engine metadata will be drawn from its title and content. Most times this will be enough, but others you might want to override that. For example, on your site you might want to feature a smart, “catchy” phrase that will draw the reader’s attention but wouldn’t make much sense if seen on Google’s search results, where you need more descriptive wording.
Also, you should always keep in mind that Google typically displays the first 50–60 characters of a title tag, so, sometimes, you might need to adjust the post’s meta title.
The exact same thing applies to the meta description, which is a brief summary of a web page. Meta descriptions can be of any length, but Google generally truncates snippets to ~155–160 characters. It’s best to keep meta descriptions long enough that they’re sufficiently descriptive, so a recommended description should be between 50–160 characters. Keep in mind that the “optimal” length will vary depending on the situation, and your primary goal should be to provide value and drive clicks.
Check your permalinks
The permalink is the full URL of the post, page, or other piece of content that you create on a website and in WordPress it consists of the site’s domain name plus the so-called slug, which is automatically generated based on the entry’s title.
Most of the times it should be OK to keep the automatically generated slug. Others, though, it might be good to make some adjustments if, for example, the slug becomes too big because of an exceptionally large title.
A quite common scenario where the post’s permalink needs some adjustment is on multilingual sites, where you duplicate the translation from the original and it inherits the same permalink. On that case, even after you translate the title, the permalink will stay the same and it might need manual adjustment to match the translated title.
A good to know tip regarding slugs and URLs is that you should prefer separating words with a dash ( – ) instead of an underscore ( _ ). As Google’s Matt Cutts explains in an old video, a dash between two words acts as a separator, while an underscore signifies that they are, actually, one single word.
Size does matter
When it comes to the size of a text, an online publication might not have the strict limitations of print media, but there are suggested practices to make it more readable and appealing to the reader. Having the next article or the next website one click away, online readers can be impatient, and their attention is far from granted.
That’s why you should try to avoid extremely large texts, unless you decide that they are necessary to fully communicate the essence of your message.
If the text is too big, try to break it to sections, which, depending on their length, could even be presented separately, each one in its own webpage.
If you want to present an exceptionally large text (e.g., more than 10-15 pages), it might be worth considering writing a summary and attach the full text as a downloadable document (PDF, DOC or whatever).
On the other hand, too small texts can be bad as well, as they provide insufficient information on the subject and make the page unworthy of revisiting or bookmarking. Especially if you write for an e-shop, the lack of sufficient description on a product might cause uncertainty and discourage the user from a purchase.
Write for your readers, not for the Bots
A common mistake that many people do when authoring articles for the web is writing with search engines in mind instead of their human readers. The goal of Google and the other search engines is to detect and promote the content that they believe to correspond to their users’ expectations. That’s why nobody knows exactly how Google’s algorithm works and that’s why it is constantly changing, adapting, and evolving. Trying to outsmart search engine bots is vain and, eventually, will most probably do more harm than good.
Therefore, instead of stuffing your content with keywords in sentences that make little sense for a human reader, you should focus on the obvious and most reasonable thing: try to identify your target-group and write quality content that you think it makes sense for them.
And last but definitely not least: take some time to edit and curate your content. On that note, tools like Grammarly or Microsoft Editor are must have. A comprehensive text, without spelling and syntactical misteaks (see what I did there?) can inspire trust towards its author. No matter how well-designed and user friendly a website is, poor content can, and will, undermine the entire project.
After all, the overused phrase “Content is king” became a cliché for a reason.