Webmasters Stack Exchange is a question and answer site for pro webmasters. It only takes a minute to sign up.
Sign up to join this community
The latest version of Firefox has a button called "Reader View" that is supposed to hide the clutter on the page such as sidebars and headers and only show the article.
https://support.mozilla.org/en-US/kb/firefox-reader-view-clutter-free-web-pages
How do I make my site compatible with this button? When I click the button on my site it says:
Failed to load article from page
All of these have one thing in common.. they need text and they need properly formed HTML code behind them.
Having these two things in your website will not only make them work with these new features but will also give you the benefit of meeting more SEO requirements for better placement in the search engines.
You need at least one <p> tag around the text, you want to see in Reader View and at least 516 characters in 7 words inside the text.
There seems to be no official documentation about this, see https://support.mozilla.org/en-US/questions/1067528. However, I'd advise trying wrapping your article in <article> tag.
Check source code for Firefox:
https://searchfox.org/mozilla-release/source/toolkit/components/reader/Readability.js
* grabArticle - Using a variety of metrics (content score, classname, element types), find the content that is
* most likely to be the stuff a user wants to read. Then return it wrapped up in a div.
You can find lots of comment like:
Remove DIV, SECTION, and HEADER nodes without any content(e.g. text, image, video, or iframe).
Loop through all paragraphs, and assign a score to them based on how content-y they look.
Add a point for the paragraph itself as a base.
Add points for any commas within this paragraph.
For every 100 characters in this paragraph, add another point. Up to 3 points.
After we've calculated scores, loop through all of the possible candidate nodes we found and find the one with the highest score.
Scale the final candidates score based on link density. Good content should have a relatively small link density (5% or less) and be mostly unaffected by this operation.
Good summary is here: https://stackoverflow.com/a/40747529/173149
