この記事では、エンティティの写真を追加、回転、トリミング、配置、削除する方法について説明します。特定のパブリッシャー向けの写真のサイズや形式に関する推奨事項については、パブリッシャー向け写真・動画ガイドラインをご覧ください。
- ナビゲーションバーにある[Knowledge Graph]をクリックし、[エンティティ(Entities)]をクリックします。
- 編集するエンティティをクリックします。
- 左サイドバー内の[メディア(Media)]をクリックします。
-
[企業ロゴ(Business Logo)]または[写真ギャラリー(Photo Gallery)]フィールドの隣の鉛筆アイコンをクリックし、希望する変更を行います。
- 企業ロゴがすでに追加されている場合は、新しいロゴを追加する前に既存の画像を削除する必要があります。
写真を追加
新しい写真を追加する際には、新しい画像をアップロード(画像ファイルまたは画像URL経由)するか、アセットライブラリから選択できます。
- 編集中のフィールドで[写真を選択(Select Photo)]をクリックし、モーダル内のオプションから選択します。
- 画像ファイルをボックスに直接ドラッグ・アンド・ドロップします。
- [写真をアップロード(Upload Photos)]をクリックして、画像ファイルを選択します。
- [URLを入力(Enter URLs)]をクリックして画像のURLを入力します。
- [アセットを選択(Select Assets)]をクリックしてYextの既存の写真ギャラリーから1つ選択します。詳細については写真ギャラリーを参照してください。
-
希望する説明、キャプション、代替テキスト、クリックスルーURLを追加します。
- 説明:タイトルまたは簡単な説明。注:このフィールドに文字数制限はありませんが、パブリッシャーは通常、写真の説明として100文字以下の説明を受け入れています。
- 詳細:説明以外の追加情報。
- 代替テキスト:画像に含まれる内容の説明。代替テキストは、視覚障害のあるユーザーのためにスクリーンリーダーによって読み上げられます。また、読み込みに失敗した場合に画像の代わりとして表示できます。
- クリックスルーURL:画像にハイパーリンクを設定します。
写真を編集、並べ替え、削除
写真の回転、トリミング、アスペクト比を適用するには、写真にカーソルを合わせて[編集(Edit)]をクリックします。必要な調整を行ったら、[完了(Done)]をクリックします。
写真を削除するには、写真の右側にあるゴミ箱アイコン()をクリックします。
写真ギャラリーフィールドで写真の順序を変更するには、目的の写真の左側にある3本の線()をクリックしてドラッグ・アンド・ドロップします。パブリッシャーによっては写真の順番が反映されない場合もありますのでご注意ください。
Yext Knowledge Graph写真ガイドライン
以下は、Knowledge Graph内のエンティティに登録され、パブリッシャーサイトのリスティングに同期される写真および動画のサイズと形式に関するガイドラインです。
Knowledge Graphのビジネスロゴフィールドおよびフォトギャラリーフィールドでの写真の保存に関する具体的なガイドラインと、Apple、Facebook、Googleの写真フィールドに関する仕様があります。Googleには、Google Video Galleryフィールドに関する仕様もあります。
デフォルトでは、Knowledge Graphのビジネスロゴフィールドとフォトギャラリーフィールドが、写真をリスティングに同期する対象になります。
推奨ファイル形式
- JPG
- JPEG
- PNG
ビジネスロゴフィールド
- 最大ファイルサイズ:5MB
- 最大サイズ:400px × 400px
フォトギャラリーフィールド
- 最大ファイルサイズ:5MB
- 最小サイズ:180px × 180px
- Yextでは最小サイズの写真も受け付けますが、多くのパブリッシャーでは250px × 250px以上の写真の使用が推奨されています。
- 最大サイズ:30,000px x 30,000px
- Yextでは最大サイズの写真も受け付けますが、多くのパブリッシャーでは5,000px × 5,000px以下の写真の使用が推奨されています。
- 写真数の上限:500
- 各エンティティに許可される写真の最大数は500ですが、写真の制限はパブリッシャーによって異なります。
画像の保存と配信
Knowledge Graphは、デジタルエクスペリエンス全体で画像を柔軟に配信できるよう、さまざまな画像保存機能をサポートしています。
写真をエンティティにアップロードすると、その後の利用方法(つまり、Search、Listings、Pagesなど、エンティティ上のその画像を参照するあらゆるソースでの表示方法)を指定する方法が複数用意されています。
画像の保存
写真は、写真フィールドまたはファイルフィールドタイプのフィールドに保存できます。
| ファイルフィールドタイプ | 写真フィールドタイプ | |
|---|---|---|
| 高さ、幅、およびアスペクト比の検証 | いいえ | はい |
| ファイルサイズの検証 | はい | いいえ |
| 動的リンク(dynl、dynm)の使用 | はい | はい |
| 動的な画像変換およびサイズ変更 | はい | はい |
画像フィールドの動作
特定の組み込み画像フィールドには、固有の動作があります。
| フィールド | 詳細 |
|---|---|
| ロゴ | ロゴフィールドにアップロードされた写真は、1:1のアスペクト比に収まるよう自動的に余白が追加されます。これはEUソースリージョンには適用されません。EUユーザーは、アップロード前に写真を1:1のアスペクト比に調整する必要があります。詳細については、「EUソースリージョンでサポートされていない機能」を参照してください。 |
| レガシーリッチテキスト(v1)フィールド | レガシーリッチテキストフィールド内の外部画像は、エンティティの編集では表示されません(CSP準拠のため)。ただし、画像はSearchおよびPagesでは引き続き表示されるため、下流での利用には影響しません。写真は、すべてのリッチテキスト(v2)フィールドのエンティティの編集で通常どおり表示されます。詳細については、「リッチテキスト(v2)およびマークダウンフィールドタイプ」のリファレンスをご覧ください。 |
画像の配信
下流での利用(Search、Pages、Listingsなど)で画像を参照する場合は、ホスティング元のURLをYextの画像配信用URLに変更する必要があります。たとえば、a.mktgcdn.comはdyn.mktgcdn.com、dynl.mktgcdn.com、またはdynm.mktgcdn.comに変更する必要があります。
Yextの提供URLを使用することで、画像のサイズと変換を指定できます。
ファイルタイプのガイドライン
| 形式 | 最適な用途 |
|---|---|
| JPEG | 写真や、多様な色を含む画像 |
| PNG | 限られたカラーパレットのクリップアートやベクターアート |
| WEBP | どちらの用途にも適しており、同じ画質で画像をより小さいファイルサイズに圧縮できます。この形式は、Webページでの配信に推奨されています。ただし、すべてのアプリケーションがこの形式を読み取れるわけではありません。 |
動的画像変換
Yextで使用される写真はCloudflareでホストされ、配信されます。Cloudflareは、配信URLのパスパラメータを使ってさまざまな画像変換をサポートしています。オプションの全リストは Cloudflareのドキュメント をご覧ください。
注:動的画像変換は、100メガピクセル未満の写真(写真フィールドおよびファイルフィールドタイプ)のみで利用できます。現在、GIFの配信はサポートされていません。そのため、
animなどのCloudflare変換オプションは機能しません。変換の対象となるのは、Cloudflareがサポートする画像形式のみです。
ファイルフィールドタイプのURLを変換する場合は、a.mktgcdn.com/f/{businessID}をdyn.mktgcdn.com/p/に変更する必要があります。
写真フィールドタイプのURLを変換する場合は、配信元URLのa.mktgcdn.comをdyn.mktgcdn.comに変更し、URLの末尾にある画像サイズおよび拡張子を削除する必要があります。
配信用画像URLは、次の形式になります:https://dyn.mktgcdn.com/p/{image_UIUD}/{options}
例:写真にぼかし、1000×1000の切り抜き、および90度回転を適用する場合
手順は次のとおりです。
- ホストされているURLを取得します:
https://a.mktgcdn.com/p/weDfOuuWD5IybzlazwEUUps4-NxElRV2E2O0_zOXE6U/1701x1295.jpg - ベースURLを
dyn.mktgcdn.comに変更してください:https://dyn.mktgcdn.com/p/weDfOuuWD5IybzlazwEUUps4-NxElRV2E2O0_zOXE6U/ - 変換を追加してください:
https://dyn.mktgcdn.com/p/weDfOuuWD5IybzlazwEUUps4-NxElRV2E2O0_zOXE6U/blur=20,height=1000,width=1000,fit=crop,rotate=90
Yextは現在GIFの配信をサポートしていないため、animなどのCloudflareの変換オプションを使用しても機能しないことにご注意ください。
Reactフロントエンドでの配信画像の使用
Imageコンポーネントを使用して、Knowledge Graphの写真を下流のエクスペリエンスで配信します。
生成済みサムネイル(レガシー)
Cloudflareの動的変換オプションを活用する以前は、Yextはアップロードされた画像ごとに、さまざまなサイズのサムネイルを事前生成していました。
現在も、写真がアップロードされるとYextはこれらのサムネイルを生成しますが、配信画像をより細かく制御するために、dyn.mktgcdn.comベースのURLとCloudflareのリサイズ機能を利用することを推奨しています。ページ表示速度を最適化し、すべてのデバイスで画像が正しく表示されるようにするため、複数のサイズのサムネイルを生成し、すべてのデバイスで利用可能な形式に画像形式を正規化しています。
サイトでのサムネイルの使用
サムネイルは、元の写真のサイズを基に生成されます。また、以下の固定サイズの枠内に収まるよう拡大・縮小されたサムネイルも生成されます。
- 1900x1900
- 619x1000
- 600x450
- 196x400
写真が拡大されることはなく、アスペクト比が変更されることもありません。
サムネイルには、次の形式のURLを使用してアクセスできます。
FIT.mktgcdn.com/p/UUID/WIDTHxHEIGHT
動的画像配信と同様に、写真の保存にファイルフィールドを使用していて、その写真を配信する場合は、ベースURLをa.mktgcdn.com/f/{businessID}/UIUDからFIT.mktgcdn.com/p/UIUD/WIDTHxHEIGHTに変更する必要があります。
FITでは、サムネイルセットの中から動的に選択するための2つのモードのいずれかを指定できます。
-
dynl.mktgcdn.com— 指定された寸法のうち、少なくとも一方を満たすサイズ -
dynm.mktgcdn.com— 指定された寸法を超えないサイズ
この動的URLは、指定されたFITモードと寸法に最も適したサムネイルを返します。