どうも、かっつー( @kattu0403)です！
先日、ぼくの友達の一人がブログを始めたんです。
始めたばかりなので色々教えていたんですが…
こんな質問をしてきました。
てかさ…
画像のアップロード、
なんでこんなに時間かかるの？
あ、それ最初のころ、同じことやってたわ。
と思いながら
それ、もしかして…
リサイズ→圧縮してないでしょ？
と答えました。
みなさんは画像をアップロードする時に
リサイズ→圧縮してますか？
さらに会話をすると、
「確かに最初の頃知らなかったことだな…」
と思うことがあったので、まとめてみました！
ブログ始めるときに知っておきたかったこと
画像はリサイズ→圧縮！
まずはこれから。
友達の悩みとしては
友達
というものでした。
実は、iPhoneで撮った写真、
ブログにとってはめちゃくちゃ高画質なんですよ。
そんな画質いらんってことです。
iPhoneの画像をそのままWordpressに放り込むと
かなり時間かかります。
別に編集に時間がかかるだけなら、と思うかもしれません。
何が良くないのかというと、
記事を読み込むのに時間がかかってしまいます。
そーいう画像を読み込む時、実は裏側で
元の高画質の画像を読み込み→パソコン・携帯で見るサイズに変換→記事の表示
という処理を行っているんですよね。
つまり、画質を落とすのに時間がかかるんです。
Googleはそういうところしっかり見て評価している(らしい?)ので、なんとか対処したい。
結局は
画像を読み込み→そのまま記事の表示
ができるようになればいいんですね。
そのために、リサイズする必要があります。
では、どれくらいの画素数にするのかなんですけど、780pxくらいを勧めていることが多いです。
ぼくも、アップロード画像は横幅780pxで固定しています。
画像をリサイズする必要があることをブログ始めてから2ヶ月くらい経ったときに知り、それまでの画像全部を処理するのがめっちゃしんどかったです。
ちなみに
友達
という質問もされました。
良い質問ですねぇ！
まあ、ぼくはあんまり気にしてないんですけど…
パーマリンクにしています。
blogtips-1、blogtips-2…
といったように、末尾の数字をカウントしてます。
普通にGoogle検索で上位になったりするので、SEO的にも問題なさそうです。
名前の付け方は、この本に書いてありましたね。
必ず結果が出るブログ運営テクニック100 プロ・ブロガーが教える“俺メディア”の極意
ブロガーなら持っておくべき一冊です。
こっちも持っておくべき一冊です。
ここまで
- リサイズ大事
- 名前は統一性があると良い！
と説明してきましたが、このどちらも一気にできるMacのフリーソフトがあるんです。
それが「iMage Tool」。
画像を放り込んだら
- 指定したサイズに一斉変換
- 指定した名前に一斉変換
することができます。
これ、ブログ運営してから3ヶ月ぐらい経ったあたりで知ったんですけど
初めから知っておきたかった。
ぜひ使ってみてください。
iMage Toolの使い方はこれが参考になりました。
で、リサイズしたあとなんですが、
圧縮しましょう。
ぼくは「Optimizilla」を愛用しています。
画像を選択するだけで、20~80％ほどデータを圧縮できます。
劣化は目に見えるほどではないので、やらない理由はないですよ！
アイキャッチの作成はCanvaがオススメ！
横幅728、縦幅410pxがちょうどいいサイズ！
Canvaについての記事は、こちらをどうぞ。
参考 Canvaで作る！ 目を引くアイキャッチ画像Canva公式サイト 参考 無料バナーメーカーCanva公式サイトhタグの使い方を理解しよう！
かっつー
友達
友達
え、どういうこと？？？
友達
どうやら友達は、hタグが見出しだということがわかっていたものの、
h1からh6まで、順番に使っていくものだと勘違いしていたようです。
そしたら6個しか見出し作れないやんけ…
hタグについてで、分かりやすい記事はこちら。
参考 見出しタグの使い方サルワカ「SANGO」 作成者さんのブログですね。
一通り読めば、スッキリ理解できるはずです。
簡単にいえば
- h1タグはタイトルにのみ使う
- h2で大見出し、h3で小見出しを作る
ということ。
ぼくも記事ではh2,h3タグだけ使用してます！
何より大事なのが、
hタグを見ただけで、どんな内容が分かるようにすること！
これだけ意識して記事書いています。
あと、hタグにはこんな効果もあるんです。
全世界で毎日何万ものページが作られているわけですけど、Google社員が全部見ることは不可能…
でも時間が経ったら、Googleに評価(インデックス)され、Google検索であなたの記事が表示されるようになります。
では、誰があなたのブログを見ているのか…？
ロボットが見に来てます。
厳密にはアルゴリズムですけど、ロボットです。
Googleのロボットが記事を眺めて、有益な情報なのかどうかを見極めて、検索結果の順位を決めているんです。
このとき、何を見るのか？
h2タグから見ます。
(厳密にはh1のタイトルからだけど。)
その次にh3、そして全文。
なので、hタグが変な構造していると
ロボット
ロボット
ってなるんですね。逆に言えば、
ロボット
ロボット
ってことにもなるわけです。
なので、hタグを適切に使用することは、SEO対策にも効果的ってことでっせぇ！
Googleのロボットが、記事を見ている！
hタグを見ただけで、どんな内容が分かるようにしよう！
おまけ
Googleのロボットは、一定間隔であなたのブログを巡回しています。
一定間隔なので、記事を更新したときにすぐ見に来てくれるわけじゃないんです。
早くGoogle検索に表示(インデックス)されたければ
Feach as googleを使いましょう。
要は
私のブログ、見て？♡
とGoogleにラブレターを送るんです。
手紙が見られずに破られることはないので安心してください。
Feach as googleについては、こちらの記事が参考になります。
http://links-creations.com/site-building/fetch-as-google/
ちゃんとGoogleが読んでくれたのに、
hタグのせいでフラれないようにしましょう。
すみません、例えが訳わからなくなってきました。
GoogleChromeが超便利
Appleの標準ブラウザ「Safari」を使ってますか？
Google Chromeのほうが便利ですよ？
これも、ブロガー必読の本を見て知りました。
筆者の方がGoogleChromeを使用していたので、調べて使ってみたんですけど…
まず、動作速度が違うんですよね。
画像圧縮するときとか全然速度違います。
そしてなりより、
拡張機能が使えるんです。
Google Chromeで出来ることが増える機能。
無料。
画面右上に拡張機能アイコンが並び、クリックするだけでいろんな機能を果たします。
本当にいろいろあるんですけど、
- 瞬時に画面をスクリーンショット
- マウスカーソルの色のコードが分かる
- HTMLコードの文法チェックができる
などなど、自分が増やしたい機能をダウンロードして使用することができます。
拡張機能についての詳しい説明は、プロブロガーヨスさんの記事が参考になります。
参考 拡張機能とは?ヨッセンス特に、気になった色のコードをワンクリックで調べられるColorPick Eyedropperがめっちゃ便利。
これを使ってブログカラーを決定しました。
(ポカリスエットの公式ページを真似した)
オススメの拡張機能がまとめられた記事はこちら。
参考 Google Chrome拡張機能33選!サルワカ
それからもう一つメリットとして
ブックマークレットが使えるんです。
ブックマークからワンクリックで起動できる
簡易的なプログラム
拡張機能とちょっと似ているんですけど、
ブックマーク欄に便利な機能を追加できるんです。
Safariだとできないんですよね。
ついこの間Twitterで拡散されていた
ライバルサイトのリサーチにとても役立つツールがあったので共有。
「ブックマークレット」というツールを使えば、ライバルサイトのhタグだけを一瞬で抜き出すことができるので、ライバルリサーチにもってこいです！特に目次をつかっていないサイトを分析する時の手入力の手間が省けました😂 pic.twitter.com/VovGhk2F0N
— りく (@kuuunet) 2018年3月4日
この拡張機能を使えば
他のサイトの構造を簡単に研究できます。
カエレバブックマークレットが最強
プロブロガーやぎぺーさんの記事で知りました。
参考 ブログで稼ぐポイントをガチで解説する八木仁平オフィシャルブログブログで商品紹介をするときに便利なツールといえば、「カエレバ」です。
Amazonや楽天、yahooショッピングなどのアフィリエイトリンクを、一度に作成できるんですよね。
こんなかんじで。
カエレバにもブックマークレットがあるんです。
なにができるのかというと、
秒でリンクが作れます。
普通なら毎回カエレバで商品を検索しますが…
ブックマークレットを使えば、
Amazonの商品ページから
ワンクリックで作れます。
本当にサクッと作成できるのでオススメです。
くわしい設定方法は、こちらの記事が分かりやすかったです。
参考 カエレバ・ヨメレバの使い方！A-key functionあと、未成年だからといって楽天アフィリエイトとyahooショッピングのアフィリエイトができないと思っていたんですけど、
普通に登録できました。
これ、ついこの間知りまして、
それまでのカエレバリンク全部書き直し中です…
yahooショッピングは、バリューコマースに登録すると連携できます。
楽天もなにも問題なくできました。
多分、振り込むときは楽天カードが必要なのかな？
まとめ
いやそんなん知ってるわ
なんてこともあると思いますが、
ぼくは全部、ブログ始めてから調べて知りました。
新しいことを知るたびに、それまでの記事の書き直したりするのが面倒。
もっと早く知っておけばよかったな…
とならないように、自分の友だちやブログ初心者に向けた記事でしたとさ。
最後まで読んでいただきありがとうございました。
かっつーでした。
