機械翻訳について

20 アプリの検索エンジンを最適化

検索エンジン最適化(SEO)は、webクローラがアプリケーションのページにアクセスしやすくする様々な手法、Webをクロールするために検索エンジンによって使用されるスクリプトおよび索引付けのためのページの収集をカバーしています。 SEOは、検索結果のインデックス付きページのランキングを増やして、コンテンツの可視性を高めることを目指しています。

多くの場合、サイト・マップを使用してアプリケーションのページのランキングを改善できます。 サイト・マップには、ページのURLがリストされます。これにより、webクローラは、ページのクロールと解析のみに依存することなく、コンテンツを識別できます。 ただし、サイト・マップはwebクローラが索引付け用のページを見つけるのに役立つ場合がありますが、索引付けプロセス自体は単一ページ・アプリケーションにとって理想的ではありません。 これは、RESTコールの結果に基づいてコンテンツがページに動的に追加される場合に特に当てはまります。 このようなシナリオでは、webクローラは、RESTコールが完了し、ページが完全にレンダリングされてからページが索引付けされるまで待つことができない場合があります。 コンテンツを完全にロードする前に索引付けされたページは、検索結果では機能しません。

この問題に対処するために、webクローラがアクセスするVisual Builder "prerenders"ページ。 Googlebot(または他の検索エンジン)からページに対するリクエストを受信すると、そのリクエストはレンダー・サーバーを介してルーティングされ、ページがロードされ、そのページを完全にレンダリングするために必要なJavaScriptが実行されてから、Googlebotにページを戻す前に削除されます。 このように、Googlebotは常に、ソースにJavaScriptがないページのみのインデックス作成用に完全にレンダリングされたページを受け取ります。

レンダリングされたページは、常にキャッシュされるため、同じURLに対して後続のリクエストが行われた直後にページ・マークアップを戻すことができます。 これにより、ページ・ランキングに悪影響を及ぼす可能性のあるページ・ロード時間が短縮されます。 マークアップがまだキャッシュされていない場合は、ページのレンダリング処理に時間がかかる場合があります。 これらのレスポンス時間を最適化するには、アプリケーションのサイト・マップにリストされているURLのレンダー・サーバーのキャッシュをウォームすることをお薦めします。そのため、webクローラは、それらのURLをリクエストするときに常に最速のレスポンスを取得します。

検索エンジン用にアプリケーションを最適化するための推奨アクションのリストを次に示します:
  1. webアプリケーションの場合は「サイト・マップの作成」。
  2. 「webアプリケーションのリソースへのサイト・マップの追加」。
  3. webアプリケーションがデプロイ(または再デプロイ)されると、「アプリのサイト・マップにリストされているURLのキャッシュをウォーム・アップ」 (vb-prerender-cache-warm Gruntタスクを使用)になります。

Webアプリケーションのサイト・マップの作成

サイト・マップは、アプリケーションの代表ページへのURLを含むドキュメントです。 これにより、webクローラがロケーションを特定し、適切にランク付けするために、アプリケーション内の重要なロケーションを確保できます。

単純なサイト・マップは次のようになります:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>https://eta.myexample.org/?page=shell</loc>
      <lastmod>2023-08-21T16:12:20+03:00</lastmod>
   </url>
   <url>
      <loc>https://eta.myexample.org/?page=shell&shell=bugs&bugs=main-bug</loc>
      <lastmod>2023-08-21T16:12:20+03:00</lastmod>
   </url>
   <url>
      <loc>https://eta.myexample.org/?page=shell&shell=tags</loc>
      <lastmod>2023-08-21T16:12:20+03:00</lastmod>
   </url>
</urlset>
各<url>タグは、ページのURLを指定するために使用されます。 このタグにはいくつかの子タグがありますが、<loc>タグと<lastmod>タグのみがレンダー・サーバーのキャッシュに移入するために使用されます:
  • <loc>は、ページの実際のURLを指定する必須タグです。 <loc>タグの値は、プロトコル(httpsなど)で始まり、webサーバーで必要な場合は末尾のスラッシュで終わる必要があります。 この値は2,048文字未満である必要があります。
  • <lastmod>は、アプリケーション・デプロイメント間でURLの内容が変更された日付を指定する必須タグです。

インデックスを作成する個々のURLがサイト・マップに含まれていることを確認してください。 URLの内容がデプロイメント間で変更される場合(たとえば、ページに他のソースのデータが含まれている場合)には、最新のlastmodエントリも含める必要があります。

