はい、改めましておはようございます。今日のオンラインワークショップ、画像のSEO対策、ワードプレイスでできることという内容で始めていこうと思います。で、初めての方も参加されてますけど、私、ベントいます。こんな顔してますけど、30年以上日本に住んでますので、中身はほとんど日本人だと思ってます。ワードプレイス自体は2014年から使っていて、今年5月にワードプレイス20周年なんですけど、大体その半分くらいを見てきたという感じです。人がなるほどと理解する瞬間が好きですので、毎回言ってるんですけど、私のオンラインワークショップも初めて聞いたとか、なるほどという瞬間があれば、ぜひぜひそれをチャットに入れていただいたり、ズームのグッドマークエモジレを反応していただいてもいいので、私もそれをエネルギーにして進めていきたいと思います。で、このオンラインワークショップというものなんですけれども、これはワードプレイスプロジェクトが公式に行っている学びの場というものになっています。ワードプレイスにトレーニングチームという教育教材を作っているチームがありまして、そこが主催しているものになります。コンセプトはともに学ぶ場ということなので、私が全部答えを知っているわけでもないですし、ぜひ皆さんお互いに質問し合ったり答えあったり、ズームのチャットでもいいですし、音声ビデオを使って質問してもOKなので、ぜひともに学ぶ一時間になったらいいなと思います。で、オンラインワークショップは録画されて、5日ワードプレイス.tvというサイトにアップされますので、参加できなかった人、途中で対してしなきゃいけなかった人も、後から見れるようになっています。そして最後、オンラインワークショップはワードプレイスが好きで、コミュニティに貢献したいという人は、誰でも開催することができます。トレーニングチーム、一応私トレーニングチームの代表のものなので、私に連絡を下さればどうやってオンラインワークショップが開催できるか教えしますので、ぜひご連絡ください。では、今日の内容に関する質問です。画像のSEO対策にどれくらい詳しいですかと、いつも参加者の皆さんの知識とかそういうのを知りたいなと思って尋ねているんですけど、この画像のSEO対策1から10。1はそもそも聞いたことありません。何のことかわかりませんという方は一応。10は、私は画像SEOのプロデストの仕事でやったりしてますという10。その10段階、ぜひズームのチャットの方に自分が何番くらいかを入れていただきたいなと思います。石原さん2番。聞いたことはあるけど、正直詳しいことあんまりわからないという感じでしょうかね。デニーさんも2。松野さんは4。石原さん3。アルトタク、WebP使う。いいですね。どちらも今日出てくる話題になります。いつも私スライドを共有していたので、リンクを皆さんに送ります。画面に表示しているものと全く一緒なんですけど、それぞれダウンロードをして、後からもう一回見直すとか、正直他の方と共有していただいても全然問題はないので、こういうことを勉強したようというのを記録、拡散していただけたらなと思います。はい、今、ズームのチャットの方に送りましたので、wordpress.tvの録画ページにも後からスライドを乗ります。さて、画像のS用対策。一般的にブログとかサイトガンドを見つかるか、ざっくり私なりにまとめたところ、検索結果を通してタイトにやってくる場合と、それ以外っていう2つに大きく分けられると思います。すごくざっくりなんですけど、それ以外というものも、去年英語のワークショップで、今までブレインストーミンをしたところ、20個の方法ぐらい、皆さん思いつきました。検索結果以外にもサイトに到達する方法。なんですけど、今日は検索結果の方にちょっと商店を当てて、この緑の矢印、ざっくり検索結果といっても、踏み込んでいくと実は、もっと分けられるんですね。一般的な検索結果というのは、グーグルとかビングに文字を入力して、それに合うサイトが出てくるという検索結果なんですけど、最近の検索エンジンは、もう少しいろんなバラエティの検索ができます。例えば、画像ピンポイントで検索する、動画を検索する、地図で検索をする。その他、ローカルな検索結果。よくスマホとかで今、ブラウザを開くと、一情報を利用しますかという選択肢が出て、ハイトースと自分の検索にGPS情報を合わせて、ローカルな検索結果を出してくれる。そういうことがあります。あとは、例えばショッピングの検索結果ですね。商品だけを探していると。SEOは検索エンジン最適化の英語のかしら文字なんですけど、一般的な検索結果に関するSEOがわりとよく話されますが、SEOの業界では画像SEO、動画SEO、地図SEO、ローカルSEO、ショッピングSEOっていうふうにそれぞれの検索結果に対してなるべく上位に乗るためにはどうしたらいいのかというようなそういう話があるんですね。なので、今日はその中でも画像のSEO、画像の検索結果で上位に出るためにはどうしたらいいかという話をしていきます。ちょっとGoogle出してみましょうか。google.jpでしたけど。ここで例えば彫刻機を探すと今これ普通の検索結果になってます。普通の検索結果でここに例えばイメージ、ショッピング、ビデオ、ブックとかもともとここにも出てくるんですけれども例えばイメージ、検索をすると彫刻機の画像がたくさん出てきます。今日お話するのはこの画像の検索をかけた時に自分のサイトの画像がなるべく上位に来るためにはどんなことができるかというそういうお話になります。今日の内容を大まかにまとめるとまず画像、エース用対策としてまずいい画像の選び方それからアップロード前に画像にほどこす処理。アップロード後に画像にほどこす処理そして最後をようやく画像をコンテンツに追加するという流れになってます。今日はワードプレスに特化したセッションなので一般的なエース用の話もしますけど中には本当にワードプレスピンポイントでこういうことを知っておくといいよというお話をします。はい。とりあえずここまでの中で質問とか訪ねておきたいことなかったでしょうか。大丈夫でしょうですかね。はい、ありがとうございます。大丈夫です。はい、ありがとうございます。では、みなさん内容に入っていきましょう。まず画像、エース用で一番大事なのはとりあえずいい画像を選ぶことです。で画像は必ず加えましょう。サイトを作るときに文字だけのサイトは避けて必ず何かしら画像は入れるようにしましょう。これは色んな意味からメリットがあるんですけどまず画像のある方が人の目を引く効果があります。例えばこのスライドも私が見せてたら面白くないスライドなんですね。文字だけで面白くないんですけど一個だけポンと画像を載せただけでなんかすごく目がきかれるというかちょっと魅力的なスライドに変わると思います。私はそれを狙って画像をつけたんですけどサイトも一緒です。文字だけバーと並んでいるように画像があると人の目を引くとで画像はコンテンツの理解を助ける。補足資料みたいな感じで内容にあった画像をつけるとコンテンツの理解を助ける。3つ目なんですけど使った画像がコンテンツそのものよりも話題を呼ぶこともある。これは特に自分のその情報を拡散したい時とか広く知ってほしい時にポイントなんですけど私はアメリカ人じゃないのでそんなに詳しいわけじゃないんですけど時々アメリカの政治家が例えばツイッターでこんなことを流したとかどっかの使用がこんなことを言ったっていうのをキャプチャーにしてどんどん拡散するとかそういうことって結構SNS上であるんですねもはや説明とか何もつけずに写真1枚だけをどんどんどんどん広げていってお話題が広がるっていうようなことがネット上の世界ではあり得ますなのでもし皆さんもバズるコンテンツを作りたければ画像は必ず加えて画像から自分のコンテンツにやってくる人もいる可能性があるのでつけていきましょうで画像をつける時可能な限りオリジナルの画像を使うといいですこれはまたいくつか理由があるんですけど本当に本物に見えます私が今回使っている画像は全部フリーサイトから持ってきたものなのであまり私らしくはないですよねなんかどこかから持ってきた画像なんだろうなという雰囲気が漂っていますなるべく自分で撮った写真を使うとサイトが本物に合いなりそのサイトの作成者管理者も本当の人間なんだなというイメージがちょっとつきますまたサイトのユニークさが増すでこれは画像SE用的にもそうなんですけどGoogleさんは検索エンジンさんは同じ画像が使われていた時にそれを検索結果でランキング下げるという処理をしていますパッと見ていただいても全部これ上の方オリジナルの写真ばっかりなんですねもしどこかの画像を流用した場合正しく流用していたとしてもその画像が検索結果の上位に来ることは珍しくなってしまいますなるべくオリジナルの画像を使った方が検索結果では上位に来ることが知られていますそれからライセンスを気にすることがないフリーサイトとかから画像を使う時もいろんなライセンスがついているので自分の画像を使うとそういうことをしなくていいというそういうメリットがあります石原さんがチャットの方で動画のサムネイルも画像のSEOから応用がききそうですねまさにそうですYouTubeのよく見られる視聴回数が増える動画っていうのはサムネイルもものすごい凝っているものが多いです本来たぶん一番最初サムネイルという意図だったんですけど今はもうサムネイルだけを別に画像編集で作って動画に付与するなんてことも出てきてますねなるほどありがとうございますちょっとライセンスの話の関連なんですけど画像の著作情報は技術使用他のサイトの画像を利用する時はライセンスを必ず確認して条件通りに著作情報を記述しましょうこれ当たり前だと思っていただけたらバッチリです何も新しい情報ではないんですけどネットで無料画像と検索した時に出てくる画像が著作情報を記述不要という意味ではないんですね使うのは無料だけどどこから持ってきたかは書いてとかこの条件内であれば無料で使っていようというようにライセンスがついている画像が大半ですもしライセンスに違反した場合ライセンスを持っている人がグルグルなどの検索エンジンにこの画像は私の画像を違反して使ってますということを通知することができるんです画像SEO的に一度通知が入っちゃうと全部ランキングが下がっちゃいます一度無くしたある意味信用というのを検索エンジンの中でもう一回作り上げるというのはかなり難しいと言われているので画像SEO的にもライセンスは必ず意識して正しく利用するようにしましょうここでもう一つ注意はオリジナルの画像を利用する場合も個人を特定できる情報が含まれているならば個人の許可をもらってから利用しましょうパーソナリティー件とかそういう権利が付いています日本ではあんまりこれはまだ問題にはなってないと思うんですけど例えばヨーロッパ10年ほど前から忘れられる権利とかそういう権利が歌われています検索エンジンに対して私の個人情報を消してと訴えることができるんですなので例えば誰かが自分の画像を利用した時に私の個人情報だから消してくださいと言ったりしてその情報をネット上で見つけにくくすることができます日本ではまだあんまりされたことはないんですけど制度としては確か利用できるはずですそういう観点からもオリジナルの画像を利用する時個人を特定できるものが含まれていれば必ずその個人から許可をもらってから利用するようにしましょうなので例えば極端な話ブログに例えば会社の飲み会の写真を載せるとかお正月に集まった家族の写真を載せるとかもしそういうことをされるなら厳密にはその写真に写っている一人一人から写真を使っていいよねという許可をもらって載せることが一番正しいやり方ですちょっと面倒になる時もあるのでそれぞれの裁量に任せますけど正しくは個人から許可をもらってから利用しましょうとはいっても難しいです自分で写真を撮ってそれを使うというのはプロのカベラマンでないとなかなか思うように写真が撮れないとか今すぐ写真が欲しいという時にちょうどいい写真が手元になる場合があります先ほど送った資料にもこれ全部リンクが貼ってあるので後でぜひ見ていただきたいんですけど無料画像が見つかるサイトいろいろ載せていますいくつかだけ紹介しようと思いますがまず一つ目がワードプレスプロジェクトの公式ディレクトリーというものです残念ながら日本語のサイトはないんですけど英語で検索をかけていただけるとこれはワードプレスのコミュニティのメンバーたちがワードプレスに提出をした無料画像です6,468多いのか少ないのかちょっとあれなんですけど毎日これは増えてます一応このリンクを押すことで自分の写真もここにアップすることができますパッと見た感じでいいものが多いんですよいろんな画質のいいものもありますしもしワードプレスに貢献したいという方はこの写真投稿が一番楽な貢献方法だと言われていますワードプレスのプロフィールを見ていただくとワードプレスのプロフィールなんですけどどのチームに貢献したかというバッチが乗るんですねフォトチームは一個でも写真を提出してそれが認められたらこのバッチが不要されることになっているので私もワードプレスに貢献していますということを胸を張って言えるようになるんですねなのでフォトディレクトリーおすすめですリンクを見ていただきたいと思いますイシャラさんから建物とか欧米が中心なので日本の画像をアップロードすると逆光を浴びそうそうですねいくつか日本のミートアップでも確かフォトモークというのをやっていますみんなで写真を撮ってここに写真をアップして日本の画像を増やそうということをミートアップでやっているのでワードプレスのフォトディレクトリーそれからオープンバースオープンバースイントネーションはどうなんだろうブームのチャットにもリンクを送りますこれは去年かおととしまではクリエイティブコモンズと言われていたサイトですそれがワードプレスプロジェクトの中に吸収されたんですけれどもこちらは1億1,1001001,0001億6億ってことですかね6億の画像と今回こっちはオーディオ音線も入っています衝撃用が可能とか衝撃は出来ないとかちょっと条件はついているんですけど一応誰もが使って無料で使ってそういう画像がここにあります今、オーディオと両方出ているので、ちょっと画像だけ見ていくと、こんな感じでちょっとこう、何だろう、ドアがちょっと違うかもしれないですけどいい写真がここにも見つかる時があります。デニーさん、明日、東京でフォトウォークあります。あ、明日あるんですね。あの、ぜひ皆さんもそのワードプレスに貢献をしてみてください。もう一個だけ紹介するのは、これ日本のサイトです。横断といまして、このサイト何がいいかというと、複数の無料画像サイトを横断して検索してくれるというサイトなんです。なので、しかも日本語で検索ができます。なので、例えばクッキーという日本語で検索をかけると、今最初これ、アンスプラッシュというサイトの検索結果。その次、ピックサベーというサイトの検索結果。さらにカブムピックス、ISOリパブリックなどなどなど、どんどんどんどん世界中の色んな無料画像サイトを一気に検索してくれる日本のサービス、無料サービスなので、こちらもおすすめです。横断。もう一つお話ししたいのが、このインスタントイメージというプラグイン。これはワードプレスのプラグインで、日本語への翻訳が進んでいます。完全に日本語ではないんですけれども、日本語の翻訳も進んでいます。これは、海外では主流のアンスプラッシュ、ピックスベー、ピックスルー。これ、それぞれ無料画像サイトなんですけど、それぞれのサイトをワードプレスアドミンのダッシュボードの中から直接画像を検索してインポートができるというプラグインなので、わざわざそれぞれのサイトに出ていかなくても、ご自身のサイトの中から画像を検索をして、メディアライブラリーにインポートできる。なんなら、ブロックエディターの中からも直接検索をして、インポートをして投稿とか固定ページに貼り付けるということができる、結構万能なプラグインなので、おすすめです。いい画像を選ぶという話をしてきました。石原さんが質問です。提供しているサイトによって、画像の傾向が違ってくるのでしょうか?はい、違ってきます。違ってくると思います。なので、私もやっぱり自分の好みというサイトはありますね。私はピクサベーとかわりと使うんですけど、例えばペクセルズというのは、白人じゃない方々の画像を多く載せているサイトということで有名です。世界のいろんな人種の人を積極的に、積極的に取り上げている。結構、今までの従来の無料画像サイトだと、本当に白人の欧米っぽい人たちばっかり映っている画像が多いんですけど、ペクセルズはそういうのじゃない人もたくさんいるということが一応、歌われているサイトになってきます。あとはですね、チェックの度合い。例えば、ワードベースホートディレクトリーはわりとしっかりした写真が多いんですけど、マイスは少ないですね。オープンバースはもうちょっとチェックが緩いので、いろんな写真が載るけれども、数は多いという感じなので、いろいろ結構は違うと思います。画像選びについて、なるほどありがとうございます。画像選びについて、他に質問とかないでしょうか?はい、ありがとうございます。フィグまでアンスプラッシュのプラグに使う人多いですね。そうですね、アンスプラッシュこれですけれども、プラグインで自動的に引っ張り込むというのがいいです。特に、このインスタントイメージというのは、アルトテキスト、後で話しますけど、大体テキストとかも自動でインポートしてくれるんですよ。画像インポートした時点で、それが全部設定されているということになっています。さて、画像を用意しました。自分の使いたい画像を用意しました。それをワードベースに早速アップロードして使いたいと何がちなんですけれども、画像SEO的にはアップロードする前に施し取りがいくつかあります。大きく4つ紹介します。まず、適切なファイルフォーマットを選ぶ。画像の寸法を調整する。画像のファイルサイズを圧縮する。そして画像のファイル名を入る。この4つを見ていこうと思います。まずは適切なファイルフォーマットを選ぶ。先ほどWebPという話題も出ましたけれども厳密な正解というものはないですが頻繁に推奨されるフォーマットがあります。まずはJPEG。これ結構一般的な画像の種類ファイルフォーマットですね。ただJPEGは透明度の情報が入っていないファイルになります。なので通過性のある背景の画像とかを利用する場合はPNGというのが割と種類かなと思います。先ほど責任さんでしたけどな。WebPという話も出てました。WebPというのはここ2、3年ですかね出てきた新しいファイルフォーマットでJPEGもPNGも包括するようなファイル形式で通過情報も出せますし一般的にはもっとファイルサイズが小さくなるはずです。同じくらいがもっと小さいか大きくなることはありません。1個だけ注意は古いブラウザーはまだ避たいようなんですね。日本でも今だに時々インターネットエクスプローラーを使っている方とかいますけれどもそういうのでは表示されないのでたぶん将来僕はこれがメインになるかなと思うんですけどそれはちょっと数年もしかしたらまって古いブラウザーが本当に無くなるのを待った方がいいかなという感じがします。ロゴやアイコンはSVGというのがおすすめです。JPEGとかPNGというのは拡大縮小をするとピクセルが見えてくるんですね。拡大するとガタガタにピクセルが見えるんですけどSVGというのはどれだけ拡大してもガタガタにはならないファイル形式なんです。いつもきれいに輪郭が整っている形になります。例えばそのサイトのロゴとかアイコンはいろんなところにいろんな大きさで登場すると思うんですね。こういうのはSVGがいいと思います。SVGはワードプレースにはアップロードできないファイル形式なんです。ここはちょっとプラグインを使うとかSVGを可能にするプラグインというのはあるのでそういうのを使ってサイトに載せるのがいいかなと思います。例えばアイフォンとかで撮った画像形式というのはこれもどれでもないんです。さらに別なアップル式のオリジナルの画像形式なので画像の形式ファイルフォーマットを変更することが時々必要になります。その時おすすめなのがスクーシというアプリでネット上のこれもオープンソースのアプリなのでいつまでも無情で使えます。残念ながら日本語はないんですけどそんなに難しくないです。ここに写真をドラッグ&ドロップを引け、あとはファイル形式を変えるファイルを圧縮するとかそういう作業もできるファイルのソフトなのでおすすめです。デニサン、OSSなんですね、オープンソースなんですね、ファイ。ファイル形式が決まったあと次にやるのは画像の寸法の調整です。これはファイルのサイズ調整とは別です。ファイルのサイズを変える前に画像の寸法を調整します。つまりもう何ピクセルかけ何ピクセルの画像かその拡大縮小をします。こちらのサイト非常に面白かったので皆さんとも共有しますけれども世界の皆さんがどんな画面を使ってネットを利用しているか、統計を取っている研究機関がある。今ズームのチャットに送ったのはこれ日本のデータなんですけど今日は読み込みが若干遅い。下にいずれここにグラフが出てきます。この上、これトップ6なんですけれども日本で一番利用されている画像サイズは画面サイズは1920x1080ピクセルです。これがもう14%グラフでましたね。転線はデータ無しなのでこれを無視していただいておけなんですけどこれです。この緑が1920x1080ピクセル。その下を見ていくと上位に来ているのは390x844これ携帯ですね。1536x375ポイントは全部これより小さいです。1920x1080より小さいですね。だからどんだけ大きくても今の一般の人たちの使ってる画面ってこれくらいなんです。画面の大きさが。ただデジガメとか性能が上がっているのでデジガメの写真をそのまま見ると例えば3000とか4000ピクセルのものすごく大きな画像を撮ったりするんですね。その3000、4000ピクセルの画像をそのままサイトに載せるとどこかで圧縮作業が必要になります。サーバー上でも圧縮されるし実際にエツラン社がサイトを開いたときにブラウザの中でもさらに圧縮がかかったりします。圧縮が必要な度に時間が取られますよね、画像の読み込みにGoogleの検索結果に一つ大きく関与しているのは読み込み時間です。もし画像の読み込みが遅ければ画像SEOも下がってしまいます。ちょっと周り行くといい方をしましたけれども何が言いたいかというと日本で最も良い利用の多いモニターは最大でも1920かけ1800ってきてもしお使いになる画像がこれよりもあまりにも大きいんだったらまずはサイズを小さくしてからサイトにアップする方が豊か的です。これより大きいのを使っても圧縮されますから。例外として例えば写真家が自分の写真を売るサイトを持っているとかダウンロード用の画像を提供したいということがあると思います。こういった場合もなんですけどサイト上にはフル画質の画像は見せないでください。3000とか4900ピクセルの画像をサイトに載せちゃうと読み込みに時間がかかってSEO的にマイナスになります。のでサイト上にはそれを圧縮した画像を見せて例えばそれをクリックした時に巨大な画像がダウンロードされるとか別にダウンロードリンクを設けてサイト上に表示はされないけどサイト上に表示されるという仕組みにするのがいいと思います。ちょっと戻りますけど1920、1080ピクセル今後時代とともにこれは大きくなるとは思うのでこれに厳密に従う必要はないんですけど言いたいのは要するにあまりにも大きければ小さくした方がいいと。あとは例えば今見えているこの紫の画像はだいたい画面幅の3分の1ぐらいですねなのであまり重要な画像でもないのでこのピクセル数のさらに3分の1の大きさでも全然こと足りるという画像なんですよなので例えば372だから700×300とかそれくらい圧縮した上でサイトにアップロードしても全然足りるということなんで自分がその画像をサイト上でどうやって使いたいかというのに合わせて寸法を調整するといいと思うはい、ちょっと早口なんですけど質問があったら是非挟めていただいて大丈夫ですのでチャットに落としたりしてくださいさてファイル形式が決まりましたファイルの寸法も調整しました続いて行うのがファイルサイズの圧縮ですこれは寸法とは別なんですね寸法は同じで品質を変えずに圧縮を行うことができますこれも先ほどのスクッシュおすすめですしイメージオプティムというこれはダウンロードして自分のコンピュータ上で使うソフトウェアになりますなのでスクッシュはネットに自分の写真をアップロードしなきゃいけないですけどプライバシーとか懸念のある人はこれをご自分のパソコンにダウンロードして利用することが可能ですファイト自体は英語なんですけどこれもオープンソースで翻訳の方を見るとジャパニーズがあると書いているのでおそらくインストール後に日本語で利用することが可能だと思いますファイルサイズの圧縮の時に一つ考えるといいのがこのXF情報が必要かどうかということですXF情報というのはカメラが画像に付与しているメタ情報見えない情報です実際の画像の中ではなくて裏にファイルの中にいつどこでどんなカメラを使ってどんな設定で写真を撮ったかなどを記録しているのがXF情報写真をたくさん撮る方にとってこれは整理をするときに便利なんですね例えば2022年の写真はどこだろうもっと言うと2022年10月15日の写真はどこだろうとかですねあるいはあのヨーロッパ旅行で撮った写真だけ出したいからヨーロッパで撮った写真というふうに検索をかけるとこのXF情報を元にファイルの仕分けができますネット上にアップした場合サイトを見る人も皆さんこのXF情報を見ようと思えば見れるなのでサイト作成者がいつどこにいてどんなカメラを使ってどんな設定にして写真を撮ったかという情報が世界にまる見えなくてそれで全然いいよという方はいいんですけれども結局ファイルサイズを取っていますこの情報はなのでアスクという観点からはXF情報を全部取り除いたほうがファイルサイズが小さくなってそして読み込みが早くなりますという仕組みになっていますXF情報はこのイメージオプティムとかスクッシュの中で削除することが可能ですもうそのアスクの時にXF情報削除というチェックボクスがあるのでそれをクリックするとそして最後画像のファイル名今まで色々変更していく中で多分変な画像のファイル名になっていますだいたいカメラで撮ると記号だらけだしアスクソフトとかに通すと最後にコンプレストアスクという単語がついたりさらに自分のダウンロードファイルに同じ名前の画像があるとカッコ1カッコ2とかどんどん数字がついていくので最後に必ず画像のファイル名を変えるようにしましょう検索エンジンは資重が下がっているんですけど一応今もその画像のファイル名を見て画像の中身を推測していますので画像に表示されているもののキーワードを単的にファイル名に入れるようにしましょう検索エンジンのためにここちょっとお差方なんですけど単語と単語の間にはハイフを利用するのがネットの決まりですスペースは絶対に使わないですしアンダーバーというのも特殊なときにしか使わないので基本的に画像のファイル名には使いませんなぜハイフンかというとちょっとこのスライドで実演します今ここにですねPlateOfChocolateCookies.pngというファイル名があるとしますでダブルクリックしますはいチョコレートが選択されましたこっちは同じファイル名でアンダーバーが付いていますチョコレートというのをダブルクリックするとアンダーバーを超えてファイル名が全部選択されたんですでプログラミング言語的には一応ハイフンが単語を区切るでアンダーバーはその先も一つの単語としてという使い訳が実はあるんですので例えばこっちだとですねPlateOfVanillaCookiesという風に簡単にこのチョコレートVanillaに変えることができるけどこっちは簡単には変えられないですねプログラミングの中でアンダーバーを使うことはあります全く使わないわけではないんですけど基本的にはハイフンが主流ですデニーさん選択しやすいからアンダーバー好きですこれも好みです検索位置もバカではないのでこれを逆にしたから間違えてことはないんですけどオサフォーとして普通はハイフンということになっていますはいなるほどありがとうございますここまでがアップロード前にすることです画像を決めてアップロードする前にやる処理何かちょっと質問とかなかったでしょうか大丈夫でしょうかイシャラさん Web スクレーピングとかでは差が出そうですねこれですかこの5名の話ですかそれでもここまでトータルでそうですね何か差が出そうな気はしますググルさんファイル名の比重が下がっていてもうちょっと後で話す本文の方が今は重要になってきているとは言うんですけどやっぱりSEO 的には全く影響がないわけではないのでここからハイフン中心に使うといいと思います縦アップロード前にいろいろ処理を施しました実際に画像をメディアライブラリーにアップロードしましたその後メディアライブラリーにアップロードして投稿とかコンテンツに入れる前に施す処理をいくつか紹介します特にワートブレイズの場合画像メディアライブラリーにアップロードするとこういう画面が出ますよね結構右に設定があります大体テキストタイトル説明大体テキストは有名になってきたので皆さん割と設定されるとはですけどタイトルとキャプションと説明はそもそも何なのか必要なのかということはちょっと分かりにくいんですね私もワードフェイス使いたての頃一体これ何なんだっていう感じだったんでこの辺りを簡単に説明したいと思いますまず大体テキストアルトテキストとも言われますけれどもこれは画像が表示されないときに代わりに表示されるものですだからそのページの中で何かの理由で画像が出ないときに空白になるんじゃなくてここには本来こういう画像がありますっていう説明として表示されるテキストですこれはそのS用的にもあとはアクセシビリティ的にも非常に重要だということが世界中で言われていて付けている人は増えていると思い画像が表示されないことなんてあるんだろうかと日本にいるとあんまりなじみがないんですけれども例えば発展途情報とかインターネットの回線速度が日本より全然遅いくにってあるんですね結構日本って本当に早いので全然遅いくにっての世界中にそういう国ではブラウザー表示しないという設定にしてインターネットを利用している方も結構いるんですねその回線が遅いので不必要な情報にはなるべく使いたくないそういうことがあるのでそうしたサイトを出している場合はあんまり気にしなくていいかもしれないですけど世界に何か情報を配信したいというときにはやっぱり画像を見てない人もいるということは抑えてサイトを作るといいと思いますあともう一つはニューザーが支援技術を使ってサイトを営業している例えば目の見えない方がサイトリーダーというソフトウェアを使ったりしてオンラインのサイトを見ることがある目の見えない方にとってはいくら画像が良くてもかっこよくてもその情報は伝わらないのでサイトリーダーは大体テキストを読み上げてここにはこんな画像がありますということを伝えているんですねなのでこういった方々が世界にいるということを抑えた上で大体テキストぜひつけるといいと思いますW3というアクセシビリティの組織なんですけれどもこちらのほうでどういうときにアルトテキストを使うといいかどういうときに使わないほうがいいかという情報を提供してますこれを日本語に綺麗にまとめたサイトがなかなか見つからなかったんですねW3も日本語にこのページを翻訳してないですし日本で大体テキストが必要かどうかというフローチャートみたいなのを綺麗にまとめているところがなかなか見つけられませんでしたというのは大体テキストはいつも使うべきではないです使うべきときがあってそして使う書き方もお砂法っていうのがあるので今はしょうがないですけどこれをGoogle翻訳にでもかませてぜひ読んでもらうとそうなんだって面白いと思います私がほんとにザックにまとめた場合画像に重要なテキストが含まれている場合そのテキストは大体テキストにも記載されるべき例えば今この画像文字がたくさん書いてますね私たちはこれを見るとプログラミングのエラーメッセージだなというのがわかるんですけどこれは文字である以上でもこの文字は書くべきです具体的にどういうエラーが表示されているかということまでも大体テキストには書くべきです画面にエラーが出ているだけじゃなくて画面にこれこれのエラーが何秒にもわたって表示されているみたいな感じにすべき逆に画像が単なる装飾の場合には大体テキストは記載しないべきです本当に装飾的に画像を使っているときは大体テキストは記載しないというのがルールはいこれはアルトテキスト残る3つタイトル キャクション 説明これはごめんなさいもう1つスライドがありました大体テキストを更新する際の注意点これはワードプレイスシステムの癖ですメディアライブラリーでもう既にコンテンツで利用されている画像の大体テキストは更新されませんつまり今日この話を聞いて僕全然画像に大体テキストつけてなかった今から戻ってメディアライブラリーで一生懸命これ全部加工と思ってもここで今書いてももう既に作った投稿とか固定ページの画像には生えされないこれはコンテンツの利用というかそういう仕組みになっているので既にもう投稿とか固定ページに入れちゃった画像に関しては地道に1個1個ブロック設定の中から大体テキストを描いていくしかないですでアイキャッチ画像がもっとやらしくてアイキャッチ画像は固定ページとか投稿の中で大体テキストを設定する機能がないんです今ブロックエディターに今までのクラシックエディターもなかったですので既に使っているアイキャッチ画像にはアルトテキストがついていないのでどうしなきゃいけないかというとアイキャッチ画像を削除固定ページや投稿更新その上でメディアライブラリーで画像に大体テキストを付与そしてもう一回固定ページ投稿に戻ってきてそのアイキャッチ画像をもう一回設定するこうするとようやくアルトテキストが設定されるんですけどちょっとこれはワードプレスの癖なので覚えておいてください松野さんどれに設定されていてされていないか分からないそうですよね今日から設定するのがいいと思います今日からメディアライブラリーにアップロードした時点で大体テキストを入れておくというふうにして今までは申しわないというのがいいと思います石原さんすでにメディアライブラリーにある画像でも新たに投稿内に設置する時は後からメディアライブラリーで設定した大体テキストが適用されるのでしょうかこれは適用されます新しく今から入れる場合にはメディアライブラリーの大体テキストは引っ張られますだから不思議なんです同じ画像をこっちの投稿とか圧の投稿に入れていても違う大体テキストが付けられるんです多分それを狙ってワードプレスはこういう仕組みなんだと思うんですよ同じ大体テキストを無理矢理引っ張るんじゃなくて個別に設定可能に下がゆえの癖なのでちょっと注意をしてくださいイシャラさんアクセシビリティの評価ツールとかを使うとページ内の大体テキストのうむくらいを判定してくれそうですねあとはご自身のサイトの重要なページだけちょっと地道に確認するっていうのもありかもしれない昔の投稿全部さかのぼって買えるっていうのはめんどくさいですけど例えばホーム画面とか音合わせページとかページを重点的に見直すってことはありかもしれないはい今日多分これ10分くらいオーバーすると思いますいません情報たくさん用意しすぎたのでもし11時にご対処しなきゃいけない方がいたら全然それはOKですのでちょっと今日10分くらいオーバーすると思いますさていよいよタイントルキャプション説明これらは何なのかという話ででタイトルがメディアライブラリ内およびテンプファイルのページで利用されますどういうことかというとここに一つテストサイト用意しましたでメディアライブラリを開いてデフォルトだと多分こうですねこうなってるんですけどこちらからその一覧表示に変えた時にここに見えているこれが画像のタイトルですなので例えば編集をしてタイトルタイトルこれかタイトルですねこれを例えばウェブページウェブページにして更新をするともう一回ライブラリに戻ってここが変わりましたなのでタイトルはメディアライブラリの整理に使うものです出てこないのでご自分で例えば検索をかける時に見つけたい画像が見つかりやすくするための機能ですのでデフォルトのままでいいかなという方は多分デフォルトのままでも ok だと思います画像がたくさんあって整理したい方はこれを変更してもいいかなと思いますcaption というのはコンテンツ内で画像の下に表示される文字のことですでこれ最近の研究で発表されてたんですけど人間ってそのウェブサイトを開いた時大々まず斜め読みをするらしいです本当に自分の探していた情報なのか自分の興味にあったサイトなのかを確認してから実際に本本読み始めるらしいんですねで斜め読みをする時にだいたい人の目が止まるのは見出しリストブロックなどを使った目字画像と画像のcaption画像のcaptionも斜め読みの段階で目に止まっているらしいなので装飾的な画像は必要ないんですけれども本文と関連のある大事な画像に関してはcaption はつけていった方がseo 的に大事になります人がもっと止まりやすく止まって自分の内容を読んでくれるためにcaption はぜひつけるといいと思います石原さんメニュアライブラリーの一覧形式のフォーマットがあるの初めて知りましたわたらららこれはたぶん昔からありますよ新発見ですねこれ一括で削除とかできるので時々私も使いますはいデニーさんseo というか読んでもらえていいですねそうですねcaption オススメでもう一つ説明っていうのがありますタイトルもちょっと飛ばしたんですけどメディアライブラリー内の他にテンプファイルのページで利用されますこの説明もテンプファイルのページで利用されますさて皆さんに質問ですテンプファイルのページというのはワードプレースの公式機能なんですけれども聞いたことある方どれくらいいますかチャットの方にも聞いたことある聞いたことないちょっと書いてみてくださいテンプファイルのページというワードプレースの機能です知らなかった知らなかった英語だと確かタッチメントページだったかな私もあのなんだっけそれぞれの画像のページ私も2、3年カスタマサポートをやっていてこの機能について質問が来たことはいかもなかったです多分ほとんどの方は利用してないと思いますのでテンプファイルのページという機能を使ってない人はタイトルと説明は不要です気にしなくてもいいテンプファイルのページというのを使っている人は書いた方がいいですけど何のことかお見せしたいと思いますここに画像ペット貼りましたリンク先にテンプファイルのページリンクというボタンを押すとURLにリンクするかメディアファイルにリンクするかテンプファイルのページにリンクするかこの機能もしこれをつけた場合これで更新しますこの固定ページを見てみましょう画像だけのページなんですけどこの画像をクリックすると固定ページのファイルテンプファイルのページに飛びます押してみますじゃんこれですこれですここに上にあるのはこちらで言うタイトル下にあるこの文字列が説明なんですねたぶん一番最初これは昔のワードフェースからあるのでたぶん写真かとかそういう方が1個1個の画像に対して投稿とか固定ページを作らなくてもいいようにメディアライブラリ内で例えばこういうテンプファイルのページができて自分の画像をみんなに紹介できるとかそういう意図で作られた機能なのかなと思うんですけど実際に使ってる人を見たことはないです私の世界が狭いだけかもしれないですほんとはたくさんいるとは思うんですけど私は出会ったことはないですはい見たことあります石根さんごくというかうまく利用していたサイトですかねなんかあの迷い込んだそんな感じですよねたぶんなので結論から言うとだいたいテキストは多くの場につけたほうがいいのでこれですねだいたいテキストはつけましょうタイトルはメディアライブラリの整理が大事な人にとってはつけておくといいですキャプションはseを的に重要なのでキャプションは装飾的な画像でない限りぜひつけていきましょう説明はぶっちゃけ不要というのが私の本音ですデニーさんも知識としてなんとなく知ってたけど使わないですねという感じになりますはいこれでようやく画像をアップロードして必要な設定をしてここからコンテンツに追加していきますコンテンツに配置するときに一番大事なのは画像と関連するテキスト文字を近くに配置することですまず人間はその文章を読んでいるときに文脈があると画像の意図がわかりやすくなるので近くにあるといいんですけれどもこれは検索エンジンの仕組みからもう関連するテキストの近くに置くといいです先ほどそのファイル名はもう今あまり検索エンジンは重視してないという話をしたんですけど何を重視しているかというと画像周辺の本文自体を検索エンジンは見ているらしいんですで画像に対してそのHTML構造の中で一番近い文章は何かというとまずキャプションですキャプションがまず一番近いのでキャプションから画像の中身を推測しますそしてさらに本文自体の中でその画像の位置を理解してでどういうことが書いてあるかというそこから画像の中身を推測しているらしいですGoogle社の方のインタビューみたいなのを読んで知ったんですけどなので画像と関連する文字はなるべく近くに置くようにしていきましょうデニーさんやっぱり本文も書いてあるんですね関係あるらしいですデニーさんもなるほどありがとうございますそして投稿には必ずアイキャッチ画像を追加しましょう皆さんラインとかでも何か自分URLを共有するとそれがポッて画像が出てちょっとプレビューがつくようになってますねラインだけじゃなくてFacebookとかTwitterとかなんですけどその時にポッと出るプレビュー画像が基本的にはワードプレイスの場合アイキャッチ画像になってますで画像SEOというのはいろんな人がもっと自分のサイトに来るように設定しようというのがいいとなのでSNSでご自身があまり共有はしなくても他の人が共有した時にやっぱり画像がポッと出た方が自分のコンテンツにやってくる可能性が上がるので投稿には必ずアイキャッチ画像を設定するようにしましょうおさらいですけどアイキャッチ画像を設定する前にメディアダイブラリン内でアルトテキスト大体テキストが設定されていることを作りましょう松村さん画像のファイル名も画像の内容にした方がいいという話を聞いて苦労を覚えましたが画像のファイル名は僕がいつもやっているのは2, 3, 5で端的に何が出ているかだからチョコレートクッキーとかですねただそのチョコレートクッキーが例えば私が作ったチョコレートクッキーなのかこのレシピの完成図なのかそのプレゼントなのかもらったものなのかっていうその文脈はやっぱりキャプションの中とかその説明が加わると思うんですよファイル名は短くてもOKただそれ以上の説明は画像の近くの本文中どこかにあるといいかなと思うコメントに対する返答になったでしょうかはいたくさんちょっと早口になって情報共有してきましたが最後追加情報というのがありますCDN構造化データこれいずれもちょっとテクニカルな話なので今日は正面的な部分だけ説明をして興味のある方はGoogleで検索していただくともっともっと情報が日本語でも出てくるので見ていただくといいと思いますただそのやっぱ画像のSEOを考えたときにこだわりたいっていう方はここらへんまでやるといいと思うので紹介したいと思いますまずCDNというのはコンテンツデリバリーネットワークというものなんですけど画像の配信にはCDNを利用しようと書いていますCDNというのはユーザイに早くコンテンツを送り届けることを目的としています例えば私北海道にいるんですけど北海道でサプロのごめんなさい東京のサーバーのホームページを読み込むよりサプロのサーバーのホームページを読み込んだ方が知理的に近いので読み込みが早くなる基本的にはやっぱり東京からインターネット改善の伝線を今は光なのでピカピカピカとこ中でライトが光ってそれがずっとたどってきて北海道に来るよりかは早くなるんですねなのでCDNというのはメインのサイトはもしかしたら東京にあるかもしれないけれどもそのサイトのコピーキャッシュというんですけどキャッシュを別が知理的に分散したサーバー上にも保管をしてエツランシャに一番近いサーバーのコピーを送り届けるという仕組みがCDNです何でこれを取り上げているかというと検索エンジンは画面の読み込み時間をかなり重視しています画面の読み込みが遅いとそれだけでランキングが下がっちゃうんですねなので特に画像の多い人とか放画室の画像をたくさん載せているサイトを持っていれば絶対CDNは使ってくださいCDNを提供しているホスティング会社がかなり多くなってきましたので自身のホスティング会社と確認をしてこのサービスを提供しているなら使うといいともにもう無料でCDNを提供している会社も増えてきてますし中にはまだ有用サービスとして提供している場合もあるんですけど自分のニーズに合わせてこれは導入するといいと思います松野さん撮影した元のファイル名は残しておきたいご自身の整理用とオンライン用SE用用ってもしかしてコピーを作って保管してもいいのかもわかんないですけどねどうだろうデニーさん無料のCDNってあるんですねあるんですか?無料のCDN検索で出てきたんですか?無料のCDN無料のCDNサービス10,000これちょっと私読んでないですけどハブスポットわりと信頼できる情報サイトだと思うので皆さんにもちょっとリンクを共有しておきますいいですねCDN画像よりも動画を持ってる人とかそういう人はもっともっと結構メリットが出てくると思うんですけどはいもう一つお話ししておきたかったのは画像と構造化データです構造化データというのは検索エンジンがコンテンツの内容とか種類をより理解しやすくするために復活するメタ情報メタ情報っていうのは裏にあってコンピュータしか見えていない情報ですね表向きにはサイトには乗らない裏に乗っている情報ちょっと構造化データもたくさん種類があるので今は画像に特化すると検索エンジンは商品なのかレシピに関する画像なのかということを画像に関しては見ていますこの画像が商品の画像ですということを構造化データというメタ情報を復活することができるあるいはレシピとして例えば私たち人間がウェブサイトを見てて一番何々をする隣に画像があって二番何々をする画像があって三番何々をする画像があった場合一番に対応する画像だな二番に対応する画像だなということを自然と人間は理解してが検索エンジンは可視枠はなってきてるんですけど簡単にそれが分からないんですねなので構造化データっていうのは裏でそれを紐づけるデータになります画像の場合は商品やレシピについてよくつけますこれがついてると一気にSEOのランキングが高くなる例えば先ほどのこのチョコクッキー一番最初に検索したページで左下にレシピってついてますねこれレシピの構造化データがついた画像ですで一番上のロックを見るとここ中5個はレシピなんですこの方だけついてないんですけれども他の方はみんなレシピに関する画像だとこちらはストアって書いてるんですけどこれは商品です商品の写真だってことをGoogleさんに伝えていて構造化データがついてますで 上を見るとだいたいこれがついてる画像ばっかりですこれ1個ついてないのありましたねここまたついてないのがありましたけど上位に来ているサイトはだいたいプロダクトかレシピなんです今回は食べ物を検索しているのでそうなんですけどもしご自分も商品とかレシピに関する画像を拡散使っている場合はSEO的に構造化データを付与するといいです構造化データをつけるのを助けるプラグインがいくつかありますちょっとこれ英語のプラグインばっかりだと思うんですけれどもプラグインはあるのでちょっと調べてつけるといいと思う松野さんジェットパックに画像CDN機能があって一度キャッシュされるけれどファイル名が同じ場合にその画像を同じファイル名で更新しても新しい画像に置き換わらないこれにくらいは今は分かりませんなるほどジェットパックというのはプラグインですよねで そのプラグインにCDN機能があるんだけれども一度キャッシュされると同じ画像を同じ名前の画像を置き換えた場合置き換わらないそれは迷惑ですねそれはちょっと迷惑ですけど何かそういうこと聞いたことある気がします私も今もどうなんだろうなちょっと分からないですけどキャッシュってやっぱり定期的に更新しないといけないのでちょっとこれはどうなんでしょうねけど 情報ありがとうございます今日の内容は最後ですオープングラフタグで 構造化データは検索エンジンにどういった種類の情報感を教えるメタ情報でしたオープングラフタグはSNSサービスに情報を伝えるメタ情報のことですなので こちらは検索エンジン用こちらはSNSサービス用のメタ情報 どちらも画像の裏にあるサイト上には現れない情報のことですで先ほどマードプレイスの場合アイキャッチ画像がソーシャルメディアのプレビューに表示されるから 投稿には必ずつけようという話をしましたが踏み込んでいくとサイト上のアイキャッチ画像はこれにしたいんだけどSNSには こっちの画像を実はプレビューで出てほしいみたいなそういうことが出てくるんですねそれを指定するのがオープングラフタグですなので サイト上でアイキャッチ画像はこれだいたいオープングラフタグがないとアイキャッチ画像がそのままプレビューで出るんですけどあえてそれを変えたいという時には別な写真にそれをすればそれを変更することができますなので これはSNSからサイトに人を誘導する時に使うものですので興味があればこちらもまたいろんなプラグインで変更が可能ですので検索をして ぜひ使ってみてくださいとりあえず こういうものがありますよ というお話でしたデニーさん 行動化データが画像検索に表示されるんですねデニーさんもなるほどはい ありがとうございますふー ちょっと時間をおばしましたけど画像のエスイオ対策たくさんありますね個人的にこれを全部やろうと思ったらサイト作りが面白くなくなっちゃいます特に私個人ブログで時々写真を載せるんですけど自分に無理のない範囲でできるものをやるというのが文字だと思います全部厳密にやるというのは会社のホームページとか運営していれば大事なことですけど個人のブログとかの程度であればちょっと大体的に一つ付けようかなとか文字と画像の距離を近づけようとかそういったところから徐々に取り組んでいけばエスイオも上がっていくかなと思います何か質問とか最後コメントとかなかったでしょうか大丈夫そうですかねもう盛り盛りでお腹いっぱいになりましたいや本当そうですねいつもよりちょっと多かったですけどありがとうございます最後次回予告です4月1日今までは同じ内容2回やってたんですけど4月は1回だけですなんでかというと私がない外部公司の方が来てお話をしてくださいこの株式会社MGNの信用通称メガネさん日本のコミュニティでも活躍されている方なんですけどその方に来ていただいてクランシックエディターからブロックエディターに移行するノウハウという内容でこのワークショップを行っていただきます4月1日午前10時から11時今日のこれと同じ時間ですけれどもその後11時から12時までズームを延長してサプロミートアップを3年ぶりに開催しますなのでサプロミートアップの一連としてメガネさんに来ていただきさらにそれをトレーニングチームのオンラインワークショップとして公開するという初の試みなんですけどやってみようと思ってますのでこの1時間のセッションだけ来るのも全然オッケーもしその後1時間開いてれば今回のサプロミートアップ全国どこからも参加可能ということにしてますのでそちらにも参加していただいて構いませんはいぜひ皆さんお越しくださいデニーさんからアルートテキストはアクセシブリティのために使いたいので本部にもSEO効果があると知れて良かったですそうですね本部SEO的に結構重要になってきてるみたいですのでぜひ意識していきましょうではなかなかありがとうございました今日のダイヤはこれでおしまいになります横側近日中にアップしますのでその時またお伝えします今日は以上になりますありがとうございました