5

我正在使用选择一个菜单导航到我网站的不同部分：

<p:selectOneMenu value="#{navigator.outcome}">                      
    <f:selectItem itemLabel="Select page..." />
    <f:selectItem itemValue="page1" itemLabel="Page 1" />
    <f:selectItem itemValue="page2" itemLabel="Page 2" />
    <f:selectItem itemValue="page3" itemLabel="Page 3" />
    <p:ajax event="change" listener="#{navigator.navigate}" />
</p:selectOneMenu>

有没有更 SEO 友好的方式来做到这一点？我担心 JavaScript 链接不会被关注。

4

3 回答 3

7

使用自定义内容，<p:column>其中带有<h:link>.

豆：

private List<Page> pages;

@PostConstruct
public void init() {
    pages = new ArrayList<Page>();
    pages.add(new Page("Page 1", "/page1.xhtml"));
    pages.add(new Page("Page 2", "/page2.xhtml"));
    pages.add(new Page("Page 3", "/page3.xhtml"));
}

看法：

<p:selectOneMenu var="page">
    <f:selectItems value="#{bean.pages}" var="page" itemLabel="#{page.title}" />
    <p:column>
        <h:link value="#{page.title}" outcome="#{page.viewId}" />
    </p:column>
</p:selectOneMenu>

请注意，这不适用于List<SelectItem>单个<f:selectItem>条目。您确实需要提供一个List<Entity>（Entity在Page上面的示例中）。

这会生成一个<table>具有完整且可抓取（且可点击！）的<a>元素。

也可以看看：

于 2013-02-21T18:31:08.440 回答
2

只需创建函数导航为：

<p:selectOneMenu value="#{navigator.outcome}">                      
    <f:selectItem itemLabel="Select page..." />
    <f:selectItem itemValue="page1" itemLabel="Page 1" />
    <f:selectItem itemValue="page2" itemLabel="Page 2" />
    <f:selectItem itemValue="page3" itemLabel="Page 3" />
    <p:ajax event="change" listener="#{navigator.navigate}" />
</p:selectOneMenu>

public void navigate() {
    FacesContext context = FacesContext.getCurrentInstance();
    NavigationHandler navigationHandler = context.getApplication()
            .getNavigationHandler();
    navigationHandler.handleNavigation(context, null, outcome
            + "?faces-redirect=true");
}
于 2013-03-19T16:18:33.973 回答
1

有很多方法可以实现您想要的。首先，我将描述您的方法的替代方案，然后将发表一些关于 SEO 的评论。

在更改事件上使用普通表单提交

首先，当用户在更改事件上隐式提交表单时，您可以通过普通表单提交来处理导航：

<h:form>
    <h:selectOneMenu value="#{bean.currentPage}" converter="pageConverter" onchange="submit()">
        <f:selectItems value="#{bean.pages}" var="page" itemLabel="#{page.name}" />
    </h:selectOneMenu>
    <h:commandButton value="submit" action="#{bean.handleNavigation}" style="display:none"/>
</h:form>

和

@FacesConverter("pageConverter")

和托管 bean ( @ManagedBean Bean) 与

private List<Page> pages;
private Page selectedPage;

public String handleNavigation(){
    //do some job before navigation
    return (selectedPage == null) ? null : selectedPage.getUrl();
}

和模型类

class Page {
    private String name;//title in links
    private String url;//JSF view-id
}

在有意义的客户端按钮单击上导航

您可以使用您的保管箱来保留用户选择的选择，并有一个按钮来执行导航：

<h:form>
    <h:selectOneMenu value="#{bean.currentPage}" converter="pageConverter">
        <f:selectItems value="#{bean.pages}" var="page" itemLabel="#{page.name}" />
    </h:selectOneMenu>
    <h:commandButton value="Navigate" action="#{bean.performNavigation}"}/>
</h:form>

与上述相同的模型。

基于<h:link>s的导航

您是否使用简单<h:link>的 s 导航作业：

<ul>
    <ui:repeat var="page" value="#{bean.pages}>
        <li>
            <h:link value="#{page.name}" outcome="#{page.url}" />
        </li>
    </ui:repeat>
