ウェブサイト上の画像を翻訳する方法（Alt Text + Files）

この投稿を次のように要約します: 9分で読めます

チャットGPT

困惑

グロック

Google AI

Web サイト上の画像を 2 つのレイヤーに翻訳します。まず、各画像に属するテキスト（alt テキスト、タイトル属性、キャプション、ファイル名）を翻訳します。次に、単語や文化固有のコンテンツが組み込まれた画像については、ローカライズされたバージョンを作成し、そのファイルをページの一致する言語バージョンでのみ提供します。ビデオと PDF は同じルールに従います。つまり、ビデオと PDF を説明するものを翻訳し、コンテンツが言語に縛られている場合はファイル自体を交換します。

主なポイント

Alt テキストは Google が読み取る部分です。Google はこれを “画像のメタデータを増やす上で最も重要な属性” と呼んでいます (Google検索セントラル) なので、翻訳されていない alt 属性は、すべての言語でランキング信号を見逃していることになります。
テキスト、価格、地元の参照、または人々と文化の手がかりを含む画像のみが別のファイルを必要とします。装飾的な画像や製品の写真は通常そうではありません。
CSS トリックでテキストを重ねるのではなく、URL で言語ごとにファイルを交換します。各言語ページは独自の画像ファイルを参照する必要があります。
Google は、画像をローカライズするときにファイル名も翻訳することを推奨しています。
この作業のほとんどを回避する最も早い方法は、新しいデザインの画像内にテキストを入れるのをやめることです。

メディア翻訳が重要な理由

訪問者は、言葉が翻訳され、写真が翻訳されていないことに気づきます。英語 “今すぐ購入” バナーを表示するフランスの価格ページ、または英語の UI が満載のスクリーンショットを含むドイツのランディングページは、未完成であると表示されます。

それを適切に行うための商業的根拠は、人々の買い物の仕方から生まれます。CSAリサーチが29カ国の8,709人の消費者を対象に実施した2020年“読めない、買わない”調査では、オンラインショッピング利用者の76%が母国語の情報を含む商品を購入することを好み、40%が他の言語のウェブサイトから購入することは決してないと回答したCSAリサーチ、2020年7月)。インフォグラフィック、サイズチャート、または“その仕組み”図も製品情報です。

検索理由もあります。画像検索と通常の結果内の画像は、周囲の単語と一致します。スペイン語ページ上の英語の代替テキストには、スペイン語検索者向けのページの英語の説明が Google に表示されます。

ウェブサイト上で “メディア” としてカウントされるもの

資産	翻訳するもの	通常、新しいファイルが必要ですか？
写真（製品、チーム、場所）	Alt テキスト、タイトル、キャプション、ファイル名	まれに
テキスト付きのバナーとヒーロー画像	Altテキストと画像自体	はい
インフォグラフィック、チャート、図	Altテキストと画像自体	はい
製品のスクリーンショット	Alt テキスト； UI がローカライズされている場合は画像	頻繁
アイコンとイラスト	Alt テキスト（意味のある場合）	テキストや文化的シンボルが含まれている場合に限ります
ビデオ（セルフホストまたは YouTube）	タイトル、説明、字幕	はい、音声または画面上のテキストがある場合は
PDF（パンフレット、マニュアル、仕様書）	リンクテキスト	はい

ステップ1:実際に言語を伝える画像を監査する

すでに提供している言語でトップページをクロールするか、手動で簡単に渡すことから始めます。各画像について次の3 つの質問をしてください:

ピクセルにテキストはありますか？バナー、画像として描かれたボタン、ラベル付きのチャート、スクリーンショット。
ローカルリファレンスはありますか？通貨での価格、電話番号、住所、日付形式、測定単位、季節のテーマ（オーストラリアでは雪 “休日” バナーは 7 月を意味します）。
イメージは文化によって変わるのでしょうか？手のジェスチャー、衣服、食べ物、地域的に強い意味を持つ色、またはあなたが取り組んでいる市場を反映していない人々。

答えが 3 回すべて “いいえ” の場合、画像に必要なのはテキスト属性の翻訳だけです。それ以外のものはすべて、トラフィックごとに分類されたローカリゼーションリストに掲載されます。

ステップ2:すべての画像に添付されている単語を翻訳する

これは、保存している画像も含め、すべての画像に当てはまります

Alt テキストをターゲット言語で記述します。キーワードリストを機械翻訳しないでください。Google が英語に対して与えているのと同じルールに従い、短く具体的な説明を書いてください (グーグル).
タイトルの属性とキャプションを翻訳します。キャプションは本文として表示されるため、ページの残りの部分と一緒に翻訳する必要があります。
ファイル名を翻訳します。Google のガイダンスは直接的です: “画像をローカライズする場合は、非ラテン文字または特殊文字を使用している場合は URL エンコードガイドラインを念頭に置き、ファイル名も翻訳することを忘れないでください” (グーグル). zapatillas-running-rojas.jpg スペイン語のインデックス以上のことを伝えます red-running-shoes.jpg.
製品または記事のマークアップが画像を参照している場合、 name そして description その周りもページの言語で記述する必要があります。

ステップ3: テキストの多い画像のローカライズ版を作成する

ローカリゼーションリストにある画像の場合:

