使用HTML5，CSS3和Javascript增强SEO友好标记

我们最初的由三部分组成的针对开发人员的SEO系列的第一部分：与搜索引擎领域共存，我们开始涵盖技术SEO并在从业人员和开发人员之间交流问题。 为了进行全面的对话，我们接待了演讲者，他们从实践者的角度出发，并结合了SEO In-House作为企业团队的一部分的实际效果。 我们的客人是：

• 南部新罕布什尔大学的Katie Meurin
• ZenSEM的Anthony Muller
• Duda战略整合总监Russ Jeffrey

如果您希望听到与客户，开发人员一起实现变更的新想法，或者希望从组织内部提高效率，那么该视频非常棒。 了解与开发人员混在一起的团队建设策略，以及当您不属于组织机构时可能面临的困难。

本课程的第二部分继续讨论基本的JavaScript SEO，并提供React和Vue的代码示例，使您可以从这些项目开始着手。 学习使用这些流行的JavaScript（框架）库解决一些索引问题，并找到将SEO实施到类似脚手架或样板javascript项目中所需的技巧。

与开发人员沟通技术SEO的要求

根据您的情况，将SEO与开发人员进行交流的范围可以从感觉到您总是走在蛋壳上，非常小心不要踩踏自我或领域，到另一个极端，您会感到无奈，无论您多么强调需要改变，似乎没有希望，就好像您在呼啸而过一样。

您如何最好地解决人格问题？ 您可以采取一些措施来增加成功的几率，或者避免常见的陷阱，而将这些信息提供给您是我们第一届第一期讨论的目标。

安东尼和凯蒂分享了一个故事，讲述了如何从严峻的前景开始，最终能够与开发人员建立合作伙伴关系，或者无论如何都成功。 您会听到两人如何竭尽全力尝试并说服从自制纸杯蛋糕到伏特加瓶的一切。 尽管这些通常被认为是有用的策略，但实际上这些想法对他们没有用。

重大网站变更

在主要站点更改期间，技术堆栈的多个方面可以在短时间内更改。 当您遇到相关的流量损失时，您可以将故障与事件以及该技术的特定方面相关联。 那时，技术SEO技能和对问题的了解可能会变成一个十字路口，您需要将该发现传达给可能与您不同意采用哪种方法的开发人员。

我进行了司法鉴定，发现了技术问题。 首席开发人员就像：“我们怎么知道这不是什么？” 答案是，您真的不知道。 您只有直觉和丰富的经验才能尝试以这种方式进行指导。 我们进行了更改，就在一年中最繁忙的时间之前，我们看到了上升40点的趋势，并带来了数百万的额外收入。 通用汽车曾说：“我很敬畏。 你知道的，这很棒。” 那时，主要开发人员决定将平台重新构建为React。

安东尼·穆勒（Anthony Muller）

开发人员总是有机会偏向于使他们感到满意或兴奋使用的技术。 作为开发人员，我们喜欢认为自己不是对技术持有不必要的偏见，但实际上，我们希望控制自己的编程环境。 我们并不总是能够做到，在可能的时候我们可能会像其他人一样有偏好。

当有钱时，您必须抵消可能需要自我分析的任何偏爱。 当别有用心的人使我们倾向于使用不合适的技术来使用最熟悉的技术或获得最新JavaScript库的经验时，就会出现问题。

技术选择的问题并不总是由开发人员承担。 在我们的第三个视频中，Martin Splitt谈到了使用Angular开发银行应用程序。 不幸的是，Angular成为了可以用于所有事物的受膏技术。 这是领导者的错误，因为假定在一个业务领域中可靠的技术选择在其他任何地方都是安全的选择。

事情从未如此简单。

React的问题是……

ReactJS是前端的绝佳用户界面（UI）构建器。 当开发人员希望不仅将网页的概念简化为UI的概念时，还会产生混乱。 网页可以以不需要UI的方式与JavaScript交互。 在某些情况下使用React将导致过度设计，结果我们拥有单页面应用（SPA）网站的历史记录，这些网站通常排名不高。

而且，支持React的基础技术堆栈并不理想地适用于静态网站，即使它肯定可以用于静态网站。 例如，有一个Gat**y，一个基于React及其约定的静态站点生成器（SSG）。 信不信由你，对于大多数静态网站而言，平淡无聊的jQuery仍然比Gat**y更合适。

React绝对是一项重要的创新。 当您需要响应式页面元素作为站点功能的一部分时，换句话说，当通用数据或特定于用户的数据发生变化时，这些元素也会发生变化，这就是React成为绝佳选择！ 您将获得从jQuery到基于组件的反应式库的范式转换的所有优势，以开发最先进的交互性。 例如：如果您想发起自己的聊天，请查看React。

开发人员只需要在实际需要jQuery或香草JavaScript的情况下避免使用React。 这就是问题所在，因为他们不愿意避免使用自jQuery之后最大的客户端库创新。 他们都想加深对最新知识的了解，以提高就业能力。 React程序员有很多空缺职位。 我们将学习如何正确设置它。

服务器端渲染

