Googleフォトの画像をWebサイトに埋め込んで表示する方法

Googleフォトに保存している画像を、ブログやWebサイト上にそのまま表示したい場面があります。

たとえば、WordPressの記事内に写真を表示したい、固定ページにGoogleフォトの画像を入れたい、HTMLの中で画像として表示したい、といったケースです。

ただし、Googleフォトの共有リンクをそのまま貼り付けても、画像として表示されるわけではありません。

この記事では、Googleフォトの画像をWebページ上に「画像として表示する方法」と、実務上の注意点をわかりやすく解説します。

Googleフォトの共有リンクは画像URLではない

まず重要なのは、Googleフォトで作成できる共有リンクは、画像そのもののURLではないという点です。

Googleフォトで「リンクを作成」すると、次のようなURLが発行されます。

https://photos.app.goo.gl/xxxxxxxx

このURLは、画像ファイルそのものではなく、Googleフォトの閲覧ページへのリンクです。

そのため、次のように img タグへ入れても画像としては表示されません。

<img src="https://photos.app.goo.gl/xxxxxxxx">

これはよくある間違いです。

img タグで表示するには、画像ファイルに直接アクセスできるURLが必要です。

画像として表示できるURLの形

Googleフォトの画像をWeb上で表示する場合、画像アドレスとして使える可能性があるのは、次のようなURLです。

https://lh3.googleusercontent.com/xxxxxxxxxxxxxxxx

または、末尾にサイズ指定が付いた形式です。

https://lh3.googleusercontent.com/xxxxxxxxxxxxxxxx=w1200

この lh3.googleusercontent.com から始まるURLが、実際の画像表示に使われることがあります。

つまり、ポイントは次の通りです。

photos.app.goo.gl

これは共有ページのURLです。

lh3.googleusercontent.com

これは画像として表示できる可能性があるURLです。

Googleフォト画像をHTMLで表示する手順

Googleフォトの画像をWebページに表示したい場合は、以下の手順で画像アドレスを取得します。

手順1：Googleフォトで画像を開く

まず、Googleフォトを開き、Webサイトに表示したい画像を選択します。

手順2：共有リンクを作成する

画像を開いたら、共有ボタンを押して「リンクを作成」を選択します。

作成された共有リンクをコピーします。

手順3：共有リンクをブラウザで開く

コピーした共有リンクを、ブラウザの別タブで開きます。

画像が表示されたら、その画像をクリックして大きく表示します。

手順4：画像アドレスをコピーする

表示された画像の上で右クリックし、「画像アドレスをコピー」を選択します。

このとき取得できるURLが、lh3.googleusercontent.com から始まるURLであれば、HTMLの img タグで表示できる可能性があります。

HTMLで表示する基本コード

取得した画像URLを、次のように img タグへ入れます。

<img 
  src="https://lh3.googleusercontent.com/xxxxxxxxxxxxxxxx=w1200"
  alt="画像の説明"
  loading="lazy"
  style="width:100%; max-width:100%; height:auto; display:block;"
>

このコードを使うと、画像がページ幅に合わせて表示されます。

各項目の意味

src

画像URLを入れる場所です。

alt

画像の説明文です。SEOやアクセシビリティのために入れておく方が良いです。

loading="lazy"

画像の遅延読み込み設定です。ページ表示速度の改善に役立ちます。

style="width:100%; max-width:100%; height:auto;"

画像を横幅に合わせて表示し、縦横比を崩さないための指定です。

WordPressのカスタムHTMLで使う場合

WordPressの記事や固定ページで使う場合は、「カスタムHTML」ブロックを追加して、次のコードを貼り付けます。

<div class="google-photo-image">
  <img 
    src="https://lh3.googleusercontent.com/xxxxxxxxxxxxxxxx=w1200"
    alt="Googleフォト画像"
    loading="lazy"
  >
</div>

<style>
.google-photo-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
</style>

これで、Googleフォトの画像をWordPress上に画像として表示できます。

画像サイズを調整する方法

Googleフォトの画像URLには、末尾にサイズ指定を付けられる場合があります。

たとえば、横幅800pxで表示したい場合は次のようにします。

=w800

横幅1200pxで表示したい場合は次のようにします。

=w1200

横幅1600pxで表示したい場合は次のようにします。

=w1600

実際のコード例です。

<img 
  src="https://lh3.googleusercontent.com/xxxxxxxxxxxxxxxx=w1200"
  alt="Googleフォト画像"
  loading="lazy"
  style="width:100%; max-width:100%; height:auto; display:block;"
>

ページ内で大きく見せたい場合は w1200 や w1600、軽く表示したい場合は w800 程度が使いやすいです。

正方形にトリミングして表示する例