</ul>

并相应地设置此菜单的样式。

搜索引擎优化评论

如今，搜索引擎优化越来越重要，因此遵守其规则至关重要。除了使用上面的（基本）类命名页面链接之外，使用 url 重写解决方案也很重要Page，以便用户www.site.com/contact-us在他的浏览器中看到而不是www.site.com/contact.xhtml.

遵循恕我直言的最简单方法是使用Prettyfaces，这是一个很好的解决方案，符合我的口味。它允许您非常轻松地设置重写的 url（并在 JSF 组件中重写所有内部 url）。

为了增强您的站点 SEO 组件，您可以seoUrl在Page模型类中引入一个字段，然后有一个 Prettyfaces 映射，它将在 Web 浏览器的地址栏中显示 SEO 友好的 url (ie www.site.com/contact-us) 而不是 JSF view-id (ie )。www.site.com/contact.xhtml

编辑- 关于需要重写 URL 的争议

Google 提出的一些 SEO 友好规则的背景，这些规则参考了 URL 结构：

  1. 改进 URL 的结构 - 它还可以让搜索引擎更好地抓取您的文档（Google 搜索引擎优化指南）；
  2. 花时间使您的 URL 对用户和搜索引擎都尽可能简单。一些网站管理员试图通过将动态 URL 重写为静态 URL来实现这一点（相同的参考，斜体我的）；
  3. 在 URL 中使用单词（所有未来的参考都来自 Google 指南）；
  4. 创建一个简单的目录结构；
  5. 允许删除部分 URL 的可能性。

现在有一些来自 SEO 专家的一般指导方针：

  1. 创建优化的 URL（了解 SEO 友好的 URL 语法实践）；
  2. 静态就是道路和光明（URL 的 11 个最佳实践）；
  3. 尽可能选择描述性 URL（创建 SEO 和用户友好 URL 要遵循的 URL 规则）等。

我对这个问题的检查：

  1. 如果您使用的是静态类型的页面，它的 URL 可能是www.site.com/contact-us.xhtml，但为什么会有 6 个多余的字符 -www.site.com/contact-us会更好；
  2. 您的 facelet 页面可以位于深度嵌套的内部结构中，例如/pages/articles/general/how-to-do-jsf.xhtml，但如果需要，最好www.site.com/articles/how-to-do-jsf在页面中包含和 url 之类的路径；
  3. 一些开发人员倾向于使用 facelets 的短文件名 ( jsf-bp.xhtml) 或无意义的文件名 ( article23.xhtml)，但最好显示www.site.com/article/jsf-best-practices-for-beginners;
  4. 使用扩展，be it.xhtml等.jsf可能会导致用户（可能还有搜索引擎）认为内容是动态的（意味着内容是从模板呈现的），例如 in www.site.com/product.xhtml?id=12345，但应该首选静态内容，因为用户 (可能还有搜索引擎）会认为这样的 URL 描述了一个完全无状态的页面，例如www.site.com/products/jsf-book-for-advanced-users. 此外，它大大提高了网站的可用性，这也很重要；
  5. 人们倾向于将 id 用于查询参数（?id=12345），将名称用于路径参数（/jsf-book-for-advanced-users）；
  6. URL 重写提供了一种清晰的方式来浏览您的站点。想象一个路径www.site.com/products/jsf-book-for-advanced-users：这种类型的 url 结构将呈现一个独特的产品页面，删除/jsf-book-for-advanced-users可能会呈现一个完整的目录。但是，如果您有www.site.com/product.xhtml?name=jsf-book-for-advanced-users产品和www.site.com/catalogue.xhtml目录，会发生什么？用户不清楚逻辑，重写可以结构化您的 URL；
  7. 最后，大多数处理 SEO 的网站不使用文件扩展名（并且很少使用查询参数），以及我们所在的网站 stackoverflow.com。

我并不声称我提到的来源是无可争议的，或者非常权威，或者他们的输入需要应用于每个 Web 应用程序等，但我确实相信结构良好、用户友好的网站存在很长时间生产时间往往遵循这些规则。

于 2013-02-21T19:19:44.100 回答