ライブラリ方式における動作概要 – WOVN.io HelpCenter

ライブラリ方式は、スクリプト方式のデメリット2点をカバーしていますが、環境によっては導入ができない、導入工数がかかるデメリットがあります。

ライブラリ方式のメリット

翻訳後ページが検索サイトに掲載される
ユーザーは翻訳済み HTML を読み込む為、ほとんどの場合において一瞬元言語が表示される事がなくなる

ライブラリ方式のデメリット

提供ライブラリ動作要件に合わない場合、導入が出来ない
スクリプト方式に比べて導入工数がかかる

動作の概要図

処理概要

以下はライブラリ方式の詳細な動作フローです。

1. 翻訳後URLに関する処理を追加

WOVNライブラリは翻訳後ページ用のURLルーティングを新たにアプリケーションに追加します。追加される URL は3種類あります。これは WOVNライブラリの設定オプションで変更できます。

パラメーターについては各種WOVNライブラリのヘルプを参照してください。

元言語の URL	URLパターン	言語切替後の URL
https://example.com/content	パス形式	https://example.com/en/content
	サブドメイン形式	https://en.example.com/content
	クエリ形式	https://example.com/content?wovn=en

2. HTML の翻訳処理

WOVNライブラリが言語切替に伴って書き換えているHTMLは下記の通りです。

aタグの URL 書き換え

a タグの href 属性にある URL を書き換えます。

表示しているページが元言語の場合、a タグに対する処理は行われません。

formタグの URL 書き換え

form タグの action 属性に書かれている URL を書き換えます。

表示しているページが元言語の場合、form タグに対する処理は行われません。

WOVNタグの追加

WOVNタグを HTML に追加します。

<head>
    ...
    <script src="//j.wovn.io/1" async="true" data-wovnio="key=2DXsR&backend=true&currentLang=en&defaultLang
    =ja &urlPattern=query&version=0.2"></script>
    ...
</head>

WOVNタグは、下記3つの処理を行います。

JavaScript で再度翻訳処理を行い、JavaScript 中にあるテキストや画像を置換します。
ページの内容が変わった場合、WOVNサーバーに新しく追加されたテキストや画像を報告します。
言語切替ウィジェットを表示させます。

3. 言語情報の追加

SEO 対策のために、HTML に言語情報を追加します。
対象サイトに設定している言語に対応した<meta hreflang="..."> タグが追加されます。
タグは、WOVNライブラリに設定した supported_lang に記載した言語分追加します。

link hreflang タグの追加

翻訳ページがあることを示すために、link hreflang タグを HTML に追加します。

<head>
    ...
    <link rel="alternate" hreflang="en" href="https://wovn.io/en/">
    ...
</head>

html タグに lang 属性を追加

html タグに lang 属性を追加します。

lang 属性は、このページがどの言語で記述されているかを示します。

<html lang="en">
      ...
</html>

このセクションの記事