Web阅读模式:标题、作者和日期元数据提取

本文详细介绍了阅读模式如何从网页中解析文章的某些元数据。< p >本文是Web阅读模式和读取模式解析器的系列中的第三部分。

提取元数据是什么?为什么?

每个读取模式都希望为显示的文章显示适当的标题。但是,有些人也包括一个束缚。划平通常是第一款的第一段;记住文章作者。vylines通常包括出版时间以及作者的名称。

下表概述yabo亚博体育下载了解析器,它们提取的元数据以及它们用于提取它的方法的方法概述。

终极阅读模式元数据提取兼容表
产品 解析器 元数据
标题 作者 日期
GNOME网络 Mozilla可读性 文件名 元作者 没有一个
火狐浏览器 可读性特定于
维瓦尔第 没有一个
Yandex浏览器
三星浏览器(安卓)
Apple Safari. Safari读者 野生动物园特定
傲游浏览器 Maxthon读者 最新特定 没有一个
微软边缘 Edgehtml. 特定于边缘
微软边缘(安卓) Dom Distiller. DOM蒸馏器特定 没有一个
谷歌浏览器(安卓)
水银读者 读者 Mercury-specific 元作者 打开图形
Instapaper 搬运工 打开图形
Mozilla Pocket. 未知 特定场地解析

当包含在页面上检测到的格式时显示日期。没有一个解析器尝试解析日期字符串或对其进行任何类型的本地化。< p >本文的其余部分将详细介绍上述每个解析器以及它们如何挑选元数据。在深入讨论这个问题之前,我将快速地解决一个常见问题,这可能正是您阅读本文的原因。

避免重复的百分比和日期

您可能会看到不需要的(在读取模式实现中不支持它)或重复(在读取模式实现中)按键或发布日期。努力解决如何摆脱这些问题。< p >下面的标yabo亚博体育下载记将在所有读取模式实现中解决这个问题,假设有问题的解析器能够正确地检测出作者和发布时间。这甚至在不使用署名的浏览器中也可以工作。

<第> 

文章标题< p >通过作者署名">Cave Johnson on< time class="数据线" > 2018-08-09 < /时间>[...]

请注意,以上不是在所有读取模式实现中对正确的元数据提取的一次停止答案。但是,上面的标记示例将允许解析器删除按键段落。数据线或按线条将从文档中删除(假设他们与解析器持有的值相匹配);留下不到25个字符的段落,如第1部分所述,也将从文档中删除。

现在就是这样,让我们​​进入真正的Nitty-gridy读取模式元数据提取细节。

在Mozilla Readability、Maxthon Reader和Mercury Reader中的作者名称

这是最直接甚至Web标准兼容的检测方法。Mozilla可读性,Maxthon Reader和Mercury Reader将找到第一个实例Meta [name =“作者”]元素,并使用其值作为主要的作者名候选者。< p >以下示例将将作者名称设置为“Cave Johnson”:

Mozilla的可读性以及Maxthon阅读器还支持其他检测机制,包括* [rel =“作者”],但是这些方法不可靠,并且难以使用,因为它们涉及从文章正文开头开始计算DOM-distance和深度差。

Mozilla可读性的标题 - 方法

