Wordpress SEO

SEO的现代JavaScript入门

2020年2月14日

[ad_1]

SEO的现代JavaScript入门

现在，比以往任何时候都更加重要了解SEO的JavaScript。

这是马克·威廉姆斯·库克的恐怖故事共享在Linkedin上。

“开发人员坚称他们知道自己在做什么，并且“ Google可以为内容编制索引”。结果是人员被解雇，从而给企业造成后续损失。”

现在，假设您是该公司的SEO或进行向JavaScript过渡的类似SEO。

在掌握了丰富的JavaScript知识之后，您可以为他们提供实验数据，毫无疑问，这些数据表明，如果不进行任何调整，他们就会遇到很大的问题。

你会成为一个大英雄。

在本指南中，我们将在编写简单的单页应用程序并使用结构化数据对其进行优化的同时，学习现代的JavaScript构建块。

这是计划：

使用HTML5模板创建一个单页应用。
使用ReactJs添加动态行为。
使用Chrome JavaScript调试器修复错误。
针对结构化数据优化应用程序。
使用结构化数据测试工具来验证标记。
使用JavaScript动态生成JSON-LD标记。

我一直是SEO学习开发人员技能的坚定倡导者。

如果您花费大量时间做Python，则非常有用数据分析和自动化。

如果您必须处理越来越多的前端由ReactJ，AngularJ，VueJ等构建的客户端，那么JavaScript至关重要。

使用HTML5模板创建单页应用

我们将使用 Visual Studio程式码编写并通过Chrome浏览器测试我们的JavaScript代码。

我们将利用这个谷歌代码实验室展示了如何将结构化数据实现到简单的配方页面。

这是我们最终的结果。

SEO的现代JavaScript入门指南“ width =” 646“ height =” 1094“ size =”（最大宽度：646px）100vw，646px“ srcset =” https://cdn.searchenginejournal.com/wp- content / uploads / 2020/02 / preview-5e447a25320bf.png 646w，https：//cdn.searchenginejournal.com/wp-content/uploads/2020/02/preview-5e447a25320bf-480x813.png 480w“ src =” https：/ /cdn.searchenginejournal.com/wp-content/uploads/2020/02/preview-5e447a25320bf.png

通过代码实验室时，我们会发现一个单页应用使用HTML5模板。我们将借用代码，因此不必从头开始编写。

这是页面的外观。

这就是代码的样子。

这包括语义HTML5标签喜欢

步骤2：我们需要添加JavaScript标记以导入ReactJs。

的 unpkg.com CDN是一项非常酷的CDN服务，它从NPM注册表中获取软件包，并使软件包中的任何文件可嵌入网站和应用程序中。

步骤3：我们将创建一个React组件以支持提交审阅功能。我们将按照教程中的说明将其包括在HEAD中。

步骤4：现在，我们来创建组件。

在本教程，建议您使用一些入门代码。该代码的目的是在页面上添加一个“赞”按钮。我们将做一些微小的修改以添加一个Submit Review按钮。

“使用严格”；

const e = React.createElement;

