Angular 应用的搜索引擎优化(SEO)实战指南

简介: Angular 应用的搜索引擎优化(SEO)实战指南

笔者之前在掘金社区发表了两篇关于 Angular 开发的文章,分别介绍了 Angular 支持服务器端渲染和 PWA 的技术细节:



本文我们来聊聊 Angular 应用的 Search Engine Optimization(简称 SEO,搜索引擎优化)这个话题。


SEO 是一种通过理解搜索引擎的运行规则,对网站进行相应的优化和调整,改进网站在搜索引擎的自然排名,从而提高网站的流量,增加品牌的曝光度和影响力的方式。

7c2896b93760072192f9da642a7ecbc8_format,png.png


图1:SEO 影响着网站根据关键字出现在搜索引擎结果列表里的顺序


SEO 主要包括两大类工作:站内 SEO 和 站外 SEO。


站内 SEO,主要是对网站自身进行优化。这包括网站结构优化、网页代码优化、内容优化、关键词优化等。对网站结构进行优化,可以让搜索引擎更好地理解和抓取网站内容。


  • 一个良好的网站结构应当是分层次的,每一层都有明确的主题,层级之间通过链接相互关联。
  • 对网页代码进行优化,可以减小网页的加载时间,提高用户体验。例如,可以通过压缩 HTML、CSS、JavaScript 代码,减少图片大小,减少 HTTP 请求等方式来提高网页的加载速度。
  • 对内容进行优化,可以让搜索引擎更准确地理解网页内容,提高网页在特定关键词下的排名。例如,可以通过选择适当的关键词,合理地在标题、正文、图片 ALT 属性等地方使用关键词,来提高关键词的相关性。- 对关键词进行优化,可以提高网页在搜索引擎上的可见度。例如,可以通过分析关键词的搜索量、竞争程度、商业价值等因素,选择最适合的关键词。


站外 SEO,主要是通过在其他网站上进行推广,提高网站的知名度和权威性。这包括链接建设、社交媒体推广、内容营销等。


本文重点介绍站内优化,这也属于我们 Angular 应用开发人员的工作范畴。


笔者仍然以自己团队负责开发的 Spartacus Storefront 电商框架为例,来介绍一个 Angular 应用,如果想进行搜索引擎优化,在编程方面到底有哪些工作可以去完成。


1. Stateful Urls

Stateful URLs 中文可以翻译成有状态的统一资源定位符, 是一种能够捕捉并反映网页或应用程序当前状态的网址。Stateful URLs 不仅定位到特定的页面,还包含了页面所处的特定状态或条件的信息。这样的 URL 通常包含查询参数、标识符或其他信息,使用户可以直接访问特定配置、数据或内容的页面。


当搜索引擎爬虫访问网页时,Stateful URLs 提供了更多信息,让爬虫能够深入到网站的各个状态或页面,进而更全面地索引网站内容。这意味着更多的页面能够被搜索引擎收录,提高网站在搜索结果中的可见性。


当网站采用 Stateful URLs 时,用户也更容易与网站交互,因为他们可以通过特定的 URL 直接访问所需页面。这对于网站导航、用户体验和社交分享都具有积极影响。同时,Stateful URLs 也支持深度链接,使得用户可以直接进入网站的特定页面,而无需经过中间步骤。


看个实际的例子吧。下图是 Spartacus 产品明细页面(Product Detail Page)的截图,我们观察其地址栏的 url:


https://spartacus-demo.eastus.cloudapp.azure.com/electronics-spa/en/USD/product/358639/DSC-N1

图2:Spartacus Storefront 的 Stateful Urls 一例


其中主机名后的 electronics-spa 代表 Storefront site id,en 代表这个 Storefront 使用的语言是英文,USD 代表这个站点交易的货币是美元。product 是这个站点的 semantic meaning,即产品页面。


358639 代表产品的 Code,而 DSC-N1 代表产品的名称 name.


这些产品数据的明细数据,通过 API 请求获取,如下图所示:


/occ/v2/electronics-spa/products/358639?fields=code,configurable,configuratorType,name,summary,price(formattedValue,DEFAULT),images(galleryIndex,FULL),baseProduct,averageRating,stock(DEFAULT),description,availableForPickup,url,numberOfReviews,manufacturer,categories(FULL),priceRange,multidimensional,tags&lang=en&curr=USD

图3:Spartacus Product 明细页面读取数据的 HTTP 请求


2. Configurable URLs

Web 应用中的 Configurable URLs,即可配置 url,指的是可以根据特定的参数或配置进行动态调整的网页链接。这种可配置性 URL 对于 SEO 至关重要,因为它们提供了更灵活、可定制的网址结构,有利于搜索引擎优化和用户体验的提升。


Spartacus 这些 stateful urls 的自定义配置,可以通过修改文件 default-routing-config.ts 里的 semantic routes 来完成,如下图所示:

  // pdp routes
  product: {
    paths: ['product/:productCode/:name'],
    paramsMapping: { productCode: 'code' },
  },

633ab368f84fe9de48f414fbfcb68a9b.png

图4:Spartacus Configurable URLs 的实现源代码


Configurable URLs 允许 Storefront 的实现者,通过参数或配置项改变 URL 结构,使其更符合搜索引擎优化的最佳实践,同时也更容易被网站用户所理解——清晰、可读性强的 URL 对于用户导航和记忆更为友好。Configurable URLs 可以通过识别关键字、产品名称、类别等,提供更有 semantic meaning 的网页链接,使用户更易于理解链接的目的,从而提升用户体验。