ソースファイルを取得します。レイヤー化されたデザインファイル（Figma、Photoshop、Canva）からバナーを再作成することは、フラット化された JPG を編集するよりもはるかに迅速かつクリーンです。
最初にテキストを翻訳し、次にデザインします。文字列を翻訳者に送信するか、翻訳ツールに通して確認し、デザインに配置します。テキストが長くなることを期待してください；ドイツ語とフランス語の見出しは英語よりも多くのスペースを必要とすることが多いため、スペースを空けるか、タイプを縮小してください。
右から左へのレイアウトを確認します。アラビア語またはヘブライ語の場合、方向要素（矢印、進行状況、前後の画像の読み取り順序）をミラーリングします。
たとえば、明確な命名パターンでエクスポートします pricing-banner-de.webp, pricing-banner-fr.webpレイアウトがジャンプしないように、元の寸法と同じ寸法を維持します。
英語のバナーが変更されると他の言語も更新されるように、どの画像にローカライズされたバージョンがあるかを記録します。

再設計するときは、問題を小さくします。背景画像の内側ではなく、背景画像の上にライブ HTML テキストで見出しを配置します。ライブテキストはページの残りの部分とともに翻訳され、追加のファイルは必要ありません。

ステップ4: 各言語バージョンで適切なファイルを提供する

ローカライズされたファイルは、各言語ページがそれを指している場合にのみ役立ちます。それをどのように行うかはスタックによって異なります:

言語ごとに個別のページ（多言語 CMS セットアップ）を使用して、ローカライズされた画像を各言語のページまたはメディアフィールドにアップロードします。
翻訳レイヤーまたはプラグインを使用すると、メディア置換機能を使用できます src 元のページが元のファイルを保持している間、翻訳されたページの画像が変更されます。
カスタムコードでは、文字列を保存するのと同じように、ローカライズされたリソースファイルに画像参照を保存します。

どちらのルートを使用する場合でも、翻訳されたページのレンダリングされた HTML を確認し、を確認します <img src> そして alt 属性は両方とも変更されました。

ビデオとPDF

ビデオの場合、字幕は最も安価で検索可能なオプションです。YouTube とほとんどのビデオプレーヤーは、言語ごとに字幕ファイルを受け入れます。画面上のテキストやナレーションが多いマーケティングビデオの場合は、別のローカライズされたカットの方が優れており、翻訳されたページには元のバージョンではなくそのバージョンが埋め込まれる必要があります。

PDFパンフレットやマニュアルは別の文書なので、文書として翻訳し、翻訳したファイルをアップロードしてください。ページの各言語バージョンのリンクは、その言語の PDF を指す必要があります。多くのドキュメントを処理する場合、レイアウトを維持するドキュメント翻訳サービスにより、手動での書式設定が保存されます。

ConveyThis 画像、ビデオ、PDF の処理方法

ConveyThis を使用すると、メディアの周囲のテキストが自動的に処理されます。ページが翻訳されると、 alt, title そして placeholder 属性は表示されているテキストとともに翻訳されるため、すべての画像には追加の作業を行わずに各言語の説明が表示されます。

ローカルバージョンが必要なファイルの場合、メディア翻訳を1 回有効にしてから、言語ごとにファイルを交換します:

ConveyThis ダッシュボードで、を開きます 設定 → その他のオプションを表示します また、「一般」セクションで、画像、ビデオ、PDF などの必要なメディアオプションをオンにします。
でページを開きます ビジュアルエディターターゲット言語に切り替えて、置き換えたい画像（または PDF）のペンアイコンをクリックします。
ローカライズされたファイルの URL を、理想的には元のファイルと同じ次元で入力して保存します。

画像置換は通常 <img> タグと背景画像の場合は要素上にインラインで設定されます。ビデオの置き換えはセルフホストをカバーします <video> ソースと埋め込み YouTube プレーヤーを使用しているため、スペイン語ページではスペイン語カットを再生できます。スクリーンショット付きのステップバイステップガイドはヘルプセンターにあります: 画像やメディアを翻訳するそして翻訳版のメディアファイルを変更する.

各言語は hreflang タグを含む独自の URL 上に存在するため、翻訳された alt テキストとローカライズされたファイルが Google のその言語のインデックスとなります。すべてを見る ConveyThis 機能、またはビジュアルエディタがどのようにaにフィットするか翻訳レビューワークフロー.

簡単なメディア翻訳チェックリスト

すべての言語バージョンで翻訳された代替テキスト、タイトル属性、キャプション
ローカライズされた画像のローカライズされたファイル名
トラフィックの多いページから始めて、言語ごとに再作成されたテキストが多い画像、スクリーンショット、バナー
画像内の価格、単位、日付、電話番号はターゲット市場と一致しています
RTL バージョンは方向性が重要な場所をミラーリングしました
ビデオに字幕または置き換えられました； PDFは言語ごとに翻訳およびリンクされています
ローカライズされたアセットのレジスタにより、更新があらゆる言語に届きます

トーン、例、オファーなど、コンテンツを各市場に適応させる全体像については、ガイドをお読みくださいコンテンツのローカリゼーション戦略の構築.

よくある質問

Googleは画像内のテキストを読みますか？ ランキングに当てにしないでください。Google の画像ガイダンスは、代替テキスト、ファイル名、画像の近くに配置されたテキストに重点を置いているため、それらの場所とページの HTML に重要な単語を配置します。

装飾画像用に代替テキストを翻訳する必要がありますか？ 装飾画像は空であるべきです alt="" どの言語でも翻訳できるものは何もありません。意味のある画像には翻訳された説明が必要です。

機械翻訳は画像テキストを処理できますか？ 弦を翻訳することはできますが、それでも誰かが弦をデザインに戻してフィット感を確認する必要があります。ボタンや見出しなどの短く目に見える文字列を手で確認します。

次のステップ

ConveyThis アカウントを作成しますサイトを翻訳し、ビジュアルエディターを使用して、ローカルバージョンが必要な画像と PDF を交換します。比較する計画言語を追加すると。