サイト・マップの一般的な情報については、https://www.sitemaps.org/protocol.htmlを参照してください。

Webアプリケーションのリソースへのサイト・マップの追加

webアプリケーションのリソースにサイト・マップを追加して、アプリケーションのコンテンツに関するWebクローラ情報を提供できます。

webアプリケーションのリソースにサイト・マップ・ファイルを追加する前に、索引付けする各URLと、各URLの最新情報が含まれていることを確認してください。 「Webアプリケーションのサイト・マップの作成」を参照してください。

webアプリケーションにサイト・マップを追加するには:

  1. sitemapファイル(sitemap.xmlやsitemap.txtなど)をVisual Builderのアプリケーションにアップロードします。

    sitemapファイルは、webアプリケーション・ディレクトリ(/webApps/mywebapp/sitemap.xmlなど)またはビジュアル・アプリケーションのルート・ディレクトリ(Readme.mdまたはvisual-application.jsonと同じレベル)に直接アップロードできます。 ルート/webAppsディレクトリの方が優先度が高く、ここでのサイト・マップ・ファイルのアップロードはすべてのwebアプリケーションで機能する必要があります。

    ビジュアル・アプリケーションのルートにサイト・マップ・ファイルをアップロードするには:

    1. ナビゲータでwebアプリケーションを開きます。
    2. 「ソース・ビュー」をクリックします。
    3. webAppsディレクトリを右クリックし、ポップアップ・メニューでインポートを選択します:

      ソース・ビューをクリックし、webAppsディレクトリを右クリックしたときに表示されるインポート・オプション

      または、ローカル・ファイル・システムからナビゲータのwebAppsディレクトリにファイルをドラッグします。

    4. 「リソースのインポート」ダイアログ・ボックスで、ロケーションのインポートフィールドからwebAppsを削除し、ドロップ・ターゲット領域をクリックして、ローカル・システム上のファイルに移動します:

      空白のインポート・ロケーション・フィールドと、インポート用に選択されたsitemap.xmlが表示された「リソースのインポート」ダイアログ

    5. 「インポート」をクリックします。
    サイト・マップがビジュアル・アプリケーションのルートに追加されます:
    ビジュアル・アプリケーションのルートに追加されたsitemap.xmlを示すソース・ビュー

  2. アプリケーションの説明/スニペットを追加します:
    1. ナビゲータで「Webアプリケーション」をクリックし、アプリケーションを開きます。
    2. HTMLをクリックして、アプリケーションのindex.htmlファイルを開きます。
    3. 「<head>」セクションの<meta name="description" content="description">タグを更新して、webクローラが抽出する説明およびスニペットを追加します。

      名前およびコンテンツ・メタ・タグが強調表示されたmywebappのHTMLエディタのビュー

      「スニペット」およびmeta-tagsのGoogleドキュメントで説明されているように、説明およびスニペットが推奨ガイドラインを満たしていることを確認します。

  3. アプリケーションのステージングと公開(ビジュアル・アプリケーションのプレビュー、ステージングおよび公開を参照)。

    アプリケーションが正常に「ステージング済および公開済」されると、次のようにサイト・マップ「デプロイ・ロケーション」にアクセスできます:

    https://visualbuilder-dev.integration.test.ocp.oraclecloud.com/ic/builder/rt/myproject/live/webApps/mywebapp/version_324616315386523389/sitemap.xml

    ノート:

    webアプリケーションを「ステージまたは公開」するたびに、新しいバージョンを使用するようにリソースのロケーションが変更され、サイト・マップ・ファイルが新しい/webApps/webAppName/version_idディレクトリに移動されます。 サイト・マップ「その後」にアクセスするには、リソース・パスで必ず新しいversion_idを使用してください。

    サイト・マップ・ファイルをビジュアル・アプリケーションのルート・ディレクトリ「webアプリケーションがステージングまたは公開されるたび」に自動的にコピーする場合は、「サイト・マップのビジュアル・アプリケーションのルート・ディレクトリへの移動」を参照してください。

サイト・マップのURLのキャッシュのウォーム

webアプリケーションに、アプリケーションのページ担当へのURLをリストするサイト・マップが含まれている場合は、vb-prerender-cache-warm Gruntタスクを使用して、これらのURLのレンダー・サーバーのキャッシュをウォームできます。そのため、Webクローラは、それらのURLをリクエストするときに可能なかぎり高速にレスポンスします。