画像を正方形に近い形で表示したい場合は、URLの末尾に次のような指定を加える方法があります。

=w600-h600-c

コード例です。

<img 
  src="https://lh3.googleusercontent.com/xxxxxxxxxxxxxxxx=w600-h600-c"
  alt="トリミング画像"
  loading="lazy"
  style="width:100%; max-width:600px; height:auto; display:block;"
>

w600 は横幅、h600 は高さ、c はトリミング指定のような意味合いで使われます。

ただし、GoogleフォトのURL仕様は安定した公開画像ホスティング用ではないため、必ずしも長期的に同じ挙動になるとは限りません。

Googleフォトを画像ホスティングとして使う注意点

Googleフォトの画像URLを使えば、Webページ上に画像として表示できる場合があります。

ただし、Googleフォトは本来、Webサイト用の画像置き場ではありません。

そのため、次のようなリスクがあります。

突然画像が表示されなくなる可能性がある
URLが長く、管理しにくい
Google側の仕様変更で使えなくなる可能性がある
商用サイトや長期運用サイトには向かない
画像の表示速度やキャッシュ制御を細かく管理しにくい

一時的な確認用や、個人的なページで使う程度なら問題ない場合もあります。

しかし、会社サイト、LP、ブログ記事、SEOを意識したページでは、あまりおすすめできません。

長期運用ならWordPressメディアにアップロードする方が安全

Webサイトに安定して画像を表示したい場合は、Googleフォトから画像をダウンロードして、WordPressのメディアライブラリへアップロードする方法が一番安全です。

流れは次の通りです。

Googleフォトから画像をダウンロード
↓
画像サイズを圧縮
↓
WordPressのメディアにアップロード
↓
画像URLを取得
↓
記事や固定ページに表示

WordPressにアップロードした画像であれば、次のように安定して表示できます。

<img 
  src="https://example.com/wp-content/uploads/画像ファイル名.jpg"
  alt="画像の説明"
  loading="lazy"
  style="width:100%; max-width:100%; height:auto; display:block;"
>

この方法なら、画像URLの管理もしやすく、SEOや表示速度の面でも有利です。

Googleフォトを使う場合とWordPressメディアを使う場合の比較

方法	メリット	デメリット
Googleフォトの共有リンク	共有が簡単	画像として直接表示できない
Googleフォトの画像URL	HTMLで画像表示できる場合がある	長期安定性に不安がある
WordPressメディア	安定して表示できる	画像のアップロード作業が必要
Google Drive	共有管理しやすい	画像ホスティング用途には不向き

実務でおすすめの使い分け

一時的に画像を表示したい場合

Googleフォトの画像アドレスを取得して、img タグで表示してもよいです。

<img 
  src="https://lh3.googleusercontent.com/xxxxxxxxxxxxxxxx=w1200"
  alt="画像"
  loading="lazy"
  style="width:100%; max-width:100%; height:auto; display:block;"
>

ブログ記事で使う場合

Googleフォトから画像をダウンロードし、WordPressメディアにアップロードする方法がおすすめです。

会社サイトやLPで使う場合

Googleフォトの直リンクは避けた方が安全です。

WordPressメディア、サーバー内画像、CDNなど、Web公開に適した場所へ画像を置くべきです。

アルバムとして見せたい場合

Googleフォトの共有リンクをボタンとして掲載する方法が簡単です。

<a href="https://photos.app.goo.gl/xxxxxxxx" target="_blank" rel="noopener noreferrer">
  写真一覧を見る
</a>

ただし、この方法は画像をページ内に直接表示するのではなく、Googleフォトのページへ移動する形です。

まとめ

Googleフォトの画像をWebページ上に画像として表示したい場合、photos.app.goo.gl の共有リンクをそのまま img タグに入れても表示できません。

画像として表示するには、lh3.googleusercontent.com から始まる画像アドレスを取得し、それを img タグの src に入れる必要があります。

ただし、GoogleフォトはWebサイト用の画像ホスティングサービスではありません。

一時的な表示には使える場合がありますが、長期的に安定して表示したい場合は、Googleフォトから画像をダウンロードして、WordPressのメディアライブラリやサーバーにアップロードする方法が安全です。

実務では、次のように考えるとわかりやすいです。

一時的な表示
→ Googleフォトの画像URLでも可

ブログやLPで長く使う画像
→ WordPressメディアへアップロード

アルバムとして見せたいだけ
→ Googleフォトの共有リンクを掲載

Googleフォトは写真の管理や共有には便利ですが、Webサイトに画像として安定表示する用途では注意が必要です。画像を確実に表示したい場合は、Web公開に適した場所へ画像を置くことをおすすめします。