1
选举季出版商增长策略
视频时长
15:35
回答测验
参加当前模块测验
材料
即用型模板
资源
报告和资源
2.1.1 什么是设计和布局？
网站的设计和布局决定了最终用户看到的内容。这一点至关重要，因为谷歌的最终目标是用户至上。能够以最快捷、最简便的方式满足用户需求的网页，会在搜索结果页面 (SERP) 上获得更高的排名。.
网站的设计和布局也会影响网络爬虫（例如 Google 机器人）抓取和索引网站的难易程度。简洁优化的设计和布局意味着更快更便捷的抓取，从而提升网站排名。.
那么，是什么阻碍了出版商实施设计和布局方面的最佳实践呢？出版商最常遇到的痛点包括：
为了回答这个问题，我们进行了简单的谷歌搜索，在搜索栏中输入关键词“查理·普斯新闻”。.
以下是搜索结果：
在热门新闻搜索结果排名中位列第二，紧随 NME 的一篇报道之上的是《每日伊利尼报》关于查理·普斯最新专辑的文章。.
《每日伊利诺伊人报》（Daily Illini）作为一份大学学生报纸，其排名竟然超过了全球最大的独立音乐网站，这一事实引发了一些重要问题。
一份位于美国中西部一个人口约4万的小镇的学生报纸，为何排名能超过全球最大的音乐新闻网站？出于好奇，我们决定深入调查一番。.
首先，我们查看了NME网站上关于查理·普斯的页面。.
首先映入眼帘的是屏幕右下角弹出的视频，它正在加载，但加载速度明显不理想。视频缓冲还遮挡了部分新闻标题及其正文。.
接下来，我们注意到初始视口大部分都被与新闻报道无关的内容占据了。页面上有一条占据了大约一半面积的大型横幅广告，当然还有视频。.
事实上，向下滚动页面，我们会看到更多视频、更多高清大图、更多弹出式广告以及大量超链接。鉴于页面内容如此丰富，加载时间较长也就不足为奇了。.
接下来，我们查阅了《每日伊利尼报》，以下是我们的发现。.
页面简洁明了，干净利落。虽然有一些广告，顶部还有一个醒目的“捐赠”按钮，但没有任何视频或弹窗遮挡视线或新闻标题。我们可以立即看到标题，谷歌的网页爬虫很可能也能做到这一点。.
总体而言，该页面轻巧简洁，加载速度极快。.
我们决定更深入地了解一下底层代码。通过右键单击页面并选择“查看源代码”（使用 Chrome 浏览器），我们可以看到页面的代码。.
这是我们在NME页面上看到的内容：
有两件事引起了我们的注意：
这对于一个页面来说并非最佳选择，原因有二：
但当我们查看 Daily Illini 页面的代码时，我们发现了以下内容：
这是非常简单的HTML代码。此外，其中没有任何脚本在运行。<head>部分。.
这一切是如何导致《每日伊利诺伊人报》的排名超过《新音乐快报》的呢？
这里可能有很多因素在起作用，其中之一就是设计和布局。《每日伊利诺伊人报》的页面采用了一些设计和布局技巧，即使是小型出版商也可以轻松复制这些技巧，从而提升其整体搜索引擎优化策略。.
这些措施包括使用简洁的 HTML 代码，避免在页眉部分使用脚本，保持页面轻量级和快速加载，以及不要过度依赖弹出窗口和插页式广告。.
以下指南将详细介绍这些内容，同时解释您可以实施的其他几种可以显著提高搜索引擎排名 (SERP) 的技术。.
语义学与词语的含义有关。语义化的HTML标签能够清晰地向读者和网络爬虫定义其含义。.
例如，当我们使用类似这样的标签时<header>我们知道它包含什么——关于标题的信息。.
相似地<h1>这是一个语义标签，它告诉 Googlebot 接下来是文章中最重要的标题。.
相比之下，当我们使用类似这样的标签时<div>它的含义并不显而易见。在HTML中<div>表示除法，它仅仅意味着一个新的代码段已经开始，而不一定透露有关该代码段内容的任何信息。.
像Googlebot这样的网络爬虫是利用人工智能和机器学习算法构建的，这些算法试图模拟人脑的运作方式。这意味着它们理解文本的方式与人脑非常相似。.
人类容易理解的 HTML 代码也应该容易被谷歌的网络爬虫理解。.
例如，请看以下两段 HTML 代码：
来源： https://www.pluralsight.com/guides/semantic-html
本页面使用了<div>从页眉到正文再到页脚，所有内容都使用标签。但仅凭标签本身并不能立即看出其内容。.
相比之下，下面的页面使用了语义化标记。页眉位于……<header>标签内页脚<footer>标签内的内容，文章主体部分则放在标签内。<main>标签。.
来源： https://www.pluralsight.com/guides/semantic-html
由于 Googlebot 可以轻松读取和理解此页面，因此在其他条件相同的情况下，此页面比上一个页面更有可能获得更高的排名。.
要查看您的网页是否使用了语义化标记，如果您使用的是 Google Chrome 浏览器，只需右键单击网页，然后点击“检查”。您将能够看到网页的 HTML 源代码。常见的语义元素包括：<author> ，<video> ，<article> ，<form> ，<header> ， ETC。.
我们现在了解了语义标记是什么以及它为什么重要。但是我们如何利用它来提升搜索引擎优化（SEO）呢？
很简单——始终使用语义标记来突出显示文章设计和布局中的重要信息。这包括以下文章信息：
确保页面布局井然有序，以提高搜索引擎抓取效率。
你的网站设计是为了让人类和网络爬虫都能阅读，因此，你的设计和布局应该体现这一点。.
以下是一些建议，可帮助您为网站取得可衡量的成果。.
您可以使用 HTML、CSS、JavaScript 或任何其他前端语言来创建丰富且交互式的页面。但是，请记住，语言越高级，其复杂性就越高，网络爬虫就越有可能难以读取、解释和编译。.
用 HTML 编写的任何代码可能看起来不太美观，但它的加载速度更快，并且对搜索引擎的优化也更好，原因很简单，因为搜索引擎可以更快地读取和理解它。.
把纯HTML想象成网页的骨架。你可以添加CSS和JavaScript来充实它，让它看起来美观且动态，但最好把最重要的内容放在骨架里，而不是放在血肉之中。.
那么，我们如何实现纯 HTML 呢？一种简单的方法是将内容主体放在一个 <div> 标签内。<article> HTML标签。.
这样，当网络爬虫遇到<article>通过这个标签，搜索引擎可以立即知道接下来是页面上最重要的内容——新闻文章。这有助于搜索引擎理解，这个标签内的内容需要被赋予更高的权重。.
纯HTML<article>标签是一个语义标记，其形式如下：
来源： https://en.wikipedia.org/wiki/Article_element
下一个显而易见的问题是：如果我使用的是像 WordPress 这样的内容管理系统，我应该在哪里插入这些标签？
操作方法：如果您正在使用 HTML 构建自定义网站，则可以检查源代码，确保其使用的是纯 HTML，尤其是在关键区域。我们建议您与开发人员进行更详细的沟通，以确保不会意外地限制网站功能。
如果您使用的是 WordPress，请参考此指南。您还可以参考这篇关于如何在文章和页面中插入 HTML 的指南。
这些说明适用于 WordPress，因为 WordPress 仍然是出版商最常用的内容管理系统 (CMS)。如果您使用的是其他 CMS，例如 Wix，请参阅您所用 CMS 的支持或文档页面。.
如果你有网页开发团队，最好让他们来做，因为编辑 HTML 代码可能很耗时。.
测试以确保您的内容在所有浏览器、设备和屏幕尺寸上都能正确显示。这一点显而易见，但却常常被忽略。如果您的内容在所有浏览器和设备上的显示效果不尽如人意，将会影响用户体验，长此以往还会影响您的搜索引擎排名。.
操作方法：要测试跨平台内容，您需要在不同的设备和不同的浏览器中打开您的页面，以查看其渲染效果。
至少，您应该测试以下内容：
HTML 标记有助于突出显示页面的不同元素。结构化数据有助于搜索引擎读取页面不同元素的内容，从而更好地理解页面内容。.
结构化数据其实就是一系列用简单语言（例如 JSON-LD）编写的指令，可以插入到网页现有的 HTML 代码中。你可以把它想象成元描述，只不过是针对网页上的各个内容片段。.
在下面的示例中，结构化数据帮助谷歌识别了关于约翰·列侬的 dbpedia 页面的五个属性：
如您所见，代码使用了简单的语言，无论是人类读者还是网络爬虫都很容易理解。.
以下示例展示了如何将结构化数据直接融入网页现有的 HTML 代码中。结构化数据指令以绿色高亮显示。.
在这个例子中，结构化数据告诉 Googlebot，这是一个关于咖啡蛋糕的食谱页面，作者是 Mary Stone。.
在网站布局中使用结构化数据可以带来可衡量的效果。例如，使用结构化数据可以将网站的点击率 (CTR) 提高高达 30%。
使用结构化数据还有助于提高您的网页在谷歌轮播图、精选摘要、视频和知识面板等功能中的排名。.
对于谷歌新闻SEO而言，在创建结构化数据时，务必包含以下要素，以提供更多价值：
如何操作：您可以手动或使用特定 CMS 的插件向内容中添加结构化数据/模式。
新闻文章中的所有元素都应按照特定顺序排列，以便搜索引擎更快更轻松地抓取数据。顺序如下：
页面体验衡量的是用户对您页面的浏览感受。谷歌提供了一系列参数来量化页面体验。我们专门用一个模块来讲解页面体验的各个因素，所以这里我们只做简要介绍。
操作方法：您可以手动测试页面体验，也可以使用插件或第三方应用程序。例如， Page Speed Insights是一款便捷的工具，它可以帮助您根据内容访问量 (CWV) 和其他参数分析网站性能，并根据分析结果给出评分。它还可以测试网站在移动设备和桌面设备上的响应速度。
新闻发布商不应使用同一个网址发布多篇新闻文章。这会妨碍谷歌对其进行索引。每篇新闻文章都应该有自己唯一的网址。.
此外，这些网址应该是永久性的。也就是说，同一篇新闻报道应该始终显示在同一个网址上。如果与某个网址关联的新闻报道频繁更改，谷歌将无法抓取和索引它。不过，发布商应该根据需要及时更新新闻报道。.
如果需要对新闻文章使用重定向，则应按照以下最佳实践进行实施：
虽然本节列出的行动项目不如上述行动项目重要，但我们仍然建议在解决上述关键任务点后，尽可能多地实施这些行动项目。.
这<head>页面元素包含有关该页面的重要信息，但这些信息实际上并未显示在页面上。它包含元数据，可以帮助 Googlebot 识别页面内容并对其进行分类。.
通常情况下，<head>元素应该只包含最重要的标签，不应包含其他任何内容，这样文章才能被正确抓取和渲染。这些标签包括：
其中包含的其他任何内容<head>该元素可能会使网络爬虫感到困惑。.
例如，新手常常会将标题标签与……混淆。<h1>并将后者置于<head>元素。如前所述，<head>元素只能包含页面上未显示的元数据。.
即使标题和<h1>两者应包含基本相同的信息，前者是供网络爬虫使用的元数据，将在搜索引擎结果页面和浏览器标签页中显示，而后者是要在页面上显示的信息。.
下面的代码展示了如何在文本框中放置标题<head>元素。.
使用便于浏览内容并为用户提供流畅导航体验的页面元素也会影响 SEO。.
一个易于浏览的页面应包含以下元素：
除非您是经验丰富的网页开发人员，否则最好咨询专家，了解实现用户友好型用户体验的最佳方法。.
谷歌希望发布商在展示广告时不会干扰用户体验。因此，它可能会惩罚展示过多侵入性广告的网站。虽然用户体验是一个主观指标，但谷歌在广告方面有一些指导原则和最佳实践。.
其中一些与以下方面有关：
Javascript 非常适合创建动态和交互式内容，但网络爬虫可能难以渲染它。.
这是因为：
对于新闻文章，最好避免插入相关文章轮播或图片库等干扰元素。.
许多运营良好的出版商在重新上线/重新设计网站时都会感到担忧，因为这需要谷歌重新抓取网站。遵循以下最佳实践，确保重新设计/上线后顺利过渡到正常状态：
尽量保持文章页面简洁轻便。我们之前已经讨论过如何在文章中避免使用 JavaScript，但避免使用过多的 HTML 内容也是一种很好的实践。.
这是因为 Googlebot 在抓取网页时，首次抓取最多只能下载 15 MB 的网页数据。对于大多数网页来说，这并非什么大问题，因为视频和图片等大文件内容会在 Googlebot 后续索引的代码中单独引用，因此不受这 15 MB 限制的影响。.
然而，这也再次表明，页面越轻量级，Googlebot 就越容易抓取和索引它。.
提示：如果您想查看页面大小，请打开浏览器的开发者工具，切换到“网络”选项卡，然后重新加载页面。这将显示浏览器为完整渲染页面而发出的所有请求。列表中的第一个请求会在“大小”列中显示页面大小。对于互联网上的大多数页面，此数值通常以千字节 (KB) 为单位。
文章摘要可以让读者在点击页面之前预览页面内容。谷歌通过抓取文章正文标题下方的文本来确定每篇文章对应的摘要。.
为避免 Googlebot 添加错误摘要，请确保：
有时，Googlebot 可能无法索引您的图片，或者索引的图片与您打算在文章中使用的图片不同。为避免这种情况，请遵循以下最佳实践：
Googlebot 会使用文章标题来正确识别和索引文章。请遵循以下最佳实践，以确保 Googlebot 能准确读取您的标题：
让我们来看两个已经实施本文所讨论步骤的网站案例研究。.
现代新闻网站内容丰富且复杂，期望它们严格遵守这些准则是不现实的。然而，在本节中，我们将尝试展示遵循这些准则如何能够带来可预测、可衡量的结果。.
《曼利观察报》是一个面向澳大利亚悉尼热门海滨郊区曼利居民的本地新闻网站。以下是该网站上一篇典型新闻文章的示例：
我们一眼就能看出以下设计元素：
接下来查看页面的 HTML 代码，我们可以看到语义标记的使用。.
这段代码很容易被人阅读。可以肯定的是，网络爬虫也能同样轻松地读取和理解这段代码。.
该网站使用 https:// 协议，并且在初始视口内不会加载任何弹出式广告或插页式广告。.
《创业者》是一本面向创业者和企业的热门杂志。这是它的首页。
该网站加载速度极快，首页上没有任何弹出式广告或视频。大部分广告都投放在具体的新闻文章中。.
点击“查看源代码”后，我们会看到以下HTML代码：
乍一看，我们可以从这段代码中看出以下几点：
向下滚动页面，我们可以看到以下代码元素：
我们之前讨论过如何使用 schema.org 和 Opengraph (OG) 来处理图像。简单来说，schema.org 和 OG 都是结构化数据，可以帮助网络爬虫更轻松地识别代码中的特定元素。这里我们看到了 schema.org 和 OG 的应用。.
再往下看，我们还可以看到如下所示的结构化数据标签：
与之前的例子一样，entrepreneur.com 的链接也使用了 https:// 协议，没有烦人的插页式广告或弹出窗口，加载速度也很快。新闻文章遵循统一的格式：标题、图片、作者署名、日期和正文。这带来了更好的页面体验，从而提升了技术 SEO 效果。.
完成本课程后，您应该能够审查和更新现有的新闻页面，以优化其设计和布局，使其符合技术 SEO 最佳实践。.
现在生效
查看更多