As a content manager, I want to know which SEO issues my page has

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Duplicate
• Affects Version/s: None
• Fix Version/s: None
• Component/s: SEO Tools > Page Audit
• Labels:
  • fc_21_05
• Epic Link: tango-page-audit
• Sprint: TANGO | #55 DIS | Feb19-Mar05, TANGO | #56 DIS | Mar05-Mar19, TANGO | #60 DEV | Apr30-May14, TANGO | #61 DEV | May14-Jun04

Motivation

SEO checks provided by PageSpeed can help content authors & marketers fine-tune the technical and easy-to-fix SEO-related issues in their page.

We are just providing those checks that are achievable for this kind of users to fix.

Scalability

Limits of the feature
 

Requirement	Limit
Number of issues retrieved	None
Number of failing elements shown	100

Assumptions

• Users won’t have access to most of content&layout configuration > we’ve selected only those issues they may be able to do something about

• Tips should be adapted to what/where LR allows user to modify

Design

https://www.figma.com/file/I0BImwTEY740kKEseduLU5/LPS-111803-Page-audit-check-one-page-issues?node-id=253%3A6602

Requirements

 

	Requirement	Specifications
1.	When displaying the section Accessibility in the Page Audit panel, a list of checks and number of failing elements for each one will be shown.
1.1	Only those checks with failing elements retrieved will appear on the list.
2.	Clicking on the matching line will lead to the detail level. (Titles for checks are specified in the next requirements)
3.	All checks in the detail view will have 4 sections: Title, Description, Tips and list of failing elements.
4.	Fields for description and tips will be collapsable and they will be collapsed by default.
5.	Checks details:
5.1	Retrieve check for image-aspect-ratio	There can be several issues. Title: Incorrect image aspect ratios. Description coming from the API: Page displays images with incorrect aspect ratio. If a rendered image has an aspect ratio that's significantly different from the aspect ratio in its source file (the natural aspect ratio), the rendered image may look distorted, possibly creating an unpleasant user experience. Learn more [link to https://web.dev/image-aspect-ratio/ ] There will be a “Tips” text to contextualize the possible solutions: Image aspect ratio can be caused by a fixed height&width in the template that doesn’t fit the original image’s ratio. List of failing elements
5.2	Retrieve Check for meta-description	Single issue. Title: Missing meta-description There will be a general description coming from the API: Page does not have a meta description. The meta description provides a summary of a page's content that search engines include in search results. A high-quality, unique meta description makes your page appear more relevant and can increase your search traffic. Learn more [link to https://web.dev/meta-description/ ] There will be a “Tips” text to contextualize the possible solutions: Meta description can be added in the Configuration section of this page.
5.3	Retrieve Check for link-text	There can be several issues. Title: Link texts Description coming from the API: Link text is the clickable word or phrase in a hyperlink. When link text clearly conveys a hyperlink's target, both users and search engines can more easily understand your content and how it relates to other pages. Learn more [link to https://web.dev/link-text/ ] “Tips” text: Make link texts more descriptive by avoiding click here, click this or learn more like expressions. List of failing elements
5.4	Retrieve Check for is-crawlable	Single issue. Title: Page blocked from indexing. There will be a general description coming from the API: Search engines are unable to include your page in search results if they don’t have permission to crawl it. Only block indexing for content that you don't want to appear in search results. I want to know more [link to https://web.dev/is-crawable/ ] “Tips” text: "noindex" specification for robots can be changed in the Configuration section of this page.
5.5	Retrieve check for hreflang	Single issue. Title: Invalid hreflang Description: Many sites provide different versions of a page based on a user's language or region. hreflang links tell search engines the URLs for all the versions of a page so that they can display the correct version for each language or region. I want to know more [link to https://web.dev/hreflang/ ] “Tips” text: In a Liferay site, hreflang links are automatically generated. If it's missing, the issue could be originated by the theme or in the OpenGraph extension point.
5.6	Retrieve check for canonical	Single issue. Title: Invalid canonical URL Description: When multiple pages have similar content, search engines consider them duplicate versions of the same page. Valid canonical links let you tell search engines which version of a page to crawl and display to users in search results. I want to know more [link to https://web.dev/canonical/ ] “Tips” text: In a Liferay site, canonical URLs are automatically generated. If it's missing, the issue could be originated by the theme.
5.7	Retrieve check for font-size (single issue?)	Single issue. Title: Illegible font sizes Description: Many search engines rank pages based on how mobile-friendly they are. _Font sizes smaller than 12 px are often difficult to read on mobile devices and may require users to zoom in to display text at a comfortable reading size. I want to know more [link to_ https://web.dev/font-size/ ] Tips: This issue occurs when 60% or more of the text has a font size smaller than 12 px. Check set font sizes in the web content editor, the fragment, the template or the style book to find the rule that is causing the illegible text.
5.8	Retrieve check for tap-targets	Several issues. Title: Small tap targets Description: _Tap targets are the areas of a web page that users on touch devices can interact with. Buttons, links, and form elements all have tap targets. Making sure tap targets are big enough and far enough apart from each other makes your page more mobile-friendly and accessible. I want to know more [link to_ https://web.dev/tap-targets/ ] Tips: Targets that are smaller than 48 px by 48 px or closer than 8 px apart fail the audit, so make sure your layout respects these rules.
5.9	Check for document-title*	Single issue. Title: Missing <title> element Description: Search engine users rely on the title to determine whether a page is relevant to their search. It also gives users of screen readers and other assistive technologies an overview of the page. I want to know more [link to https://web.dev/document-title/ ] Tips: <Title> element is automatically generated from the asset Title, but you can change it in the Configuration section of this page.
5.10	Check for crawlable-anchors*	Several issues. Title: Not all links are crawlable Description: Search engines may use 'href' attributes on links to crawl websites. Learn More [https://support.google.com/webmasters/answer/9112205] Tips: Google can follow links only if they are an <a> tag with an href attribute. Ensure that the links have this format: <a href="https://example.com"> and link to an appropriate destination, so more pages of the site can be discovered.
6.	There will be a Show more link every 10 failing elements	It will show 10 more items each time it is clicked. There is no show less.
7.	Failing elements will be ordered as given back by the API
8.	When there are more than 100 failing elements retrieved, a message will be shown	Showing up to 100 elements to fix.

 

Acceptance Criteria

• Given the page audit panel
• When the users access the second level
• Then they can see the title of the issue, the description and tips sections collapsed by default and the list of failing elements for that issue

–

• Given the page audit panel
• When the users access the second level
• Then they can see as many failing elements for that issue as it was indicated in the first level of the panel for that issue

–

• Given the page audit panel
• When there are more than 100 failing elements for a single issue
• Then the users can see a message above of the elements' list: "There are more than 100 elements to fix"

–

• Given the page audit panel
• When there are more than 10 failing elements for a single issue
• Then the users can see a Show more button every 10 failing elements, and when they click on it another 10 elements are displayed and the button turns into Show less

–