Cloudinaryで画像にSEOフレンドリーなURLを付ける

Guten Tag、伊藤です。

先日翻訳記事として書いた下記のブログで紹介されている「その8:SEOフレンドリーなURLを使って画像検索エンジンに対応する」をやってみたらとっても簡単だったのでご紹介します。

Cloudinaryを使いこなすための10のポイント

なぜ画像URLがSEOに関係あるのか?

上記の記事でも触れられていますが、SEO対策として分かりやすい画像ファイル名も重要です。

検索エンジンに知らせるため、画像のファイル名にその画像に関連する名前を、特に前半にコアなオブジェクトを含めることが大事だそうです。

Choose the right file name

Image SEO starts with the file name. You want Google to know what the image is about without even looking at it, so use your focus keyphrase in the image file name. It’s simple: if your image shows a sunrise in Paris over Notre Dame Cathedral, the file name shouldn’t be DSC4536.jpg, but notre-dame-paris-sunrise.jpg. The main keyphrase would be Notre Dame, as that is the main subject of the photo, which is why it’s at the beginning of the file name.

Image SEO: Optimizing images for search engines - Yoast より

これは、調べてみると他の様々なサイトでもSEO対策の一環として挙げられていました。

関連する画像を多く使用する記事を扱うようなオンラインマガジンやニュースサイトでは、検索エンジンに引っかかりやすい画像を扱うことは特に大事でしょう。

まずはやってみた

変換パラメータを適用したの写真があります。

  • https://res.cloudinary.com/CLOUD-NAME/image/upload/c_fill,g_center,r_30,w_200/v1/ito-test/DSC04596

カメラで撮影したそのままのファイルをCloudinaryにアップロードしたので、ファイル名は意味のない文字列で、この画像URLからは何の写真か分かりません。

元のアセットは変更せずに、分かりやすい画像URLを用意してみました。

  • 英語
    • https://res.cloudinary.com/CLOUD-NAME/images/c_fill,g_center,r_30,w_200/v1/ito-test/DSC04596/cat-in-florence
  • ドイツ語
    • https://res.cloudinary.com/CLOUD-NAME/images/c_fill,g_center,r_30,w_200/v1/ito-test/DSC04596/Katze-in-Florenz

これらのURLを使って表示させてみると、以下の通りいずれも同じように表示されます。

英語、ドイツ語の文章内で同じ画像を使いつつ、画像URLのパスではそれぞれに適した分かりやすい名前を含めることができました。

解説

ここで使われているCloudinaryの機能とやり方について説明します。

ルートパスURL

通常のCloudinaryのパスでは、ドメインの後、変換パラメータやフォルダ階層の前に、 /image/upload/raw/upload/video/upload のようなパスが含まれます。

  • https://res.cloudinary.com/CLOUD-NAME/image/upload/c_fill,g_center,r_30,w_200/v1568222352/ito-test/demo/DSC04470.jpg

このルートパスURLの機能では、これをまるっと削除してURLを短縮することができます。パスは異なりますが、上のURLと表示されるものは変わりません。

  • https://res.cloudinary.com/CLOUD-NAME/c_fill,g_center,r_30,w_200/v1568222352/ito-test/demo/DSC04470.jpg

Pythonを使った場合、下記のように use_root_pathTrue に指定することでルートパスURLが得られます。

>>> cloudinary.CloudinaryImage("ito-test/demo/DSC04470.jpg").image(width=200, crop="fill", gravity="center", radius="30", use_root_path=True, secure=True)
u'<img src="https://res.cloudinary.com/CLOUD-NAME/c_fill,g_center,r_30,w_200/v1/ito-test/demo/DSC04470.jpg" width="200"/>'

動的SEOサフィックス

そして今回行った動的SEOサフィックスを使う場合には、通常のパスに含まれる /image/upload/video/upload の部分を imagesvideos に書き換え、元のファイル名(パブリックID)の後に / で付与したい名前を結合させます。

同じくPythonを使い、先ほどの猫の例では次のように英語とドイツ語サフィックスのURLを出力させました。

>>> cloudinary.CloudinaryImage("ito-test/DSC04596").image(width=200, crop="fill", gravity="center", radius="30",secure=True, url_suffix="cat-in-florence")
u'<img src="https://res.cloudinary.com/CLOUD-NAME/images/c_fill,g_center,r_30,w_200/v1/ito-test/DSC04596/cat-in-florence" width="200"/>'
>>> 
>>> cloudinary.CloudinaryImage("ito-test/DSC04596").image(width=200, crop="fill", gravity="center", radius="30",secure=True, url_suffix="Katze-in-Florenz")
u'<img src="https://res.cloudinary.com/CLOUD-NAME/images/c_fill,g_center,r_30,w_200/v1/ito-test/DSC04596/Katze-in-Florenz" width="200"/>'

かくして動的サフィックスを付与できるわけです。

他にも次のように、同じアセットに異なる変換を適用させるなどし、ページの別の部分や別ページに載せる場合にも、各所に適した画像URLを付与することができます。この例では、1つ目はイベントである cherry-blossom-festival-berlin-2000 、2つ目は撮影場所である tv-asahi-kirschenbluetenallee が画像URLのパスに含まれています。

※このイベント記述は架空のものですが、例年この辺りでは実際に Hanami festival が開催されます。

おしまい

いかがでしたでしょうか? Cloudinary ドキュメントブログ では、さらにもう一つのSEO対策として、Cloudinaryのデフォルトの res.cloudinary.com の部分をカスタムドメインにする方法も紹介されています。


クラスメソッドはCloudinaryのパートナーとして導入のお手伝いをさせていただいています。お気軽にこちらからお問い合わせください。こちらから無料でもサインアップいただけます。