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

Cloudinaryを使うとURLが長くなる？いいえ、SEOフレンドリーな対策がありますよ。

#Python

#デザイン

#Cloudinary

Ito ma

2019.09.20

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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のSEO対策

通常のCloudinaryの配信URLは、基本的に次のような構成になっています。

https://res.cloudinary.com/[クラウド名]/[リソースタイプ]/[タイプ]/[変換パラメータ]/[バージョン]/[パブリックID].[フォーマット]

◆ 参考：Cloudinaryの配信URL

この配信URLからさらにSEOフレンドリーにするために、Cloudinaryでは3つの機能があります。

ルートパスURL
動的SEOサフィックス - 今回はこちらを試しました
CNAME

ルートパスURL

通常のURLでは、リソースタイプ（image、raw、videoのいずれか）とタイプ（upload、private、authenticatedなど）を指定しますが、このうちCloudinary上でパブリックに配信できる画像に使用するimage/uploadがデフォルトの値となっています。

ルートパスURLの機能では、デフォルトの場合にこの部分をまるっと省略してURLを短縮させることができます。以下のように、パスは短くなっても、2つのURLで表示されるものは変わりません。

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

APIを使った場合、use_root_path を True に指定することでルートパスURLが得られます。以下はPythonを使った場合です。

>>> cloudinary.CloudinaryImage("ito-test/DSC04470").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/DSC04470" width="200"/>'

※ パブリックの画像のみ可能で、動画やプライベートのアセットの場合は省略することができません。

動的SEOサフィックス

今回行ったファイル名とは異なる名前をURLに含める動的SEOサフィックスを使うには、リソースタイプとリソースをそれぞれ次のように置き換え、元のファイル名（パブリックID）の後に / で付与したい名前を結合させます。

/image/upload ＝ /images
/video/upload ＝ /videos
/raw/upload ＝ /files
/image/private ＝ /private_images
/image/authenticated ＝ /authenticated_images

同じく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 が開催されます。）

CNAME

最後に、CloudinaryではCNAMEを設定することも可能です。res.cloudinary.com/CLOUD-NAMEの部分が独自のドメインに置き換わることになります。

前述のルートパスURLと、変換セットに名前をつけるNamed Transformationを組み合わせれば、URLをここまでシンプルに分かりやすくすることができます。

# 通常のURL
https://res.cloudinary.com/CLOUD-NAME/image/upload/c_fill,g_center,r_30,w_200/v1568222352/ito-test/DSC04470
# CNAME+ルートパスURL+Named Transformation
https://demo.example.com/t_icons/v1/ito-test/DSC04470