Traditionally, headings are used in the print world to break text into digestible pieces of information, helping the reader to focus in on information that may be of interest to them. On the web, headings are used in the same way, however, when we talk about headings online, we are talking about HTML tags. HTML tags range from Heading 1 <h1> through to Heading 6 <h6> and can be found in your visual editor here:
The appearance of headings on your site will depend on the theme you are using and can look quite different from site to site. Headings on our site display like this:
H1 is reserved for the page title
H2 is your primary section heading
H3 is your second-level sub-heading
H4 is a third-level sub-heading
H5 is a fourth-level sub-heading
H6 is a (rarely used) fifth-level sub-heading
Headings Are Signposts to Your Content
As you may already be aware, most of your site users won’t be reading every single word in your post. In fact, the majority of people only scan a webpage. If they catch a phrase or sentence they like the look of, they carry on reading, otherwise, they will continue scanning down the page before exiting.
Headings help to break the content into helpful junks; pointing the reader in the direction of content that may be interesting or helpful to them. Rather than write paragraph after paragraph of content that may overwhelm your reader, we recommend using brief headings, with one or two keywords.
Headings & Search Engines
First and foremost, we feel it’s important to say that you should be writing interesting and high-quality content for your readers, not with the sole purpose of search engine optimization in mind. Don’t be obsessive about writing SEO only text, stuffed with keywords — make sure it’s for the visitor and not just Google!
However, it is worth pointing out that when a search engine scans your page, clear and logical headings get you extra SEO brownie points. As you progress down the heading sizes, the less importance a search engine places on that heading. And although headings range from H1 through to H6, you’ll probably only need the first four in most cases.
As we mentioned above, consistency is key. It may feel tempting to go wild, choosing lots of different text styles and multiple colors, but simplicity is often better. Stick to a few styles and keep it simple. It’s amazing how much more professional your pages will look if there is an underlying pattern.
Important Styling Tips
We’ve put together some quick tips to bear in mind when adding text to your posts or pages:
- Use Unordered or Ordered lists for lists that are relatively short. Resist the temptation to use them for paragraphs — instead, use the Heading styles.
- Bold and Italic should be used in moderation. Do not use bold as a substitute for heading styles — bold is not particularly important to a search engine.
- You may want to select the blockquote button when adding a quotation — it helps the quotation stand out from the rest of the text on the page.
- Keep text left aligned. You’ll rarely need to center align text.
- Most themes will highlight links in a different color and with hover properties.
WordPress & Divi do a good job of working with different size images. This version of the website (2018) inherited a number of images from the previous design. Not everything is sized consistently. Nevertheless some best practices are worth noting. Some image placements use a 16:9 aspect ratio; some use a 4:3 aspect ratio. In our experience, it is good to import all images at 1800×1200 px (3:2 aspect ratio). 3:2 images will generally crop gracefully in either direction. A consistent size helps when images are placed side-by-side in columns.
Optimizing Your Images
Images can be cropped and resized in Photoshop (or equivalent software) before being uploaded to your WordPress site. 1800×1200 px is large enough to fill most screens, but is not so large as to slow down page loading. Photographs should be saved as JPGs to reduce file size. Graphics should be saved as either SVG or PNG.
Good Luck with your New Site!
From our experience, I hope to have touched upon some of the areas most new site owners seem to struggle with when visually maintaining their new website and provide you with some quick and simple tips to help you get started.