リソースURLハンドルが翻訳可能になりました

リソースURLハンドルが翻訳可能に

ShopifyのWebストアで、商品やコレクションなどのURLハンドルを翻訳・ローカライズすることは、多言語対応を検討している開発者にとって重要な課題でした。特に、各言語のユーザーに対して最適化されたURLを提供することで、SEO効果を上げることが期待されています。

技術的ソリューションの提案

Shopifyは、TranslationsRegister GraphQL APIを用いて、リソースハンドルの翻訳登録が可能になりました。これにより、例えば商品URLを英語話者向けにはexample.com/products/en-us/red-shoes、スペイン語話者向けにはexample.com/products/es-us/zapatos-rojosという具体的な形でローカライズすることが可能になります。

対応リソースタイプとAPIバージョン

この変更は、Products, Collections, Articles, Blogs, Pagesといったリソースタイプで利用可能で、全てのAPIバージョンでサポートされています。

実装手順とコード例

まず最初に、GraphQLのMutationを使用して翻訳を登録します。以下に具体的なコード例を示します。

mutation{
  translationsRegister(
    translations: [
      {
        key: "products.red-shoes"
        value: "zapatos-rojos"
        locale: "es-US"
      }
    ])
  {
    userErrors {
      field
      message
    }
  }
}

上記の例では、"products.red-shoes"というリソースキーのスペイン語翻訳を登録しています。これにより、スペイン語話者向けのURLはexample.com/products/es-us/zapatos-rojosとなります。

パフォーマンス・コスト分析

この機能の導入により、各言語のユーザーに適したURLを提供することでSEO効果が期待できます。また、GraphQL APIを活用することで、必要なデータのみを取得・更新することが可能となり、パフォーマンス面でも優れています。

実装時の注意点・ベストプラクティス

翻訳登録時には、リソースキーと翻訳先の値が正確であることを確認してください。また、翻訳が不要なリソースに対しては、無駄なAPIコールを避けるためにも翻訳登録を行わないようにしましょう。

次のステップ・発展案

今後は、この翻訳機能を活用して多言語対応のECサイトを構築することが可能となります。また、各言語ごとのURLパターンを分析することで、より詳細なユーザー行動分析やパーソナライゼーションの実現も期待できます。

参考記事: Resource url handles are now translatable