vb-prerender-cache-warm Gruntタスクを使用するには、Node.jsとそのパッケージ・マネージャ(npm)をインストールして、ビジュアル・アプリケーションをビルドするようにファイル・システムを設定する必要があります。 必要なツールをインストールしたら、ビジュアル・アプリケーションのソースをローカル・システムに保存する必要があります。 「アプリケーションをローカルでビルド」を参照してください。

vb-prerender-cache-warm Gruntタスクを使用して、サイト・マップ内のURLのキャッシュをウォームするには:
  1. コマンドライン・インタフェースで、package.jsonおよびGruntfile.jsファイルを含むローカル・システム上のフォルダに移動します。
  2. npm installを入力して、アプリケーションのビルドに必要なノード依存性を取得します。
  3. キャッシュをウォームするには、コマンドライン・インタフェースにvb-prerender-cache-warmと入力します。 いくつか例を挙げます。
    • 再デプロイメント後にキャッシュを最初にウォームするには:
      grunt --id=MyApplication --ver=1.0 --sitemap="./webApps/myWebApp/sitemap.xml" --url=http://my.vbinstance.com/ic/builder --clearCache=true vb-prerender-cache-warm
    • サイト・マップのマイナーな変更後にキャッシュを更新するには:
      grunt --id=MyApplication --ver=1.0 --sitemap="./webApps/myWebApp/sitemap.xml" --url=http://my.vbinstance.com/ic/builder vb-prerender-cache-warm

    vb-prerender-cache-warmタスクは、起動時にmanifest.jsonファイルを読み取ります。 マニフェスト内のページのタイムスタンプとアプリケーションのサイト・マップを比較し、前回の実行以降に変更されたファイル(または前回の実行で失敗したファイル)でキャッシュをウォームし、実行の詳細を完了時に同じファイルに書き戻します。 clearCacheフラグが設定されている場合、タスクが完了すると既存のマニフェストはすべて無視され、上書きされます。

    前述の例では、最後の操作に関するメタデータが現在のディレクトリのmanifest.jsonに保存されます。 別のマニフェスト・ファイルから保存またはロードするには、--manifestオプションを指定できます: 
    grunt --id=MyApplication --ver=1.0 --sitemap="./webApps/myWebApp/sitemap.xml" --url=http://my.vbinstance.com/ic/builder --manifest="/tmp/manifest.json" vb-prerender-cache-warm

    サポートされているコマンド行オプションの詳細は、vb-prerender-cache-warmを参照してください。

サイト・マップのビジュアル・アプリケーションのルート・ディレクトリへの移動

webアプリケーション・リソースにサイト・マップを手動で追加する場合、アプリケーションが「ステージング済または公開済」であるため、サイト・マップ・パス「変更されない」のように、サイト・マップ・ファイルをビジュアル・アプリケーションのルート・ディレクトリにコピーするように設定できます。

webアプリケーションが「ステージング済または公開済」であるたびに、新しいバージョンを使用するようにリソースのロケーションが変更され、サイト・マップ・ファイルが新しい/webApps/webAppName/version_idディレクトリに自動的に移動されます。 そのため、アプリケーション・サイト・マップにアクセスするには、パスに最新のversion_idを含める必要があります。

/webApps/webAppName/version_idディレクトリからアプリケーション・ルート・ディレクトリ「アプリケーションがステージングまたは公開されるたび」にサイト・マップ・ファイルを自動的にコピーするには、アプリケーションのGruntfile.jsファイルを編集し、vb-post-packageタスクを追加します:

  1. Gruntfile.jsを開きます。
  2. ファイルを編集して、vb-post-packageタスクに対して実行するタスクを定義します:
    {code:java}
    /**
    Moves sitemap.xml resource back to Visual Application Root.
    */
    grunt.registerTask('vb-post-package', () => {
        const fileName = 'sitemap.txt'; // REPLACE WITH YOUR FILENAME
        const webAppName = 'mywebapp';  // REPLACE WITH YOUR WEB APP NAME
        const webAppDirectory = `build/optimized/webApps/${webAppName}`;
        // find out version dir
        const files = fs.readdirSync(webAppDirectory);
        const versionDir = files.find(file => /^version_\d+/.test(file));
        const source =
`${webAppDirectory}/${versionDir}/resources/${fileName}`;
        const target = `build/optimized/${fileName}`;
        // move the file back to assets root
        fs.renameSync(source, target);
        console.log(`${source} moved to ${target}`);
        });
{code}

    サイト・マップ・リソースおよびwebアプリケーションを使用するようにタスクを更新してください。

    既存のGruntタスクへのカスタム機能の追加の詳細は、「Gruntビルド・プロセスのカスタマイズ」を参照してください。