1
选举季的出版商增长策略网络研讨会
视频时长
15:35
回答测验
进行当前模块测验
材料
即用型模板
资源
报告和资源
2.1.1 什么是设计和布局？
网站的设计和布局决定了最终用户的外观。这很重要，因为谷歌最终是由用户至上的理念驱动的。最先、最快且以最简单的方式满足用户需求的网页将获得更高的 SERP 排名。
您网站的设计和布局还决定了网络爬虫（例如 Google bot）对其进行爬网和索引的难易程度。简单且优化的设计和布局意味着快速轻松的抓取，这反过来又转化为更好的排名。
那么是什么阻止出版商实施设计和布局最佳实践呢？最常见的是，出版商面临以下痛点：
为了回答这个问题，我们进行了简单的谷歌搜索，在搜索栏中输入关键字“Charlie Puth News”。
以下是搜索结果：
在 Top Stories SERP 排名中位居第二位，就在 NME 的一篇报道之上，是 Daily Illini 关于 Charlie Puth 最新版本的文章。
大学生报纸《Daily Illini》的排名超过了世界上最大的独立音乐网站，这一事实引发了一些重要的问题
美国中西部一个拥有约 40,000 居民的小镇上的一份学生报纸如何超越地球上最大的音乐新闻网站？出于好奇，我们决定进一步挖掘。
首先我们查看了 NME 关于 Charlie Puth 的页面。
马上，我们注意到的第一件事是弹出视频，试图在屏幕的右下角加载。显然，这不是很好的加载工作。缓冲视频还隐藏了新闻标题及其身体的一部分。
接下来，我们注意到最初的视口主要由与新闻故事无关的东西所占据。有一个大型横幅广告覆盖了该页面的一半，当然还有视频。
实际上，向下滚动页面，我们遇到更多视频，更多的大型，丰富的图像，更多的弹出广告和许多超链接。鉴于该页面的媒体含量如何，毫不奇怪的是，加载了很多时间。
接下来，我们检查了每日伊利尼，这就是我们发现的。
该页面整洁，干净整洁。它在顶部有广告的份额和一个大捐赠按钮，但是没有涵盖视口的视频或弹出窗口，也没有妨碍新闻标题。我们可以立即看到标题，并且很可能同样适用于Google的Web爬网。
总体而言，页面是轻巧的，简约的，闪电迅速加载。
我们决定在基础代码下再窥视引擎盖下。通过右键单击页面上并选择视图源（使用Chrome），我们可以看到页面的代码。
这就是我们在NME页面上看到的：
两件事引起了我们的注意：
对于页面而言，这不是最好的事情，原因有两个：
另一方面，当我们查看《每日伊利尼》页面的代码时，我们看到了：
这是非常简单的HTML代码。另外，内部没有脚本<head>部分。
这如何加起来伊利尼的日常伊利尼？
这里可能有许多因素，其中一个是设计和布局。 Daily Illini页面部署了某些设计和布局技术，即使是小型出版商也可以轻松复制以提高其整体SEO策略。
其中包括使用干净，简单的HTML代码，避免在“标头”部分中避免脚本，使页面轻巧快速地加载，并且不太依赖弹出窗口和间质广告。
下面的指南详细介绍了其中的每一个，同时解释了您可以实施的其他几种技术，以显着提高SERP排名。
语义与单词的含义有关。语义HTML标签是那些清楚地将其含义的读者和网络爬网定义的标签。
例如，当我们使用类似标签时<header>，我们知道其中包含的内容 - 有关标题的信息。
相似地<h1>是一个语义标签，告诉Googlebot，下面是文章中最重要的标题。
相比之下，当我们使用类似标签时<div>，它的含义并不明显。在html中<div>代表划分的代表，这意味着已经开始了一个新的代码部分，而不必揭示有关本节内容的任何信息。
像Googlebot这样的Web爬网是使用人工智能和机器学习算法构建的，这些算法试图模拟人脑的功能。这意味着它们与人脑的文本有意义。
对于Google的Web爬行者来说，容易理解的HTML代码也应该很容易理解。
例如，请考虑以下两个HTML代码：
资料来源： https：//www.pluralsight.com/guides/semantic-html
此页面使用<div>标签所有内容，从标题到主要内容再到页脚。通过阅读标签的内容是什么，这并不明显。
相比之下，下面的页面使用语义标记。标题放在<header>标签，页脚<footer>标签，文章的主体在<main>标签。
资料来源： https：//www.pluralsight.com/guides/semantic-html
由于Googlebot可以轻松阅读和理解，因此此页面的排名更高，而其他所有内容都相等。
要查看您的页面是否使用语义标记，如果您使用的是Google Chrome，只需单击页面，然后单击“ Inspect”。您将能够查看页面的HTML源代码。常见的语义元素包括<author>，，，，<video> ，，，，<article> ，，，，<form> ，，，，<header> ， ETC。
我们现在知道什么是语义标记以及为什么重要。但是，我们如何使用它来改善SEO？
这很简单 - 始终使用语义标记来标记有关文章设计和布局的重要信息。这包括以下文章信息：
确保您的页面的布局已井井有条以改善爬网
您正在设计您的网站，旨在由人类和网络爬行者阅读，因此，您的设计和布局应该反映出这一事实。
以下是一些技巧，可以帮助您为网站实现可衡量的结果。
您可以使用HTML，CSS，JavaScript或任何其他前端语言来创建丰富而交互式页面。但是，请记住，语言越先进，其复杂性就越大，并且网络爬网可能很难读取，解释和编译。
在HTML中编码的任何内容可能都不是最漂亮的观察，但是由于搜索引擎可以更快地阅读和理解的简单原因，它既可以更快地加载又更优化搜索引擎。
将普通的HTML视为网页的裸骨骨架。您可以添加CSS和JavaScript来充实它，并使它在美学上令人愉悦和动态，但是最好将最重要的内容保留在骨骼中，而不是将其放在肉中。
那么我们如何实施普通的HTML？这样做的一种简单的方法是将内容的主体放在<article>HTML标签。
这样，当网络爬网遇到<article>标签，他们立即知道下面是您页面上最重要的内容 - 新闻文章。这有助于搜索引擎理解，该标签中包含的内容需要分配更大的权重。
普通的HTML<article>标签是一个看起来像这样的语义标记：
资料来源： https：//en.wikipedia.org/wiki/article_element
下一个明显的问题？如果我使用WordPress之类的CM，我在哪里插入这些标签？
如何执行此操作：如果您使用HTML构建自定义网站，则可以检查源代码以确保使用普通HTML，尤其是在关键领域。我们建议您与开发人员更详细地讲话，以确保您不要偶然地踩踏功能。
如果您使用的是WordPress，请参阅本指南。您还可以找到有关如何将HTML插入帖子和页面的指南。
这些说明用于WordPress，因为WordPress仍然是发布者最受欢迎的CMS。如果您使用的是Wix等不同的CMS，请咨询CMS的支持或文档页面。
如果您可以访问Web开发人员团队，最好让他们这样做，因为编辑HTML代码可能很耗时。
测试以确保您的内容在所有浏览器，设备和尺寸中都正确显示。这个更明显，但经常被忽略。如果您的内容并未按照您在所有浏览器和设备上的要求出现，则会影响用户体验，从长远来看，您的SERP排名。
如何执行此操作：要在平台上测试内容，您需要在不同的设备和不同的浏览器中打开页面，以查看其呈现方式。
至少您应该测试以下内容：
HTML标记有助于突出显示页面的不同元素。结构化数据可帮助搜索引擎阅读页面不同元素内部的内容，并更好地了解其内容。
结构化数据只是用简单语言（例如JSON-LD）编写的一系列指令，可以插入网页的现有HTML代码中。将其视为元描述，但对于页面上的各个内容。
在下面的示例中，结构化数据可帮助Google识别John Lennon上有关DBPEDIA页面的五个属性：
资料来源： https：//json-ld.org/
如您所见，该代码是简单的语言，对于人类读者和网络爬网都很容易理解。
这是另一个示例，该示例显示了结构化数据如何拟合到网页现有的HTML代码中。结构化数据指令以绿色突出显示。
资料来源： developers.google.com
在此示例中，结构化数据告诉Googlebot，这是一个关于咖啡蛋糕的食谱页面，有人称为Mary Stone。
使用网站布局中的结构化数据可提供可衡量的结果。例如，使用结构化数据可以将网站的点击率（CTR）提高高达30％。
使用结构化数据还可以帮助您的页面在Google的旋转木马，特色片段，视频和知识面板功能上更好地排名。
对于Google News SEO，在创建结构化数据以提供其他价值时包括以下元素很重要：
如何执行此操作：您可以手动或通过为特定CMS使用插件添加结构化数据/架构。
您的新闻文章的所有元素都应按特定顺序安排，以更快，更轻松地爬行。订单如下：
页面体验是用户如何体验您的页面的衡量标准。 Google有一组参数来量化页面体验。我们将整个模块专门用于页面体验因素，因此我们只会在这里简要介绍每个模块。
如何执行此操作：您可以通过使用插件或第三方应用程序来测试页面体验。例如，页面速度见解是一种方便的工具，可帮助您根据CWV和其他参数分析网站的性能，并根据其分析分配分数。它还可以测试移动设备和桌面响应能力。
新闻发布者不应在同一URL下发布多个新闻文章。这将阻碍Google索引它们。每篇新闻文章都应该有自己的独特URL。
此外，这些URL应该是永久的。这意味着应该在特定的URL上显示相同的新闻故事。如果与特定URL相关的新闻故事经常更改，则Google将无法爬网和索引。但是，发行商应该根据需要的频率更新新闻报道。
如果需要将重定向用于新闻文章，则应根据以下最佳实践实施：
尽管本节中列出的操作项目并不像上面的那些重要的内容，但一旦解决了上述关键点，我们仍然建议实施尽可能多的这些操作项目。
这<head>页面的元素包含有关该页面实际上未显示的页面的重要信息。它包括的是元数据，可帮助GoogleBot识别页面的内容并对其进行分类。
通常，<head>元素应仅包含最重要的标签，而无需其他标签，因此可以爬行并正确渲染帖子。其中包括：
其中包含的其他任何内容<head>元素可能会混淆网络爬网。
例如，新手经常会混淆标题标签和<h1>并将后者放在<head>元素。如前所述，<head>元素只能包含未在页面上显示的元数据。
即使标题和<h1>应该包含基本相同的信息，前者是用于网络爬虫的元数据，将在 SERP 结果和浏览器选项卡中显示，而后者是将在页面上显示的信息。
下面的代码展示了如何将标题放在<head>元素。
资料来源： developer.mozilla.org
使用可以轻松扫描内容并使导航成为用户无摩擦体验的页面元素也会影响SEO。
易于导航的页面将包含以下元素：
除非您是经验丰富的Web开发人员，否则最好就实施用户友好的UX的最佳方式咨询专家。
Google希望发布者在不破坏用户的体验的情况下显示广告。因此，它可能会惩罚显示太多侵入性广告的网站。尽管用户体验是一个主观指标，但Google在广告方面具有某些准则和最佳实践。
其中一些与：
JavaScript非常适合创建动态和交互式内容，但是网络爬网可能会遇到难以渲染它。
这是因为：
有了新闻文章，避免中断（例如相关文章旋转木马或图像画廊）是很好的做法。
在重新启动/重新设计网站时，许多发行商都非常关心，因为它要求Google重新发布该网站。遵循这些最佳实践，以确保重新设计/重新启动后平稳过渡到正常：
保持您的文章页面尽可能轻。我们已经考虑避免文章中的JavaScript，但是避免使用大量HTML含量也是一个好习惯。
这是因为当GoogleBot爬网时，它只能在第一次爬网中下载最多15 MB的页面数据。对于大多数页面而言，这不是一个主要问题，因为诸如视频和图像之类的重量项目在Googlebot稍后索引的代码中分别引用，因此超出了该15 MB限制的权限。
但是，这再次指出了一个事实，即您的页面越轻，Googlebot就越容易爬行和索引。
提示：如果要检查页面的大小，请转到浏览器的开发人员工具页面，切换到网络选项卡，然后重新加载页面。这显示了您的浏览器以完全渲染页面的所有请求。此列表上的第一个请求显示了大小列下的页面大小。对于互联网上的大多数页面，这个数字通常为千字节。
文章片段在单击它之前为读者提供了页面上内容的预览。 Google通过在标题下方的文章主体中爬上文本来确定每篇文章的片段。
为了避免Googlebot的可能性，包括不正确的片段，请确保：
有时，GoogleBot可能无法索引您的图像，或与您打算在文章中展示的图像不同。为了避免这种情况，请遵循以下最佳实践：
GoogleBot使用您的文章标题正确识别和索引。使用这些以下最佳实践来确保其准确读取您的标题：
让我们看一下已经实施了本文讨论的步骤的站点的两个案例研究。
现代新闻网站是复杂而丰富的，希望他们严格遵守这些准则是不现实的。但是，在本节中，我们正在尝试证明遵循准则如何导致可预测的可测量结果。
男子气概的观察者是一个超本地新闻网站，可满足澳大利亚悉尼的热门海滩郊区的观众。以下是该网站上的典型新闻文章的样子：
乍一看，我们看到了以下设计清晰和存在的要素：
接下来查看页面的HTML代码，我们可以看到语义标记的使用。
这是人类易于阅读的代码。可以肯定地假设Web搜寻器将能够同样轻松阅读和解释此代码。
该网站使用https：//方案，并且在初始视口内没有弹出广告或间隙加载。
企业家是企业家和企业的流行杂志。这就是其首页出现的方式。
该网站的加载很快，并且主页本身没有弹出广告或视频。大多数广告放置都发生在个人新闻文章上。
当我们单击“查看源”时，我们会看到以下HTML代码：
乍一看，我们可以从此代码中阐明以下内容：
向下滚动时，我们会看到以下代码元素：
我们已经讨论了Schema.org和OpenGraph（OG）的使用。回顾一下，schema.org和og是结构化数据的类型，可帮助Web爬网更轻松地识别代码的特定元素。我们在此处看到Schema.org和OG。
在此外，我们还看到了结构化数据标签，如下所示：
与我们以前的示例一样，Entrepreneur.com在其链接中还使用https：//方案，没有颠覆性的间隙或弹出式弹出式，并且可以迅速加载。新闻文章遵循标题，图像，作者归因，日期和内容主体的设定格式。这会带来更好的页面体验，从而改善了技术SEO。
在本课程完成后，您应该能够查看和更新现有的新闻页面，以优化其设计和布局，以遵守技术SEO最佳实践。
现在活跃
查看更多