Discovering Career Site Design Leading Practices

Meta tags, also called metadata, help tell search engines and users what your site is about. Metadata is used to describe individual pages on a website, allowing search engines to understand what each page contains. This data helps search engines evaluate the relevance of the page content, thus determining whether a page will be displayed within search results.

Search engine results:

The Page Title also displays on the browser tab:

Metadata contains three main elements:

Page Title (or Title tag) – Your site’s page title is the heading that is displayed as a blue link in the search results. The page title is considered the single most important element for telling search engines what the page is about and which keywords to focus on. Titles should be 70 characters or fewer, including spaces, and should lead with the most important keyword. In addition to site-wide metadata, every page should have a unique title and description.

Description (or Meta Description) – The description appears directly below the title and URL in the search engine listing. Your page’s description should contain similar information to your page title (namely a targeted keyword), but not be exactly the same – it should be used to describe concisely what the web page is about. The page description should be limited to approximately 160 characters, including spaces.

If you go over the word count, the copy will not be shown on the search engine results page. Also be aware not to "keyword stuff" (use the same keyword more than once in your description). A well-written description not only tells users what is on your page, but also entices them to visit your site. A description is what shows up here in the search engine results. It is like good window dressing. Sites with poor descriptions will get less click-throughs, and the search engines will demote your site in favor of other sites. Do not use quotes or any non-alpha characters. (Google cuts them out of the meta description.)

Keywords – The importance of including keywords has decreased in recent years because search engines no longer view the keyword tag as a major factor when ranking results. The only search engine that looks at the keywords anymore is Microsoft’s Bing, and they use it to help detect spam. However, it is still extremely important to conduct keyword research, keeping you aware of what terms visitors are searching for in order for you to optimize for those phrases. Using keywords in the content is much more important than populating the keywords in the metadata.

1 Metadata: Populate Site-Wide Metadata

The site-wide metadata is set from Settings→Site Configuration→Site Information. This information is used if it is not replaced at the page level. For the description, include the company name, jobs or careers, and the strategic positions the company is hiring for (for hospitals, for example, list doctors, nurses, and so on). If the company has just one location, also include that.

2 Metadata: Populate Page Metadata

Unique metadata should be specified for every page of the site. This is a leading practice and increases SEO value.

Do this by navigating to the page, clicking the gear icon, and selecting Tags or Meta Tags.

Enter unique metadata for pages of:

• Each page type (with the exception of landing pages): Home, Content, and Category
• Each locale, in the appropriate language
• Each brand

On a Category page for sales jobs, for example, include a description such as the following: Apply online for Best Run Sales Jobs.

Content on pages should be organized with headings. Pages should be structured in a hierarchical manner, generally with one 1st degree heading (＜h1＞) being the most important (usually page titles or main content heading), then 2nd degree headings (＜h2＞ - usually major section headings), down to 3rd degree headings (sub-sections of the ＜h2＞), and so on. In WAVE, use the Outline tab in the side bar to view the headings.

Do not use text formatting, such as font size or bold, to give the visual appearance of headings - use actual heading (＜h1＞ - ＜h6＞) for all content headings. Assistive technologies and other browsers rely upon the literal markup of the page to determine structure. Likewise, do not use headers to achieve visual results only. For instance, if you want to highlight or emphasize an element within your content that is not a heading, do not use heading elements to achieve the visual appearance you want. Instead, use font size, bold, or italics.

First level headings should contain the most important heading of the page, generally the document title, to convey what the page is about. Career Site Builder adds a ＜h1＞ tag for each page automatically, from the page title, but it is typically not displayed. The site is still considered to be within accessibility guidelines. The Home page of a CSB site will take on the page title from Settings→Site Configuration→Site Information, but it is not displayed on the page.

For other page types, the ＜h1＞ tag is taken from the page title for that page, and is hidden by default.

On Category pages, however, the ＜h1＞ tag can be visible or hidden.

The ＜h1＞tag is required on Category pages, but customers can choose to hide it and still be within guidelines.

Screen reader and keyboard users often navigate by heading elements. An empty heading will present no information and may introduce confusion. Basically, any element that has a header should have it populated, but you can hide it.

Alt text, also referred to as alternative text or alt tags, is used to describe the images on your web page. It is important to add alt text to the photos on your website for three main reasons:

1. If images fail to load: If, for any reason, an image does not render on a Web page, the alt tag will display in its place. This means visitors to that Web page understand what image should be there even though they are unable to see it.
2. For Search Engines: Search engines, such as Google and Bing, regularly crawl web pages. It is easy for them to understand text copy on a page, but images are difficult to read. This is where alt text comes to play. Alt text is used to describe to search engines what the image is showing, allowing them to give users better results when performing an image search. Alt text also improves the SEO value of the site.
3. For the visually impaired: The visually impaired use screen readers in order to browse Web pages. These screen readers will identify and interpret what is being displayed on their screen. For this reason, it is important to convey contextual information in alt text that will explain the image in more detail.

Alt text should be populated for all images and in all languages. Enter unique alt text for each image. Include any unique or relevant content about the image. Add alt text from the Image Selector window. You can add it when you upload an image, or you can add it later.

Be sure to provide alt text for logos too.

When two images have the same alt text, this often causes redundancy or indicates incorrect alt text. Remove unnecessary redundancy and ensure that the alt text for each image is appropriate. The only time that you don’t need to include alt text is when the image is used as a decorative background image, as shown below.

