株式会社YsLink ロゴ

アイキャッチ画像の設定方法|リサイズ・圧縮・alt設定(代替テキスト)

YsLink制作ホームページ
アイキャッチ画像の設定方法と設定マニュアル

当ページは、主にクライアント様向けおよびWordPress初心者向けです。そしてこの記事は、「アイキャッチ画像設定」に特化した内容となっております。

記事のアイキャッチ画像に利用する画像素材を準備する

アイキャッチ画像はThumbnail(サムネイル)とも言い、略称で「サムネ」と呼ばれたりもします。とりわけ、当記事ではアイキャッチ画像の設定方法について解説いたします。

サムネイルは一般的なSEO検索時やサイト内の関連記事表示時に、記事のビジュアル的な印象を決定づけます。したがって、実はとても重要な役割を担う設定となります。

その為、記事内容と親和性が高い画像を選択するようにしましょう。

弊社がお勧めするのは、下記の無料商用動画像サイト。こちらのサイトはACワークス株式会社さんが運営している日本発のサイトです。バナークリックで遷移しますので、試してみて下さい。

無料デザインテンプレートなら【エディターAC】
写真素材無料【写真AC】

弊社も【写真AC】【イラストAC】はよく利用しています。例えば、当記事のアイキャッチ画像も、写真ACさんからダウンロードしています。

無料会員の場合は1日5検索という制限がありますが、充分使えると思います。

弊社は有料会員として登録。とりわけ、ダウンロード無制限で月額1,000円未満という料金プランですので重宝しています。

他にも商用画像として利用できる画像サイトがいくつかありますので、ぜひ調べてみてください。

なお、くれぐれも他社の著作権を侵害するような動画像の掲載方法はお控えくださいね。とりわけ、無断転載等の行為は絶対にNGです。

次にアイキャッチ画像を横幅800pxにリサイズする

アイキャッチ画像の選定が終わりましたら、ダウンロードして下さい。その際、元データはできるだけ高画質にてご準備しておきましょう。

但し、サイト上に公開する際は全てが高画質である必要はありません。なぜなら、適切なサイズじゃないと記事の読み込みに時間が掛かかり、掲載順位に悪影響が出てしまうからです。

その為、下記手順でリサイズされることを強く推奨致します。

Squooshという画像圧縮ツールでリサイズ

画像圧縮ツールで便利なのが「Squoosh」。海外ツールですが、画像圧縮の作業には日本語なんてほぼ不要です。その為、弊社は利便性を重視してSquooshを利用しています。

Squooshを開いたら、該当の画像をドロップします。

リサイズ前のデータ容量をチェック

Squooshに画像をドロップすると、下記のような画面に遷移します。画像左側が元データイメージ、右側がリサイズ後のイメージとなります。

この時、画面右下の元データ容量をチェックしておきましょう。当記事のアイキャッチ画像の場合、元データダウンロード時は横幅1920px。容量は1.25MBもありました。

リサイズするだけで相当量の圧縮ができる

画面右下のエディターボックスの「Resize(リサイズ)」をONにして、「Width(横幅)」に「800」と入力します。

ファイル種別は「MozJPRG」を選択し、次にQuality(品質)は100%とします。

この時点で78%も圧縮でき、容量は273kbまで落ちました。さらに、もう少しやってみましょう。

Qualityは75%程度で充分許容範囲

Qualityを75%まで下げてみます。すると、容量は26.4kbまで落ち、元データより98%も圧縮できました!

アイキャッチ画像として利用するなら、このように50kb以下に留め、サイトの表示速度を高める方に重きをおきたいものです。

アイキャッチ画像として設定する

それでは画像の準備ができましたので、さっそくアイキャッチ画像設定していきましょう。

エディタ画面右下の「アイキャッチ画像」に既に設定されている、元記事の画像を押下します。

すると、下記画面に遷移いたしますので、用意しておいた画像をドロップしてアップロードします。

アップロードしたら、下記画面に遷移します。

タイトルには元々のファイル名がデフォルト入力されています。その為、適切なキーワードに変更しましょう。例えば、記事タイトルをそのまま入力するのもOKです。

この代替テキスト(”alt属性”と言います)は、必ず入力して下さい。なぜなら、Googleに「この画像は〇〇だよ」と認識させるために必要な設定だからです。

設定が完了したら、その後「アイキャッチ画像を設定」ボタンを押下し保存します。

ここの設定がしっかりできていれば、将来的に画像検索からも記事が検索ヒットするようになってきます。

カテゴリー別 BLOG最新記事