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>その中に aを含むカスタム コンテンツを使用し<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>ナビゲーション

あなたは単純な<h:link>sで仕事をナビゲートしますか：

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

それに応じてこのメニューのスタイルを設定します。

SEOコメント

SEOは最近ますます重要になっているので、そのルールに従うことが不可欠です。上記のように（基本）クラスでページ上のリンクに名前を付けることに加えて、URL書き換えソリューションを使用することが重要ですPage。これにより、ユーザーはwww.site.com/contact-usブラウザで表示され、表示されなくなりwww.site.com/contact.xhtmlます。

IMHOをフォローする最も簡単な方法は、私の好みに合わせて、優れたソリューションであるPrettyfacesを使用することです。これにより、書き換えられたURLを非常に簡単に設定できます（そして、JSFコンポーネントのすべての内部URLを書き換えることができます）。

サイトのSEOコンポーネントを強化するために、モデルクラスにフィールドseoUrlを導入し、WebブラウザのアドレスバーにJSFビューID（つまり）の代わりにPageSEOに適したURL（つまり）を表示するPrettyfacesマッピングを作成できます。www.site.com/contact-uswww.site.com/contact.xhtml

編集-URL書き換えの必要性に関する論争

Googleが提案した、URL構造を参照するSEO対応ルールの背景：

  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. フェイスレットページは、のように深くネストされた内部構造に配置できますが、必要に応じて、パスがページに反映される/pages/articles/general/how-to-do-jsf.xhtmlようにURLを設定することをお勧めします。www.site.com/articles/how-to-do-jsf
  3. 一部の開発者は、ファセットの短いファイル名（jsf-bp.xhtml）または意味のないファイル名（）を使用する傾向がありますが、 ;article23.xhtmlのURLを表示することをお勧めします。www.site.com/article/jsf-best-practices-for-beginners
  4. 拡張機能を使用すると.xhtml、.jsfユーザー（およびおそらく検索エンジン）は、のようにコンテンツが動的である（つまり、コンテンツがテンプレートからレンダリングされる）と考えるようになる可能性www.site.com/product.xhtml?id=12345がありますが、ユーザーとしては静的コンテンツを優先する必要があります（そしておそらく検索エンジン）は、そのようなURLがのように完全にステートレスなページを記述していると考えるでしょうwww.site.com/products/jsf-book-for-advanced-users。さらに、サイトの使いやすさを大幅に向上させます。これも非常に重要です。
  5. ?id=12345人々はクエリパラメータ（）にIDを使用し、パスパラメータ（）に名前を使用する傾向があります/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 に答える