パッと読むための見出し
2019年9月4日追記
※スマホの種類によって、Googleドライブから引っ張ってきた画像表示ができないことが分かりました。
解決策が見つかるまで、この方法は取り入れないでください。
Googleドライブに画像ファイルを置いて、ワードプレスの記事に埋め込む方法。
?共有リンクURLを一部変える
?WPメディアにURLで追加▼メリット：
・記事表示速度が上がる
・サーバーのデータ容量を圧迫しないのでアクセスが増えた時もダウンしづらい
・自分のPCにも画像を何枚も保存しなくて済む pic.twitter.com/qbr5s1WCR6? みやえら@『SEO作業会』運営 (@hebrakaela) July 30, 2018
「外部サーバーに画像データを置いて、サイトを軽くして表示速度をアップさせたい！」
「長年ブログを運用していて、写真もいっぱい貼っててそろそろ重くなってきたから外部から画像URLだけ引っ張ってくる形にしたい！」
と私自身が考えていて、１日かけてワケ分からんプラグイン（「Google Drive Embedder」「Google Drive WP Media」「Google Apps Login」）の使い方調べたりとかインストールしてAPI開設したり認証キー作ったり英語のYouTube動画見たり奮闘してたのですが。
- プラグイン不要
- Googleフォト不要
- 今使っているGoogleドライブに保存してるファイルそのまま使える
方法を見つけたのでシェアします。
Googleドライブの共有リンクのURLを一部だけ変える！
↑↑ココの共有リンクをコピーすると、
https://drive.google.com/open?id=◎◎
となっているはずです。
この「◎◎」の部分が、Googleドライブに保管したファイル１個１個に割り当てられた「ID」と呼ばれるものです。
そのIDを、
https://drive.google.com/uc?export=view&id=
の最後にくっつけると、WordPressのMedia Libraryに画像データを取り込むことができます。
その後の流れ↓↓
↑↑上にある画像、すべてGoogleドライブから引っ張ってます。
慣れたらテキストエディタにコピペの方が早いかも・・・
何度かこの作業をやってみてますが、↑↑の「?で作ったURLをコピペする」というプロセスが１番
ダルい手間がかかって効率を下げる要因だなと感じました。
一手間かかるというだけでなく、コピペしてから数秒間待ってプレビュー画面を生成してから「投稿に挿入」ボタンを押さないと画像が反映されないという小さなイライラもあるんですね。
そこで「テキストエディタ」を見てみて、今まで埋め込んでいたGoogleドライブの画像の部分のHTMLコードを調べました。
結果的に、
<img class=”aligncenter size-full” src=”https://drive.google.com/uc?export=view&id=◎◎”>
この表記をテキストエディタの該当箇所にコピペして、「◎◎」の部分だけ共有リンクのIDに差し替えれば良いことが分かりました。
ちなみに上記は中央揃えにするという設定だけ加えています。
画像のサイズは別にテキストエディタを使わずとも、ビジュアルエディタで再び画像をクリックして直接サイズ調整すればOKです。
ちなみに、私はGoogleドライブの有料課金プラン（月額1300円くらい）を何年も使っています。
- Googleスプレッドシート（エクセルっぽい奴）
- Googleドキュメント（ワードっぽい奴）
- Googleスライド（パワポっぽい奴）
- Googleフォーム（アンケートフォーム）
のデータも一括で管理できてるので、これらをよく使うって方はお得じゃないかな？と思います。
どれもクラウドサービスなので、自動バックアップがあり保存し忘れが起こらないですし、データが重くても共有リンク１つで誰かとシェアできるし、突然PCが壊れてもOK（別のPC、スマホからいつでもログインして編集・管理・共有できる）なのでメッチャ便利なんですよね。
また、動画データもドロップボックス上よりGoogleドライブ上の方がサクサク再生できます。
トコトン無料が良いという方は？
Googleドライブは無料プランで15GBまで開放してくれます。（有料プランは１TB?）
が、どうしても課金に抵抗が有るって方は、GmailアカウントごとにGoogleドライブのアカウントを作って、それぞれに画像データをアップロードして、自分のワードプレスブログに埋め込む形が良いと思います。
１つの携帯電話番号につき、年間２個までGmailアカウントを作成できるので、そのやり方で行くと30GBまでは無料でサクッと画像を含めた各種ファイルを保存できますね！
もしかしたらその内使えなくなる無料プランの裏ワザかも知れませんが、ご参考までに。
Googleドライブから取り込んだ画像をアイキャッチとして利用するプラグイン
外部画像をアイキャッチ画像として利用するには、「Featured Image From URL」というプラグインをインストール⇒有効化してください。
そしたら、
「Auto Set Featured Image: configuration」
という欄にある
「use the first image as featured image」をONに設定してください。
特に保存ボタンなどはないので、OFF⇒ONにするだけで大丈夫です。
もちろんWP側から別途、内部にある画像をアイキャッチにしても良いです。好みですね。
有難い先人たちの教え抜粋
こういうのって、Googleが仕様変更するだけで画像が表示されなくなっちゃうし、そうなるとどのページにどの画像を使ってたか分からなくなって詰むので、保守性を考えると良いサーバーに引っ越してWordpressで一括管理するほうがよい（経験談） https://t.co/JoqBnjE6My
? とんまあ@アフィカス (@tonnmaa) July 30, 2018
＜保守性という点で付け加え＞
Wordpress内で管理しないと、
・Wordpress標準機能の「利用していない画像」検索
・テーマにあるアイキャッチ自動設定
など画像系機能が使えなくなる（機能もある）はず。? はとぽっぽ (@junsvest) July 30, 2018
※アイキャッチの自動設定は先ほどのプラグインで対応できますが、他に使えなくなる機能があるかは私も実装したばかりで分かりません。
あと、Googleの許容転送量が分からんので、もしかしたら気づかない内に、一部の画像が表示されなくなってるやもしれぬ･･
? とんまあ@アフィカス (@tonnmaa) July 30, 2018
僕の場合はDropboxから画像を引っ張ってきてたんだけど、ある日突然URLの仕様を変更してきたせいで、ブログに貼ってた画像が全滅した
どこにどの画像貼ってたか分からん上に、全ページの画像を貼り直すというクソみたいな作業をしなくてはいけなくて、「もう二度とやらねえ」って思た
? とんまあ@アフィカス (@tonnmaa) 2018年7月30日
残念ながら高速化されません。逆に遅延要因になります。 https://t.co/sbRloipgcR
? 竹洞 陽一郎 (@takehora) July 30, 2018
それぞれ、大阪NTT、東京NTT、東京KDDIからの計測結果。 pic.twitter.com/Czsefikg1g
? 竹洞 陽一郎 (@takehora) July 30, 2018
遅延の原因は、レスポンスが海外のサーバから返ってきているからです。
Googleは、全世界にサーバがあるため、必ず日本のサーバがレスポンスを返すわけではないのです。GTMも同様です。
添付の画像は、計測結果から判明した画像を配信しているGoogleのIPアドレスにTracerouteをかけた結果です。 pic.twitter.com/qDvmDBxlLG? 竹洞 陽一郎 (@takehora) July 30, 2018
つまり
日本のユーザー ⇔ 日本のサーバー ＝ 近い
日本のユーザー ⇔ 海外のサーバー ＝ 遠い
よって、海外のサーバーを経由するGoogleドライブは、遠いため反応も遅い。
Googleドライブからワードプレスに画像を取り込むメリットにサイト高速化は有り得ませんでした！
サイトの容量そのものを減らすことだけがメリットです。
※とんまあさんのツイートを見て、１個だけ対策を思いつきました。
Googleドライブにアップロードする画像のファイル名の末尾に、埋め込む記事のパーマリンクの数字を付けるという手法です。
このようにすれば、万が一Googleドライブ側のURLの仕様が改変されて、今まで埋め込んできたブログ記事内の画像がすべて消えてしまったとしても、
「この画像はあの記事用の奴か！」
と１個１個すぐにファイル名から判別できます。
１度埋め込んだ後からGoogleドライブ側でファイル名を変更しても、取り込む際のURLは変わらないため、ブログに影響は出ません。
ただし、これはワードプレスのパーマリンクの設定で、末尾に数字が出るようにしている人にしか使えない対策になります。
同じ画像を複数の記事で使う場合はどうするか？
「◎◎-4710-1124」
のように、画像を使った記事のパーマリンクの数字の部分をファイル名に継ぎ足していく形が良いかなと。
記事の中で複数の画像を使っている場合、順番や貼っていた箇所は分からなくなるのでは？
貼っていた箇所は、Googleドライブ側の仕様でURLが変わってしまったら空欄の非表示状態になって目立っているはずなので見つけやすいと思います。
ただし、まさに今ご覧頂いている当記事のように、複数の画像を埋め込んでいる場合、どの画像がどの順番かは記事の文脈を毎度読み取らないと復旧作業を進められません。
それはネックですね、時間がかかります。
ただ、それらのデメリットを差し引いても、
- 画像を気軽に外部サーバーに置けること
- しかもGoogleという世界有数で信頼性の高いサーバーであること
サイト全体がフワッと軽くなることおかげで記事の表示速度がバツグンに上がることネット回線が重い地域の人や、回線の混みがちな都会の格安SIM利用者にも見てもらいやすくなることおかげで直帰率＆離脱率が下がり、SEOにプラスの評価が加わること- 万が一アクセスが爆発した際に、503エラーなど転送量爆発でサーバーダウン、サイト真っ白状態になってしまってアクセスはもちろん本来なら増加するはずだった収益の取りこぼしも防ぎやすくなること（テキストデータだけなら転送量はほとんど上がらないため）
これらのメリットを考えると、個人的には当記事でご紹介した手法に切り替えたいと考えました。
先ほど竹洞さんのご指摘にもあったように、高速化はおろか通常よりも遅いサイトになってしまうので、やはり外部サーバーを１個借りるより他に無さそうです。
すでにGoogleドライブには課金して常にバックアップ体制をとっているので、外部サーバーを専用に借りるよりもむしろ低コストですし。
あるいは、
がんちゃん氏の記事を参考に、画像の定期的な圧縮をしても良いと思います。
サイトの高速化は嫌という程やってきましたがこれで十分です。
ページが遅くなる一番の要因は画像ですので、アクセストップ5くらいの画像をモバイル向けにリサイズしてTinyPNGで圧縮するだけでかなりの効果があります。
特にページ後半は読まれる確率が低いのでリサイズ推奨https://t.co/Rbt349NnNs? がんちゃん@滲み出るおっぱい欲 (@wordpress_aff) 2018年7月3日
15分で出来る！WordPress高速化。表示速度改善でコンバージョンを上げる方法
あなたの参考になれば幸いです。
多少手の込んだ図解付きのツイート⇒ツイートだけでも最低限わかるようにして、補足を交えたブログ記事をそのツイートに自分でリプ。
⇒経験者から反響がある（主に自分の詰めの甘さが露呈）
⇒一旦埋め込む
⇒それを基に再考、解決策をブログ記事に追記していく自然と良い記事に。#今日のわかった
? みやえら@『SEO作業会』運営 (@hebrakaela) July 30, 2018
コメントを残す