Embedded text cannot be read by screen readers or search engines. The leading practice is not to use embedded text on images. If the customer wants to retain images that contain embedded text, add alt text to the image. Note that web accessibility tools such as WAVE cannot detect embedded text on images.

• Hyperlink meaningful text: Linking to a "Click here" label is bad for SEO and bad for users, who are implicitly forced to hunt for more information on what exactly they are clicking on. Add a title tag to every link. Users should feel confident as they click from page to page.
• Use consistent styling: Pick a design and stick to it. There should be no variation in the way links are visualized across the site.
• Cut the blue non-link text: Blue is strongly associated with clickability. If blue text on a site is not clickable, this results in frustration. The same is true for underlined text: it’s strongly associated with links.
• Mouse-over: Links should change style on mouse-over, emphasizing to users that they are clickable.
• Padding: Ensure links have enough space to be clickable on mobile devices.

If a link contains no text, the function or purpose of the link will not be presented to the user, which can create confusion for screen reader users. The most common issue is leveraging embedded text on images as a link. Remove the empty link or provide title text within the link that describes the functionality and/or target of the link. Or add alt text to the image.

Anything that has a link should also have a title tag. The title text typically appears when the user hovers the mouse over a link. The title text is used to provide advisory information; specifically, it should indicate what the link actually does. What specifically is on that page? What will you learn there? As a leading practice, the title text should be different from the link name, but it is better to use redundant title text than to not populate it.

Category page link example:

In some areas, the product duplicates the link text as title text in the background, so it’s not marked as an accessibility error. There is no way to modify this.

When adjacent links go to the same location (such as to a product page), this results in additional navigation and repetition for screen reader and keyboard users. Adjacent links that go to the same location should be combined, or one should be removed. Three column components use the same link for the header and image, as shown below. This cannot be changed. You could remove the link from the image or remove the header and/or separate link.

Adequate contrast is necessary for all users, especially for users with low vision. This is often an issue for hover colors. Increase the contrast between the foreground text and background color to a contrast ratio greater than 4:5:1. Larger text (larger than 18 points or 14 point bold) does not require as much contrast as smaller text. Ensure a contrast ratio greater than 3:1. Some customers’ brand colors do not provide enough contrast. We recommend that you use colors on your site that fall within contrast guidelines.

This hover link doesn’t provide enough contrast:

…unless you also change the background color for the component, as shown below.

The original search grid format does not meet accessibility guidelines and makes it difficult for people with visual impairments to find jobs on the career site. When feasible, we recommend enabling the Unified Data Model so candidates can use the enhanced, accessible search functionality.

The Google job map is maintained externally and does not adhere to all accessibility guidelines. Customers can now configure the Google Job Map to display a previously hidden message that was only readable from a screen reader. From the Google Map Component, enable Show Heading. The provided text can be changed from Tools→Translations. Clicking on the link opens a page populated with a search bar and search results.

In order for there to be a valuable user experience, information must be:

• Useful – your content should be original and fulfill a need
• Usable – site must be easy to use
• Desirable – image, identity, brand, and other design elements
• Findable – Content needs to be navigable and locatable
• Accessible – Content needs to be accessible to people with disabilities
• Credible – Users must trust and believe what you tell them

Optimize site conversion in two critical areas:

• Job Applies
• Talent Community Membership and Growth (Create an Account)

Enhance Usability:

• Minimize site drop-off and mitigate user attrition in specific areas
• Enable visitors to find relevant jobs quickly, easily, and intuitively

Showcase Brand:

• Showcase brand in a way that is creative and visually consistent with guidelines
• Communicate company values

Simplifying design, before and after

The "after" design in this example (not a career site) is much more open with whitespace. Images feature a single product with high-resolution pictures and contrasting colors.

7 Rules of planning a simple site

1. Research your audience and the sites they visit the most. Look for case studies on design changes from those sites and how those resulted in improvement in key areas.
2. Create a mashup of all those "working" components for your own site.
3. Obey the rules of cognitive fluency when you lay out your design. Put things where your visitors have grown accustomed to finding them.
4. Rely on your own colors, logo, and typeface to communicate clearly and subtly. Don’t add copy and/or images unless it communicates something your visitor actually cares about.
5. Keep it as simple as possible , that is, one large image instead of a bunch of little ones, and one column instead of three ; utilize as much white space as possible.
6. Double check to make sure your site fits the public expectation in pricing, aesthetics, speed, and so on.
7. Remember that "prototypical" doesn’t mean that every aspect of your site should fit that mold.

Source:

https://medium.com/@tommyismyname/why-simple-websites-are-scientifically-superior-168074e9575#.dwy8r9pdx

• Use metadata to improve SEO and click-throughs: Set clear, keyword-focused page titles (≤ 70 characters) and unique meta descriptions (≈ 160 characters, no keyword stuffing, avoid quotes/special characters). Keywords in metadata matter less now; focus on keyword use in page content.
• Build accessible page structure with headings and images: Organize content with real heading tags (h1–h6) in a logical hierarchy (don’t fake headings with formatting), avoid empty headings, and add unique alt text for all meaningful images (including logos). Avoid embedded text in images when possible.
• Improve usability and accessibility of links, contrast, and job search: Use meaningful link text (not "click here"), add/link title tags, remove empty/redundant links, ensure consistent link styling and mobile-friendly padding, and meet color contrast guidelines. Upgrade to more accessible job search (e.g., Unified Data Model) and configure Google Job Map with a visible heading/message when needed.