vaadin_Vaadin在SEO中的冒险

vaadin

TL; DR ：Vaadin过去几乎对SEO不友好。 不再有新的伏尔加河图书馆。

为页面添加书签

书签与www本身一样古老。 能够保存URL是网站ADN的一部分。 关于网络应用程序，这有所不同。 例如，在电子商务Web应用程序中，虽然为特定产品添加书签确实有意义，但为结帐流程的特定步骤添加书签却没有意义。

遵循shop示例，这是在传统的基于servlet的上下文中发生的情况：

1. Servlet映射到特定的子上下文，例如/product/*
2. 调用URL /product/really-cool-product将调用该servlet的doGet()方法。
3. 该方法解析URL来读取really-cool-product部分-这应该是产品的唯一键
4. 它委派了整个组件链，这些组件从数据存储区加载产品
5. 它将与相关产品数据一起转发到JSP
6. 该JSP生成HTML

单页应用程序

来SPA吧。 根据定义，它们在同一URL下提供所有内容。 由于本身没有页面，因此无法为应用程序的特定页面添加书签。 通常，SPA使用片段标识符处理此问题。 上面的URL变成/product=really-cool-product ，问题已解决。 在Vaadin中，这直接转换为Page.getCurrent（）。setUriFragment（）方法或Navigator API的用法。

不幸的是，这对于SEO的爬网部分根本不起作用。 片段不是URL的区分部分： =really-cool-product和=another-cool-product确实指向同一URL，因此Google Bot之类的漫游器不会同时爬行这两个URL 。

片段标识符的功能与URI其余部分的功能不同：即，其标识符处理完全是客户端的，没有Web服务器的参与。

—维基百科

SPA的不同URL

回到第一个方框，既需要/product/really-cool-product /product/another-cool-product路径，又需要/product/another-cool-product路径。 这个问题不是Vaadin独有的，而是所有服务器和客户端SPA框架共有的。 需要的是：

1. 要让客户端无需服务器交互即可更改浏览器的URL-无需重新加载页面或调用AJAX
2. 让服务器处理路径

在JavaScript中，答案是使用History API 。 我假设每个人都熟悉以下片段：

window.back();
window.go(-1);

但是，这绝对不是标准的。 应将其替换为以下内容：

window.history.back();
window.history.go(-1);

history对象实现了History API。 特别是，它的API使通过pushState()方法在浏览器历史记录中添加条目成为可能。

假设http://mozilla.org/foo.html执行以下JavaScript：

varstateObj={foo:"bar"};
history.pushState(stateObj,"page 2","bar.html");

这将导致URL栏显示http://mozilla.org/bar.html ，但不会导致浏览器加载bar.html甚至检查bar.html是否存在。

— Mozilla开发人员网络

在服务器端，处理某些路径非常琐碎-即使某些设计比其他设计更好。

除了不同的URL

唯一的URL只是关于SEO的冰山一角。

一个人想要为每个专用URL具有专用的元标头，例如<title>和<meta name="description"> 。 更进一步，社交媒体具有自己专用的元标题， 例如 ：

• Twitter的Twitter卡
• Facebook的开放图

Volga，对SEO友好的Vaadin库

在Vaadin项目中从头开始实施上述步骤绝对不是一件容易的事。 欢欣鼓舞的是Volga ，这是一个现成的库，可以为您处理各种麻烦。

要使用它，只需将此代码段添加到您的POM中：

<dependency>
    <groupId> org.vaadin </groupId>
    <artifactId> volga </artifactId>
    <version> 0.1 </version>
</dependency>

API的重要部分包括：

org.vaadin.volga.VolgaDetails

持有一组元数据标题

org.vaadin.volga.VolgaServlet

为根路径设置VolgaDetails ，并提供路径与其他VolgaDetails对象之间的绑定。 这样，可以为每个特定路径设置自己的VolgaDetails 。

org.vaadin.volga.Volga

保存先前定义的映射

org.vaadin.volga.VolgaUI

处理初始配置

org.vaadin.volga.SeoBootstrapListener

从VolgaDetails对象填充页面元数据标题

有关更多详细信息，请在Github上检查此示例项目 。 它已在线部署，并且在Google搜索中显示的结果证明了它的有效性。

这也适用于Twitter：

翻译自: https://blog.frankel.ch/adventures-in-seo-with-vaadin/

vaadin