对于该问题的部分解决方案，称为服务器端渲染（SSR），可能最好地描述为在收到有关这些库的早期版本对搜索引擎不友好的反馈后，“黑客”到位。 Russ描述了React仍然如何促进根据惯例默认为客户端渲染（CSR）的脚手架或样板。 他向我们展示了如何使用React和Vue进行SEO设置。

关于常绿铬的说明

Evergreen Chromium使Googlebot保持最新的Chrome版本。 Google现在可以相当轻松地获取CSR内容，但这当然不是灵丹妙药。 开发人员可能认为这意味着不必要的SSR，但是对于Googlebot而言，您的关键内容无法立即获得，而且如果不采取谨慎措施确保其有效，则根本无法使用。

对于SEO来说，当然也不理想。 即使现在与Google相比，现在的情况可能会好一些，您也需要考虑使用社交媒体抓取工具。 Bing改用Evergreen Chromium，但Facebook和Twitter尚未这样做，谁知道他们是否会这样做？

如何实施SEO？

凯蒂（Katie）在一个组织内部和一个庞大的开发团队一起工作，发现通过票务流程提交问题对于技术性SEO更改而言不够快。 此外，她无法评估SEO请求与开发团队正在从事的其他工作之间的相对重要性。

在与杰西卡·鲍曼（Jessica Bowman）（内部SEO）一起参加西部搜索营销博览会（SMX）的主题演讲后，凯蒂受到启发，尝试了另一种方法。

她在谈论SEO的运作，并说任何接触该网站的人可能在没有意识到的情况下做出数百万美元的SEO决策。 碰触它的人总是会比你多。 没有足够的SEO可以在房间中放置所有这些东西的SEO。 如果您觉得自己一直在追赶火，那么您需要实施SEO。

凯蒂·梅林（Katie Meurin）

凯蒂（Katie）使她的开发人员团队成员接触到更多的SMX会话内容，在工作之后，他们开始向她询问有关他们正在考虑的更改可能如何影响网站SEO的问题。 这是她从被困在单独的筒仓中到与开发团队一起工作所需要的突破。

由于团队建设会议促进了这些更有成效的交流，因此Katie继续在内部组织技术SEO培训，并希望建立一个全新的体系结构，其中SEO是即将推出的新网站的基本功能。

与她一起工作的开发人员了解了如何使用SEO工具，并开始在工作流程中直接使用其中的一些工具。 他们开始使用命令行SEO工具测试开发分支版本，以确保通过Lighthouse和Web Vitals获得良好的成绩。 关于SEO详细信息的任何分歧都将得到解决，因为Katie的团队文档通常只是澄清了语言问题。

正是通过这些经验，Katie能够与开发团队一起提高其技术SEO的优先级，开发团队的成员对了解他们所做的业务影响的价值深感赞赏。 这是一个巨大的转变，从不知道她的技术SEO票是否优先于神秘工作任务到开发人员在尽可能多地关注SEO（可能涉及前端设计细节）方面一直不关心SEO。

服务器端渲染（SSR）

那么，当Anthony的客户在Googlebot的Evergreen Chromium版本发布之前切换到React时发生了什么？ 试想一下，当80％的收入与油价排名挂钩时。 Anthony试图说服所有人，包括邀请外部开发人员推荐实施SSR。

为了满足SEO要求，您将需要SSR策略，该策略应带有充实且经过优化的内容的代码，否则您的排名将无法反映网站页面的价值。

首席开发人员（正确地）对听到实施SSR的建议感到失望，这完全否定了使用反应式库的所有实际优势。 对具有静态站点的React的无用技术偏爱突然成为技术障碍，这开始困扰他们，因为他们不想偿还技术债务。

首席开发人员坚持就发生的事情提供替代性解释，并且出于莫名其妙的原因，他们完全拒绝了转向SSR的建议。 同时，Google发起了Evergreen Chromium计划，新的Googlebot索引将流量提高了7％，这使开发人员可以进一步延迟不可避免的情况。

这还不足以弥补损失的收入，最终变得越来越明显，React是为静态网站提供动力的技术的错误选择。 Anthony最终提出了SSR建议，并想象当搜索流量迅速回升60％时会发生什么。 想象一下，由于这样一个基本而明显的渲染问题而导致的时间浪费所产生的未得收入的差异。

适用于React和Vue的JavaScript SEO

开发人员需要足够的技巧和态度来灵活地使用这些流行的JavaScript库（框架）为SEO实施SSR。 Russ为我们提供了一个很好的入门教程，介绍了如何使用React和Vue进行操作，以及有关如何包括基本SEO的快速提示。 在下一部分中，我们将用所有详细信息进行介绍，然后再使用Puppeteer编写脚本进行抓取。

<**all>SEO的更多开发技巧

• <**all>我们的开发人员SEO专栏
• <**all>如何使用自定义功能在Google表格中显示Lighthouse评分
• <**all>使用React或Vue以及NodeJS和其他后端堆栈的反应式JavaScript SEO
• <**all>SEO如何创建免费的服务器日志仪表板以更好地了解网站的传入流量