合理使用 Configurable URLs,还可以确保每个页面都有一个独特的 URL,这有助于搜索引擎更有效地索引网站的各个页面,并避免重复内容被索引。


3. 开启应用的服务器端渲染

在 SSR 模式下,当用户或搜索引擎访问一个网站时,服务器会预先渲染好页面的 HTML 内容,并将其发送给客户端。这意味着,当页面内容被浏览器加载时,所有的内容已经在服务器端被渲染好了,无需在客户端进行额外的 JavaScript 渲染工作。


这与客户端渲染(Client Side Rendering,简称 CSR)形成了鲜明的对比。在 CSR 模式下,服务器只提供基本的 HTML 框架,而页面的具体内容需要通过在客户端运行 JavaScript 来动态生成。虽然 CSR 提供了更好的用户体验,但对于搜索引擎来说,CSR 生成的内容可能会被忽略,因为搜索引擎主要依赖 HTML 来解析网页内容。


下图是 Spartacus Storefront 开启服务器端渲染后,客户请求某产品明细页面后,从浏览器里获得的 response 尺寸,高达 288 kb:


6bb5ab2a4ef12121b59ae19a10e51137.png


图5:Spartacus 开启了服务器端渲染后的页面渲染请求


对比 CSR 即客户端渲染模式下,服务器返回的 HTML 页面 body 元素内,只含有一个 cx-storefront 占位符,所以页面尺寸小得多,只有 171 个字节。


e8c7bb1fd094d380b48b8b37c2a31f20.png


图6:Spartacus 关闭了服务器端渲染后的页面渲染请求


Spartacus 服务器端渲染的实现,基于 @nguniversal/express-engine 和 express 作为 web 服务器引擎。

677ed07b391e8ff06a60eee70a9180ca.png


图7:Spartacus 服务器端渲染的处理逻辑入口


Angular 应用开启服务器端渲染支持的更多详细步骤,笔者在我另一篇掘金社区文章已经做了详细介绍基于 Angular Universal 引擎进行服务器端渲染的前端应用 State Transfer 故障排查案例


4. HTML Meta tag

HTML 标签,特别是 Meta 标签,允许搜索引擎、社交平台和网络 crawlers 进行解析,并在其平台中使用解析后的结果。 网站开发人员通过精心准备元数据标记,并定期评估其值,可以提高页面在搜索引擎结果列表中的排名、点击率和可用性。


在 HTML5 中,开发人员可以使用各种元标记属性(Meta tag Properties),例如 title和 description 属性。


这些自描述的元标签,供搜索引擎、社交平台和网络 crawlers 使用。 一些社交平台引入了独有的特定于其平台的属性集。例如,Facebook 使用 Open Graph 协议,该协议使得任何网页都可以成为其社交图谱中的富语义对象(Rich Object)。 可以使用特定的元标签来描述社交平台上的体验。


下面是 Spartacus 页面 head 元素里的 meta 元素例子:

<meta property="og:title" content="Custom title for Spartacus" />
<meta property="og:description" content="Custom description for Spartacus" />


目前 HTML5 支持在 HTML 页面里插入如下类型的 meta 元素:


49884dafcc37240b0e124c0fb64af85f_format,png.png


图8:HTML5 支持的 HTML 元数据 tag


当然,Spartacus SDK 的开发人员,不需要手动编辑这些 meta 元素,而是通过 projects\storefrontlib\cms-structure\seo\seo-meta.service.ts 这个服务类里的一系列 set 方法来完成 meta 元素的写入。


714ccad590d8dd4dcaa52614a29ff964.png


图9:Spartacus SDK 对 meta 元素的 API 支持


总结

本文介绍了 Angular 应用进行搜索引擎优化的四种思路,即 Stateful Urls,Configurable URLs,服务器端渲染和 HTML Meta tag,这四种手段都在笔者实际项目中使用过,希望对广大 Angular 开发者有所借鉴作用。

相关文章
|
1月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
24 2
|
2月前
Angular 应用里异步打开对话框的技术实现
Angular 应用里异步打开对话框的技术实现
16 0
|
2月前
|
Web App开发 UED 开发者
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
25 1
|
1月前
|
Go
Mac安装Angular并部署运行应用
Mac安装Angular并部署运行应用
|
2月前
|
缓存 前端开发 JavaScript
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
38 0
|
2月前
|
缓存 JavaScript 前端开发
Angular PWA 应用什么情况下会出现 504 error
Angular PWA 应用什么情况下会出现 504 error
46 0
|
2月前
|
网络协议 JavaScript
Angular 服务器端渲染应用里重用 TCP 连接的示例代码
Angular 服务器端渲染应用里重用 TCP 连接的示例代码
19 0
|
2月前
|
缓存 JavaScript 中间件
如何在 Angular 应用中发起 HTTP 302 redirect
如何在 Angular 应用中发起 HTTP 302 redirect
22 0
|
2月前
|
Web App开发 前端开发 API
Skeleton Design 理念在 Angular 应用开发中的具体应用一例
Skeleton Design 理念在 Angular 应用开发中的具体应用一例
21 1
|
3月前
|
缓存 JavaScript 前端开发
关于 Angular PWA 应用中的 ngsw.json 文件
关于 Angular PWA 应用中的 ngsw.json 文件
23 1

相关产品