有两种主要方法用于确定物品标题,并从第一个开始导出它</code>文档中的元素(与<code class="notranslate" translate="no">文件名</code>属性)。Gnome Web在这里是例外,只是使用<code class="notranslate" translate="no">文件名</code>逐字。</ p>< p >第一种方法查找由字符序列组成的段分隔符:空间+分离器+空间;分隔符是以下字符之一:yabo亚博体育下载<code class="notranslate" translate="no">-</code>那<code class="notranslate" translate="no">></code>那<code class="notranslate" translate="no">»</code>那<code class="notranslate" translate="no">|</code>那<code class="notranslate" translate="no">\</code>, 要么<code class="notranslate" translate="no">/</code>。如果这样的序列如果发现,则最左边的段被认为是文档标题的候选者。一种<code class="notranslate" translate="no">文件名</code>“<samp class="notranslate" translate="no">文章标题 - 示例网站</samp>“ 将得到 ”<samp>文章题目</samp>作为候选人的头衔。</ p>< p >如果第一个方法发生故障,则尝试第二种方法。此方法查找一个单词后跟冒号(yabo亚博体育下载<code class="notranslate" translate="no">:</code>)和左侧的空间字符和第二段被认为是标题候选者。一种<code class="notranslate" translate="no">文件名</code>“<samp class="notranslate" translate="no">示例网站:文章标题:额外</samp>“ 将得到 ”<samp class="notranslate" translate="no">文章题目</samp>作为候选人的头衔。</ p>< p >对左右(RTL)脚本系统和语言没有支持。</ p>< p >在以上两个例子中,候选人的头衔都是“<samp class="notranslate" translate="no">文章题目</samp>“。然后根据以下标准进行评估候选标题:yabo亚博体育下载</ p><ul> <li>标题必须包含至少五个空格分隔的单词</li> <li>标题必须包含16-150个字符(抱歉)<abbr title="Chinese-Japanese-Korean">CJK</abbr>语言!)</li> </ul> <p>上面的示例候选人都产生了候选标题“<samp class="notranslate" translate="no">文章标题”;未通过以上标准的。它有少于五个字和少于16个字符。在这种情况下,原来的<code class="notranslate" translate="no">文件名</code>而不是使用。</samp></p> <aside> <ins class="adsbygoogle" data-ad-client="ca-pub-1835247814769107" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="8623261132" style="display:block"></ins> </aside> <p>许多网站和内容管理系统使用其他段分隔符,例如中间点(·)和子弹(•),这也与可读性不兼容。例如,WordPress例如,使用en-dash( - )而不是连字符 - 减号( - )字符作为段分隔符,如默认情况下不支持。</ p></section> <section> <h3>Safari读者</h3> <p>Apple的可读性的叉子与Mozilla可读性很少,尺寸的两倍多。</ p>< p >Safari读者通过在视觉上检查文档来查找该文档以查找它确定最有可能的文档标题的标题。候选人通过靠近野生动物园读者确定是文章的视觉顶部以及它们的Levenshtein距离<code class="notranslate" translate="no">文件名</code>。</ p>< p >选择标题后,SAFARI可以从具有类名的元素从COMPORRIEN中挑出作者,例如<code class="notranslate" translate="no">作者名称</code>那<code class="notranslate" translate="no">article-author</code>,或其他候选人喜欢<code class="notranslate" translate="no">a [rel =“作者”]</code>。出版日期通常是<code class="notranslate" translate="no">日期</code>最接近标题的元素,或类名类似的元素<code class="notranslate" translate="no">数据线</code>要么<code class="notranslate" translate="no">入学日期</code>。通常会选择视觉上最接近标题的候选人。</ p>< p >Safari从文档中向Schema.org Microdata和Open Graph协议元数据源,但从未用于填充按键。它们仅用于确认已选择候选人后的选择。</ p>< p >为确保Safari Reader兼容性,您可以添加它想要查看的类名。最后,Safari Reader需要试用和错误以确保兼容性。</ p></section> <section> <h3>Maxthon读者</h3> <p>Maxthon Reader是Mozilla可读性的叉子,也是Safari Reader的清晰灵感,并为中文,日语和韩语(CJK)语言网站进行了调整和优化。Maxthon Reader专用于热门的中文新闻网站使用了几个特定于站点的修复。yabo88软件下载</ p>< p >标题选择算法主要是基于遍历所有的<code class="notranslate" translate="no">h1</code>-<code class="notranslate" translate="no">编辑</code>元素,并测量它们的可视大小,测量它们与文档可视顶部的距离,并确定它们是否部分匹配<code class="notranslate" translate="no">文件名</code>。标题至少要有四个字符长。的<code class="notranslate" translate="no">文件名</code>如果它无法在文档中找到匹配的标题,则以其全部使用。</ p></section> <section> <h3>微软边缘</h3> <p>Edge是唯一发布了Web开发人员指南的Web浏览器!</ p>< p >标题是选中的<code class="notranslate" translate="no">Meta [name =“标题”</code>元素。它的值应该匹配an中的任意一个<code class="notranslate" translate="no">h1</code>-<code class="notranslate" translate="no">h3</code>元素(最好带有<code class="notranslate" translate="no">标题</code>类名称),或产生部分匹配<code class="notranslate" translate="no">文件名</code>。与本文讨论的许多其他方法相比,这是惊人的直截了当,甚至正式记录!</ p><aside> <ins class="adsbygoogle" data-ad-client="ca-pub-1835247814769107" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="1483137714" style="display:block"></ins> </aside> <p>作者署名从包含a的文章的第一个元素中选择<code class="notranslate" translate="no">按线条名称</code>班级名称。发布日期同样是包含该元素<code class="notranslate" translate="no">数据线</code>类名,或者它可以选择<code class="notranslate" translate="no">元[name =“displaydate”]</code>元素。简单,对吗?</ p>< p >然而,边缘似乎与这两个项目相当越野车,并且通常完全忽略划线和数据线。再加载并再次尝试通常有助于帮助。</ p>< p >微软边缘的完整示例如下所示:</ p><figure class="code" resource="#article-source-code-example3" typeof="cc:Work schema:SoftwareSourceCode"> <pre><code class="notranslate" translate="no"><title>文章标题|示例网站</ title> <meta name =“title”content =“Stramity标题”> <p> by <span class =“按键 - 名称”> cave johnson </ span> </ p> <p>Class =“Dateline”> 8月,2018年9日</ span> </ p></code></pre> </figure> <p>Edge还可以识别其他一些(未登记的)检测方法,比如<code class="notranslate" translate="no">元(name = " auhtor ")</code>,类名类似<code class="notranslate" translate="no">入学日期</code>那<code class="notranslate" translate="no">发布日期</code>,和<code class="notranslate" translate="no">.fn.auhtor</code>。</ p></section> <section> <h3>Chrome Dom Distiller.</h3> <p>谷歌的Chrome Dom Distiller只是<a href="chrome-simplified-view-android.html" title="不情愿地包含在Android的Chrome中">不情愿地包含在Android的Chrome中</a>隐藏在可访问性菜单的选项下。不过,它在微软的Android Edge中表现得更为突出。</ p>< p >坦白地说,我不知道它是否有效。Chrome DOM蒸馏器有超过23000行Java代码,我还没有弄清楚它是如何工作的。</ p></section> <section> <h3>水银读者</h3> <p>Mercury Reader,可作为谷歌浏览器的浏览器扩展名,使用<code class="notranslate" translate="no">h1</code>-<code class="notranslate" translate="no">h4</code>最接近它确定为文章的顶部。</ p>< p >如上所述,水星读者从<code class="notranslate" translate="no">Meta [name =“作者”]</code>元素。它通过开放图协议提取出版日期,这是与下一步讨论相同的方法。</ p></section> <section> <h3>Instaparser(开放图形协议)</h3> <p>得知只有Instaparser使用Open Graph协议元数据时,我感到很惊讶。这是Facebook和其他社交网络使用的元数据标签,用于从网站中提取元数据,并生成富链接共享体验。它们得到了所有主要新闻网站和博客的广泛支持。</ p>< p >我已经讨论了<a href="rdfa-socialmedia-metadata.html" title="RDFA解析器由社交媒体网站使用">RDFA解析器由社交媒体网站使用</a>在过去。例如。属性属性应该包含空格分隔的值,但是如果属性属性是单个值,则只能处理元数据,并且不包含空格,则只能处理元数据。如果他们有意外的额外属性,Instapaper还存在识别元标记的问题。</ p>< p >InstaParser使用属性(RDFA)解析器中的非标准兼容资源描述框架,以提取包含标题和按键作者的打开图协议(OGP)元数据,其中包含发布日期</ p><figure class="code" resource="#article-source-code-example4" typeof="cc:Work schema:SoftwareSourceCode"> <pre><code class="notranslate" translate="no"><meta property =“og:title”content =“物品标题”> <meta属性=“文章:作者”content =“cave johnson”> <meta属性=“og:site_name”content =“示例网站”> <metaproperty =“文章:发布_time”content =“2018-08-06T12:54:47 + 00:00”></code></pre> </figure> </section> <section> <h3>口袋</h3> <p>最后,有口袋,我的建议根本不打扰它。口袋不会为Web开发人员发布任何建议。唯一一个关于他们的解析器所知的事情是它在大量上依赖于特定于现场的解析。</ p>< p >我通过Pocket从不同的url运行了相同的测试文档,并得到了不同的结果。Pocket的解析器会在文章中间或周围的站点导航中提取奇怪的链接,并将其设置为作者。Pocket还会遇到一些文章被分割成带有小标题的部分的问题,这些文章通常会在文章中间随机选取一个部分,而不是整篇文章。</ p>< p >我联系了Pocket几次要求有关他们的解析器的详细信息,并专门向帮助解决自己的网站来解决兼容性问题而无济于事。口袋将要么支持您的网站或者他们不会。没有多少你作为Web开发人员可以做到影响它。</ p></section> <nav> <p>继续阅读第四部分:<a href="browser-reading-mode-experience.html" rel="next" title="不一致和糟糕的阅读体验">不一致和糟糕的阅读体验</a>→</ p></nav> <aside> <ins class="adsbygoogle" data-ad-client="ca-pub-1835247814769107" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="7413296834" style="display:block"></ins> </aside> <footer> <h4>来源</h4> <ul> <li>Vivaldi,版本1.15.1147,<time>2018-08-07</time>,维瓦尔第的技术</li> <li>SafariShared.framework, 14606年版,<time>2018-08-06</time>,MacOS 10.14 Beta 5,Apple</li> <li><a href="https://github.com/mozilla/readability/blob/7cf95bd427a3ebb8877e00c25a80423f8fbcd7cd/Readability.js" rel="external">可读性</a>,提交7cf95bd427,<time>2018-07-24</time>,可读性项目存储库,Mozilla,GitHub</li> <li>Maxthon,版本5.2.3.4000,<time>2018-06-28</time>,Maxthon.</li> <li>Microsoft Edge,版本1717134.191,<time>2018-05</time>,微软</li> <li><a href="https://gitlab.gnome.org/GNOME/epiphany/commit/349587cff9c234d46411f691a2305846a951b79a" rel="external">添加清洁阅读器模式</a>、提交349587 cff9,<time>2018-06-05</time>, Jan-Michael Brummer, GNOME Web项目库,GitLab, GNOME基金会</li> <li><a href="https://www.client9.com/designing-html-for-safari-reader-mode/" rel="external">为Safari阅读器模式设计HTML</a>那<time>2018-04-10</time>博客,Nick Galbreath</li> <li><a href="http://microformats.org/wiki/index.php?title=hnews&oldid=49426" rel="external">h-entry</a>,修订49426,<time>2018-04-01</time>微格式Wiki,微格式</li> <li><a href="https://utcc.utoronto.ca/~cks/space/blog/web/FirefoxReaderModeLimitations" rel="external">Firefox读者模式的局限性</a>那<time>2018-01-28</time>Chris Siebenmann, CSpace博客</li> <li><a href="https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/browser-features/reading-view" rel="external">阅读视图</a>那<time>2017-10-18</time>,Microsoft Edge文档,Microsoft Docs,Microsoft</li> <li><a href="https://hacks.mozilla.org/2017/04/fathom-a-framework-for-understanding-web-pages/" rel="external">Fathom:了解网页的框架</a>那<time>2017-04-26</time>Erik Rose, Mozilla Hacks, Mozilla</li> <li><a href="https://www.brendanlong.com/website-metadata-and-improved-reading-mode-support.html" rel="external">网站元数据和改进的阅读模式支持</a>那<time>2015-11-17</time>,博客,Brendan Long</li> <li><a href="https://www.instapaper.com/publishers" rel="external">控制文本解析为您的网站与HTML</a>那<time>2013-09</time>,出版商,instapaper</li> <li><a href="https://mislav.net/2012/08/authorship/" rel="external">你的内容的作者</a>那<time>2012-08-02</time>, Mislav Marohnić</li> <li><a href="https://web.archive.org/web/20120814121016/http://www.readability.com/developers/guidelines" rel="archived external">文章发布指南</a>那<time>2012-08</time>,内容指南,开发人员,可读性</li> </ul> </footer> </div> <footer class="entry-footer"> <aside class="entry-footer-support"> <a aria-role="button" class="entry-footer-bmac" href="https://www.buymeacoffee.com/aleksandersen" rel="external"><span>给我买咖啡</span></a> </aside> <p class="entry-footer-correction"><a href="mailto:correction+a7e81eaec886408698b3e233965c1d8e@ctrl.blog?subject=Correction%20for%20%2Fentry%2Fbrowser-reading-mode-metadata.html" title="报告错误/修正">报告错误/修正</a></p> <span>yabo88 app话题:</span> <ul class="andli scili"> <li><a class="p-category" href="../topic/web-browsers.html" rel="tag">Web浏览器</a></li> <li><a class="p-category" href="../topic/html.html" rel="tag">HTML.</a></li> </ul> </footer> </article> </main> <aside class="doc-container recommendations"> <div class="entrylist"> <h3>相关阅读</h3> <article class> <a aria-labelledby="entry1" href="mozilla-readability-metadata.html" rel="related" tabindex="0"> <header> <h4 id="entry1">Mozilla可读性如何在Firefox 63中提取元数据的变更</h4> </header></a> </article> <article class> <a aria-labelledby="entry2" href="browser-reading-mode-content.html" rel="related" tabindex="0"> <header> <h4 id="entry2">网页阅读模式:确定主页内容</h4> </header></a> </article> <article class> <a aria-labelledby="entry3" href="browser-reading-mode-parsers.html" rel="related" tabindex="0"> <header> <h4 id="entry3">Web阅读模式:非标准渲染模式</h4> </header></a> </article> <article class="has-image"> <a aria-labelledby="entry4" href="rdfa-socialmedia-metadata.html" rel="related" tabindex="0"> <picture> <source sizes="(min-width:920px) 192px, 96px" srcset="../media/hero/rdf-wireframe.96x54.avif 96w, ../media/hero/rdf-wireframe.192x108.avif 192w, ../media/hero/rdf-wireframe.288x162.avif 288w, ../media/hero/rdf-wireframe.384x216.avif 384w" type="image/avif"> <source sizes="(min-width:920px) 192px, 96px" srcset="../media/hero/rdf-wireframe.96x54.webp 96w, ../media/hero/rdf-wireframe.192x108.webp 192w, ../media/hero/rdf-wireframe.288x162.webp 288w, ../media/hero/rdf-wireframe.384x216.webp 384w" type="image/webp"> <source sizes="(min-width:920px) 192px, 96px" srcset="../media/hero/rdf-wireframe.96x54.jpeg 96w, ../media/hero/rdf-wireframe.192x108.jpeg 192w" type="image/jpeg"> <img alt height="54" loading="lazy" src="../media/hero/rdf-wireframe.192x108.jpeg" style="background-color:rgb(231,231,231)" title="“RDF”" type="image/jpeg" width="96"> </picture> <header> <h4 id="entry4">为什么Facebook和Twitter在解析RDFA元数据时如此糟糕?</h4> </header></a> </article> </div> </aside> <aside> <div id="amzn-assoc-ad-d66187e0-325e-480d-89dd-248c179a52a1"></div> </aside> </div> <footer id="page-footer"> <div class="page-footer-promo"> <form action="https://email.ctrl.blog/?subscribe" class="cta-email page-footer-cta" method="post"> <input name="sub" type="hidden" value="mar"> <h6>从CTRL博客获取每周电子邮件更新</h6> <div> <input aria-disabled="true" name="name" placeholder="Name" type="text" value> <input aria-label="Email address" name="email" placeholder="you@example.email" required type="email"> <button type="submit">订阅</button> </div> </form> <ul class="page-footer-subscribe"> <li><a href="https://twitter.com/CtrlBlog" rel="external me noopener" target="_blank" title="推特">推特</a></li> <li><a href="../subscribe.html">通讯</a></li> <li><a href="//www.tianyase1.com/feed/latest.atom" target="_blank" title="饲料" type="application/atom+xml">饲料</a></li> <li><a href="https://feedly.com/i/subscription/feed/https%3A%2F%2Ffeed.ctrl.blog%2Flatest.atom" rel="external noopener" target="_blank" title="Feedly">Feedly</a></li> <li><a href="https://newsblur.com/site/5241507/ctrl-blog" rel="external noopener" target="_blank" title="Newsblur">Newsblur</a></li> </ul> </div> <div aria-label="copyright notes" class="small-print" role="contentinfo"> <div about="//www.tianyase1.com/entry/browser-reading-mode-metadata.html" typeof="cc:Work"> <span about="#article-source-code-examples" property="dc:rigths">除非另有说明,否则本文中印刷的源代码是在a下获得的<a href="https://creativecommons.org/publicdomain/zero/1.0/" rel="cc:license external license nofollow schema:license">CC0 1.0许可证。</a></span> <span property="dc:rigths">Ctrl博客©<time datetime="2020" property="schema:copyrightYear">2020</time><span property="schema:copyrightHolder" resource="https://www.daniel.priv.no/" typeof="schema:Person"><a href="https://www.daniel.priv.no/" property="dc:creator" rel="external schema:sameAs schema:url"><span property="schema:name">yabo88软件下载</span></a>。</span></span> </div> </div> <nav> <ul> <li><a href="../about/">关于</a></li> <li><a href="../about/privacy-policy.html">隐私政策</a></li> <li><a href="../about/colophon.html">版本记录</a></li> <li><a href="../about/license.html">许可</a></li> </ul> </nav> </footer> </body> </html>