class SubmitReview扩展了React.Component {

构造函数（道具）{

超级（道具）;

this.state = {提交：假};

}

render（）{

如果（this.state.submitted）{

返回“您已提交评论”；

}

返回e（

“按钮”，

{onClick：（）=> {this.setState（{Submitted：true}）;

}

}，

‘提交评论’

）;

}

此代码定义按钮的行为。它保持按钮状态（已提交或未提交），当我们单击按钮时，它将显示文本“您已提交评论”。

接下来，我们需要将其连接到相关的HTML代码，并准备对其进行测试。

const domContainer = document.querySelector（“＃success”）;

ReactDOM.render（e（SubmitReview），domContainer）;

第一行选择

ID为“成功”的元素。第二行显示我们正在内部创建的React控件

元件。

这是它的样子。

利用React组件状态

上面的这项工作很好地用于说明目的，但不是特别有用。

让我们捕获用户名并进行审核。然后，在提交按钮时将其显示回来。

以下是完成此操作的相关更改。

构造函数（道具）{

超级（道具）;

this.state = {提交：false，名称：“”，评论：“”};

}

在构造函数内部，我们定义了两个以上的变量来保存名称和复审。

如果（this.state.submitted）{

if（this.name ==“”）{

返回“您提交了$ {this.state.review}”；

}其他{

返回“ $ {this.state.name}”，表示您已提交$ {this.state.review}`；

}

在更改状态检查中，我们添加了一个控制流来呈现两个替代文本。

一个（如果名称留空），另一个（如果用户提供名称）。

请注意，我们使用的特殊字符串允许轻松地插值变量的值。为此，我们使用反引号分隔符`。

运算符$ {variable name}返回该变量的值。

返回e（’button’，

{onClick：（）=> {this.setState（{Submitted：true}）;

const name = document.querySelector（“＃name”）。value;

const review = document.querySelector（“＃message”）。value;

this.setState（{name：name，review：review}）;

}

}，

‘提交评论’

）;

这是最重要的变化。

我们首先在临时变量中捕获名称的提交值，然后使用相关的CSS选择器进行审查。

然后，我们使用对this.setState的调用来更改内部变量的状态。

完成这些更改后，您可以看到提交审核按计划进行。

我们可以继续添加更多功能来管理所有评论，等等。但是我们将在此处停止，以便我们可以向页面添加结构化数据。

如何使用Chrome调试器识别和修复问题

当我最初将React组件脚本放在HTML HEAD中时，我在JavaScript控制台中遇到了这个错误。

当我单击错误行report_review.js：38时，出现了有问题的代码。

我怀疑选择器不起作用，所以我设置了一个断点（绿色突出显示的第36行）并刷新了页面。这将停止此行的页面渲染，并启动Chrome JavaScript调试器。我可以单击以单行浏览并将鼠标悬停在变量domContainer上，它为null，这意味着没有值。

我在JavaScript控制台中输入了选择器代码行，并且得到了预期的值。这里发生了什么？

为了了解问题，我们需要阅读有关 HTML页面的生命周期。

当浏览器加载页面时，它会经历不同的阶段，并非页面的所有部分都可用。页面完全加载后，所有内容均可用。

我正在尝试在尚未完全加载的BODY中查找内容的头部执行JavaScript代码。

因此，要解决此问题，我只需将组件脚本移至页面底部。就在关闭HTML BODY标记之前。

将结构化数据添加到我们的食谱页面

现在，我们有了一个基本的食谱页面，几乎没有任何功能，现在让我们添加一些结构化数据，以帮助我们的页面在SERP中脱颖而出。

我们将按照这个代码实验室。

“由于我们的示例网站是一个食谱博客，因此我们将从配方结构化数据。食谱结构化数据可以提供丰富的结果，其中可以包含丰富的信息，例如食谱说明，烹饪和准备时间以及营养信息。您的内容还可能会自动在移动设备上为Google图片启用食谱徽章， Google Home上的语音指导和内容动作在Google助手上。”

Google首选的结构化数据格式为JSON-LD。这很好，因为它极大地简化了实现。

我们可以将所有标记添加到页面上的单个位置，并避免嵌套值的复杂化。

这是我们正在进行的工作。我们指定的页面包含一个派对咖啡蛋糕的食谱。这一页包含完成实施所需的所有细节。

请注意，我们需要将类型指定为“ application / ld + json”。默认情况下，浏览器采用“应用程序/ javascript”。我们还将指定schema.org作为标记类型。

添加完剩余的必需属性后，我们可以在结构化数据测试工具。我们可以很好地看到和组织所有值。

但是，我们可以看到有关缺少可选属性的警告。

warningaggregateRating	建议使用gregateRating字段。请提供一个值（如果有）。

我们将通过添加嵌套的Review元素来改进标记。

“评论”：{

“ @type”：“评论”，

“ reviewRating”：{

“ @type”：“评分”，

“ ratingValue”：“ 4”，

“ bestRating”：“ 5”

}，

“作者”：{

“ @type”：“人”，

“名称”：“玛丽·斯通”

}，

“ datePublished”：“ 2018-05-01”，

“ reviewBody”：“这蛋糕好吃！”，

“发布者”：“蛋糕制作厂”

}
然后，我们可以添加缺少的AggregateRating。

“ aggregateRating”：{

“ @type”：“ AggregateRating”，

“ ratingCount”：“ 18”，

“ ratingValue”：“ 4”

}
最后，我们可以在结构化数据测试工具中再次测试最终标记。

我们摆脱了警告，如果您点击预览，您将看到我上面显示的图像。
使用JavaScript生成JSON-LD标记

产生有效的标记是很好的，但是由于数据是经过硬编码的，因此在添加评论时不会更新评论的数量。

让我们充分利用我们的新JavaScript技能并加以解决！

出于说明目的，当我们提交新评论时，我们将仅增加网页和JSON-LD对象上的评论数量。

可以使用相同的方法用页面中的数据填充JSON-LD对象。但是，实际上，JSON-LD对象的数据将来自数据库，与页面内容的方式相同。

var json_str =`{

“ @context”：“ http://schema.org/”，

“ @type”：“食谱”，

“评论”：{

“ @type”：“评论”，

“ reviewRating”：{

“ @type”：“评分”，

“ ratingValue”：“ 4”，

“ bestRating”：“ 5”

}，

//加上其他元素

}`;

此处的重要技术是将整个硬编码的JSON-LD代码保存在JavaScript字符串变量中。我使用反引号来处理多行文本。

函数update_ratingCount（ratingCount）{

var jsonld = JSON.parse（json_str）;

jsonld.aggregateRating.ratingCount = ratingCount;

返回JSON.stringify（jsonld）;

}

我使用JSON.parse将字符串转换为易于引用JSON-LD结构中任何元素的对象。

了解如何使用jsonld.aggregateRating.ratingCount中的点导航嵌套级别。然后，在更新ratingCount值之后，我需要将对象转换回字符串以插入页面。

最后，我们需要更新React组件的render（）函数。它应该执行以下附加步骤：

提取当前评论数
将它们增加一
用增加的评论更新页面
也更新JSON-LD，但是它将用我们创建的函数生成的脚本替换整个脚本。

如果（this.state.submitted）{

//获取当前评论

var review_count = document.querySelector（“ body> div> div：nth-child（4）> div.col-lg-12> h2”）。textContent;

review_count = review_count.split（“”）[0]

//将当前的评分增加一

var count = parseInt（review_count）;

数++;

review_count = count.toString（）;

//现在我们有了新的评论数。我们可以更新页面和JSONLD

document.getElementById（“ user_reviews”）。innerHTML =`$ {review_count}用户评论`;

document.getElementById（“ jsonld”）。innerHTML = update_ratingCount（review_count）;

if（this.name ==“”）{

返回“您提交了$ {this.state.review}”；

}其他{

返回“ $ {this.state.name}”，表示您已提交$ {this.state.review}`；

}

我在Chrome中对此进行了测试，并且可以在开发者工具的“元素”标签下看到更新的值。它不能与结构化数据测试工具一起使用，因为更改不是永久的。

那里有。如果您亲自尝试这些代码段和代码实验室，那么您应该已经学到了足够多的JavaScript才是危险的！

社区项目和资源以了解更多信息

学习编程和JavaScript的最佳方法尤其是实践。您做得越多，就越能做到。

不要因最初的障碍而灰心，以后再提出新的想法。

这是一些使您热身的教程。

今年始于SEO社区中有关Python，编码和自动化的激动人心的一年。

这么多很棒的项目，文章，视频和介绍指南。

我很高兴每个人都在彼此之间建立起彼此的工作，并使社区每天变得更强大，更有趣。

这是我要强调的一些项目。

如何使用Lighthouse和Google Data Studio汇总和自动化效果报告 https://t.co/KXYH7Ndb3I /通过 @丹·莱布森＃测量 pic.twitter.com/uibiGvEwQw

-Google Analytics（分析）（@googleanalytics） 2020年1月23日

丹·莱布森（Dan Leibson）和黑帮（Gang）不仅在Nodejs中创建了一个惊人的Lighthouse自动化工具。他们开源了它，并使其成为Google Analytics（分析）Twitter帐户的特色！

oryRory惊叹不已，它涵盖了许多高级概念的精美精美的笔记本电脑使我倍感十倍??????。他开始学习＃蟒蛇去年！为我们不断壮大的??SEO社区感到骄傲！ #DONTWAIT https://t.co/yuJzEWLIJI

-哈姆雷特（@hamletbatista） 2020年1月24日

Conductor的Rory Truesdale去年才开始学习Python，并组装了一个具有许多有价值功能的疯狂先进笔记本。非常令人印象深刻！

带BERT的群集/文本挖掘。很幸运能够接触到非常聪明的人/项目，并整理了这个实验代码，对不起代码没有注释及其超级beta表示歉意，但是，认为可以很好地分享。 @hamletbatista @jroakes @ RoryT11 @fighto pic.twitter.com/wA2HdXgzQL

-葛芬·赫梅什（@Ghermesh） 2020年1月24日

Gefen Hermesh创建了一个利用BERT的复杂集群解决方案。

@jroakes 做奇妙的事情。 https://t.co/CLk6YsmCMI

-?约翰（@JohnMu） 2019年12月10日

JR Oakes一直在编写不可思议的东西。迷你互联网获得了约翰·穆勒（John Muller）的广泛赞誉，最近又有了一种先进的关键字聚类算法。

HülyaÇoban放在一起这个惊人的笔记本有助于在Google Data Studio中绘制Google趋势。
无疑，这将是令人兴奋的一年。

图片积分

作者截取的所有屏幕截图，2020年2月

SEO的现代JavaScript入门

利用React组件状态

如何在没有插件的情况下在 WordPress 中导入 CSV 文件

如何将 WordPress 置于维护模式（安全且简单的方法）

如何向 WordPress 帖子添加多媒体

谷歌域名与WordPress集成：建立您的专业网站

了解WordPress社区：专访揭示内部运作

Azure 提供的 WordPress 免费游乐场

SEO的现代JavaScript入门

利用React组件状态

相关文章