Optimizing Your Apollo 2.0 Site

In the last few months, we’ve moved over a dozen websites into the Apollo 2.0 WordPress template. As part of the process, the Web Services team conducts an optimization report right before launch – we review the site for any potential issues related to accessibility, navigation and usability, and make recommendations to the site administrators on how to solve those issues.

We’ve uncovered a few common issues across a majority of these sites – these tips and recommendations can help while you build out your site content and help speed up the final review process leading up to launch.

Using headings semantically

When working on the content of you website, you’ll find that you have several different options for displaying headings in your content. Headlines are used to group relevant content together, and are useful for breaking up large amounts of content to make it easier for a user to scan the page for the material they are needing.

Headers can range in sizes from H1 to H6 – in most web designs, the size of the text for the title will vary based on the tag selected, with H1 being the largest. This creates a visual consistency for people when scanning a page for structure – the larger the headline, the more visible it is.

In Apollo 1.0, many of our admins would choose the heading size based off of their aesthetic sense – they would choose h3 or h4 as a default size for the headings they displayed on their page, and skip using h2 tags. Unknowingly, when they made this decision, they caused issues with both the content optimization and accessibility of the site.

Why does it matter?

Accessibility

People who use assistive devices to read page content, like screen readers, use shortcuts to tab through to headings on a page – when the heading are used out of order, it can make it difficult to navigate and find the content they are looking for.

Search Engine Optimization

Google holds the formula on how its search engine algorithm works close to the vest; while they share some details to promote best practices, they keep some things confidential in order to keep web developers from trying to artificially inflate their search engine rankings.

One thing we do know is that heading order and consistency is important in helping the search engine categorize the site. Google first looks for the H1 tag to determine the page title; then it skims the rest of the page for additional headers. How much weight it gives additional titles in unclear, but they have indicated at the very least that h2 tags do affect relevancy. When we skip using the H2 tags on the site, we give up an element that can affect how well the page ranks for a particular set of keywords or content.

How many h2 tags should a page have? That depends on the depth of your content and how it should be organized to make it easy for an audience to scan the content. Build your page to be easy for a human to use, not to affect a Google page ranking. It is unlikely that Google measures h2 tags past a certain point on a page, as this would present a content author an opportunity to try and artificially inflate their relevancy scores (for example, making all content on a page headings, rather than using a combination of headings and paragraph tags, can negatively affect your ranking).

Avoid saying Click Here

Another common accessibility issue on our pages are links that do not provide enough context. Both screen readers and search engine crawlers rely on the text in the link itself:

  • A person using an assistive device can tab through the content of a page, moving from link to link. The screen reader will use the use the text of the link itself to identify the link.
  • A crawler uses the link text to associate the link with the site or page it links to – it provides additional context for organizing the link and it relevancy to key words.

In both cases, the more descriptive the link can be made, the better:

To apply for our undergraduate summer program, click here.

Click here provides no contextual relevance and give no indication where the link will go.
A better way to address this would be to make the subject the link, or rewrite the sentence
as a declarative task, which provides much more context.

Apply for the undergraduate program

or

Undergraduate Program Applications

Menu navigation imbalances

Our auto magic menu is great for displaying sections of a site that have many subpages, but if only one section has significant depth, it can create a navigation challenge for our users. For example, take a look at this hypothetical research section:

Sample Menu Screenshot

In this case, the fourth subpage of research, laboratories, makes the menu difficult to scan on a desktop due its depth; having all of the subpages visible pushes the second column of links down and possible off-screen on a desktop.

In this situation, our recommendation would be to hide those subpages from the primary menu (in the inspector or the right-hand sidebar, you can select to hide a page from the menu). In this example, the top level parent page, Laboratories, could be used as a landing page to highlight the sub-pages; either all of the links could be listed on the page, or a Gutenberg card block could be used to highlight each lab.

Simplified navigation menu with cards on landing page

By hiding the pages, we reduce the size of the menu to a single drop-down, and make it much easier to navigate.

We’re here to help

Have questions? Web Services is ready t help you in your migration. Visit our support site for documentation on Apollo 2.0, or contact us directly with your questions.