アーカイブ: コラム

会社サイトや採用サイトの制作案件では、会社の魅力を伝えるコンテンツとして、社員紹介を掲載することが多々あります。しかし、掲載される社員の方の中には、自分の名前で検索した際にサイトが表示されてしまうのは何とかしてほしい、といった要望が出ることもあります。

Webサイトは多くの人に見てもらうことを目的として作成するものですが、このようなプライバシーの観点から検索避けが必要となるケースも存在します。今回はGoogleやYahooなどの検索結果にページを表示させない方法についてご紹介します。

1. 検索結果に表示される仕組み

検索避けの設定方法をご紹介する前に、検索結果にページが表示される仕組みについて簡単に理解しておきましょう。作成したサイトが検索結果に表示される流れは、主に以下の3つの工程に分けることができます。

1. 「クロール」：検索エンジンのロボット（クローラー）がサイトを巡回する。
2. 「インデックス」：巡回して発見したサイトをデータベースに登録する。
3. 「ランキング」：登録したサイトに順位をつける。

検索エンジンがクロールしてサイトをインデックスすることで、各ページが検索結果に表示されるようになります。SEO対策の基本となるので「クロール」と「インデックス」というキーワードはしっかり理解しておきましょう。

2. 検索避けの設定方法

2-1. 「noindex」タグによる設定

ページを検索結果に表示させないためには、検索エンジンによるインデックスをブロックする必要があります。「noindex」タグはインデックスを拒否する設定のことで、検索避けしたいページのmetaタグに下記のように記載すれば、インデックスをブロックすることができます。

<meta name="robots" content="noindex" />

また、name属性の値を変えることで、個別の検索エンジンに対して指示することも可能です。日本ではGoogleとYahooの検索エンジンがシェアの90%を占めているので、この2つをブロックすれば検索避けの対策としては十分かと思います。

//Googleのクローラーだけを拒否したい場合
<meta name="googlebot" content="noindex" />

//Yahooのクローラーだけを拒否したい場合
<meta name="slurp" content="noindex" />

【WordPressサイトの場合】
WordPressでサイト構築をしている場合、SEOに関する設定は「All In One SEO」などのプラグインを利用している方も多いと思います。その場合は下記の手順で、noindexを設定することが可能です。

1. WordPress管理画面から検索避けしたい固定ページや投稿ページを開く。
2. 「AIOSEO設定」→「Advanced」タブを開く。
3. ロボット設定の「デフォルト設定を使用」をOFFにして、「インデックスなし」にチェックを入れる。

2-2. 「robots.txt」による設定

「robots.txt」とは検索エンジンのクローラーに、特定のページやファイルをクロールしないように指示するためのファイルです。「noindex」はインデックスを拒否する設定でしたが、「robots.txt」はクロール自体を拒否する設定なので、対処の段階が異なります。

また、「noindex」はページ上には設定できますが、画像や動画ファイルには設定することができません。画像や動画を検索結果に表示させたくない場合は、「robots.txt」でクロールをブロックすることで対処することが可能です。

robots.txtの次のような書式で記述します。

User-agent: *
Disallow: /wp-admin/
Disallow: /images/staff_01.jpg
Disallow: /movie/staff_01.mp4

Sitemap: https://example.com/sitemap.xml

・ User-agent：対象となるクローラーを指定します。（ * は全クローラーを対象）
・ Disallow：クロールを拒否するページ or ファイルのパスを指定します。
・ Allow：クロールを許可するページ or ファイルのパスを指定します。
・ Sitemap：サイトマップを指定します。（省略可）

上記の場合、すべての検索エンジンを対象に wp-admin以下のページと staff_01.jpg、staff_01.mp4 へのクロールがブロックされて、検索結果に表示されなくなります。robots.txtファイルが用意できたら、サイトのルートディレクトリに設置して設定完了となります。

【WordPressサイトの場合】
WordPressサイトの場合はWordPressをインストールした場所によって、下記の通り robots.txt の仕組みが異なります。しかし、手動で作成したrobots.txtファイルをアップロードすれば、アップロードファイルの方が優先されるので、検索避けを手動で設定する場合はあまり意識しなくて良いかと思います。

・ ルート直下にインストールした場合：仮想robots.txtとなります。
　 （アクセスがあった場合に自動生成されるファイルで、FTPで探してもファイルの実態はありません）
・ サブディレクトリにインストールした場合：仮想robots.txtは生成されません。

2-3. 一部のキーワードを検索避け

検索結果には表示させたいけどページ内の特定のキーワードは検索避けしたい、といったケースもあるかと思います。（冒頭で紹介したような社員名など）ただ、Googleに関して言えば、一部のキーワードのみを検索避けする仕組みはありません。

もし、どうしても対応が必要となった場合は、テキストを画像に置き換えたり、JavaScriptで動的に生成することでインデックスを回避することが可能です。ただ、そうした対応はクローキング（検索エンジンとユーザーに異なる表示をすること）とみなされ、ページが正しく評価されない可能性もあるので注意しましょう。

おわりに

今回は検索避けの設定方法についてご紹介しました。サイトは公開すれば自然と検索結果に反映されるため、Webデザイナーの方でも検索エンジンの仕組みについて詳しく知らなかったという方もいるかと思います。しかし、検索結果に表示される仕組みを知ることで、作成したサイトを意図した形で検索結果に表示・非表示させることができるようになります。SEO対策の基本を身につけておくことで検索結果からの流入を増やすこともできると思いますので、しっかり対処していきましょう。

皆さんはWeb制作をする際、画像の拡張子をどのように使い分けていますか？
写真等はjpeg/jpg、透過画像はpngでしょうか？実はWebPでは写真も透過画像も表現できる上、さらに画像のファイルサイズも大幅に削減できます。
WebPに変換できる無料のWebサービスはいくつか存在しますが、枚数によってはアップロードに時間がかかったり、容量に制限があることも多いです。
そこで今回は、わずか数ステップでローカルにWebP変換の環境を作る方法をご紹介します。

1. WebPとは？

WebPは2010年にGoogleによって開発された画像フォーマットです。
冒頭で述べた通りファイルの軽量化ができるのとフォーマットを統一できるということが特徴です。
以前まではInternet Explorer（以下「IE」）に対応していないというデメリットが有りましたが、2023年7月現在IEのサポートは終了しており、「Can I use」のWebP対応状況もIE以外対応済みのため、基本的にはWebPに移行して問題はないでしょう。
それぞれの拡張子の違いについては、過去の記事「JPG、GIF、PNG、SVG、WebPのメリット・デメリット」でもご紹介していますので、詳しく知りたい方はそちらをご参照いただければと思います。

2. 準備

2-1. WebPをインストールする

jpeg/jpgやpng画像をwebpに変換するには「cwebp」というコマンドをインストールする必要があります。

「cwebp」はMacのパッケージ管理ツールである「Homebrew」からインストールできます。

パッケージ管理ツールとは、PythonやNode.jsといったプログラミング言語や、 SlackやZoom等といったアプリケーションのインストール・管理ができるツールです。
個別でインストールするよりも管理が楽になる等のメリットがあります。
Homebrewのインストール方法や使い方については解説されているサイトが多くありますので、今回の記事では割愛させていただきます。

今回はwebpというパッケージをインストールするので、ターミナルを開き以下のコマンドを実行してください。

$ brew install webp

実行後、「brew list」コマンドを実行して、一覧に「webp」があればインストールに成功しています。

2-2. Shellスクリプトを用意する

変換したい画像をまとめた任意のフォルダに空のテキストファイルを作成し、以下を貼り付けます。

#!/bin/sh
for file in `find . -type f -name "*.jpg" -or -name "*.jpeg" -or -name "*.png"`;
do
cwebp $file -o "${file%.*}.webp" >/dev/null 2>&1
done

ファイル名は任意のファイル名、拡張子は「.sh」で保存します。今回は「webp.sh」にしましょう。

こちらのシェルに「フォルダの中を上から順に見ていき、jpg/jpeg/pngがあればwebpに変換する」という処理が書かれています。

2-3. Shellスクリプトに実行可能な権限を付ける

Shellスクリプトは作った段階では「実行できない状態」ですので、ターミナルで以下のコマンドを実行してファイルを実行できる状態にします。

$ cd path/to/dir  //Shellスクリプトがあるフォルダに移動する
$ chmod 755 webp.sh  //ファイルを実行可能な権限に変更

以上で準備は完了です。

3. 実行方法

webp.shがあるフォルダに変換したい画像を置きます。



ターミナルで以下のコマンドを実行します。

$ ./webp.sh  //シェルスクリプトを実行

設置した画像ファイルの数だけwebpファイルができていれば成功です。


ファイルの容量もかなり少なくなっているのがお分かり頂けると思います。
また、画像の劣化も無く容量のみを削減することができるため、Webサイトの見た目が悪くなるということもありません。

【画像比較】

左：sample1.jpg(2.4MB) / 右：sample1.webp(953KB)
 

 

左：sample2.png(13.6MB) / 右：sample2.webp(953KB)
 

おわりに

いかがでしたでしょうか？初期設定が必要ではあるものの、変換自体はとても簡単にできたのではないかと思います。
昨今はモニターの解像度も上がってきており、高解像度の画像をたくさん使う機会も多いと思います。
そんなときにWebの圧縮サービスに画像をアップロードするのではなく、ローカルで作業することができれば作業の効率化に繋がります。
是非この機会に導入してみてはいかがでしょうか。

WordPressサイトを保守運用するにあたっては、データを定期的にバックアップしておくことが重要です。バックアップを取っておくことで、急なトラブルがあった際にもサイトを元の状態に戻すことができます。

しかし、WordPressで構築されたサイトは静的サイトと比べると取り扱いファイルが多く、どのようにバックアップを取ればよいのか迷いますよね。今回はWordPressサイトの様々なバックアップ方法について紹介いたします。

1. バックアップが必要な理由

WordPressで構築されたサイトは更新管理や機能追加など便利ではありますが、静的サイトと比べると様々な要因によってトラブルが発生する可能性があります。例えば、サイトのセキュリティ侵害、サーバーやデータベースのエラー、WordPress本体・プラグインのバージョンアップによる影響などです。

こうしたトラブルが起きないよう、事前にセキュリティ対策を行うことは基本ですが、それでも運用を続けていくと予期せぬトラブルが生じることがあります。特にデータベースのデータが失われてしまった場合は、元の状態に戻すことが困難になります。トラブルはいつ発生するか予測できないからこそ、サイトデータはこまめにバックアップして、いつでも元の状態に戻せるよう備えておく必要があります。

2. バックアップするデータ

WordPressサイトは静的サイトのようにHTMLやCSSだけで構成されているわけではないので、投稿機能で作成されたコンテンツもバックアップしておく必要があります。WordPressサイトでバックアップすべきデータは主に以下の2種類です。

1. 【Webデータ】
静的ページを構成するファイル。デザインテーマ、アップロードファイル（画像、動画、PDF…）、WordPressプラグインなど。

2. 【データベース】
動的ページを構成するファイル。投稿記事、カテゴリ、コメントなど。

3. バックアップ方法の紹介

3-1. レンタルサーバーの機能を利用

レンタルサーバーを利用している場合、あらかじめバックアップ機能が備わっている場合があります。これらの機能を活用することで、手動でバックアップを作成する手間を省くことができます。

【エックスサーバーの場合】
エックスサーバーでは全プランに「自動バックアップ」が標準機能として備わっています。サーバー上のデータを毎日自動でバックアップしており、Webデータ、MySQL（データベース）のデータを過去14日分、保持してくれます。

申請すればバックアップデータの提供もしてくれるので、特に対策をしていなかった場合でも、エックスサーバーを利用中の方は、最新データを復旧させることができるかもしれません。エックスサーバーでサイトを運用している方は、ぜひ活用していきましょう。

自動バックアップ機能 | レンタルサーバーならエックスサーバー

【さくらインターネットの場合】
さくらインターネットでは「バックアップ＆ステージング機能」が提供されています。ただし、こちらを利用するにはいくつかの前提条件があり、事前に手続きを行う必要があります。

WordPressのスナップショットを作成したい（バックアップ&ステージング） | さくらのサポート情報

前提条件に当てはまらない場合は、次の節で紹介しているWordPressプラグインによるバックアップ方法をおすすめします。

3-2. プラグインを利用

WordPressにはバックアップ用のプラグインがいくつかありますが、その中でもおすすめなのが「BackWPup」です。BackWPupは自動バックアップの便利な機能が揃っており、下記のように細かく設定することができます。

・バックアップのタイミング（毎月、毎週、毎日、毎時）を設定できる。
・バックアップしたい対象ファイルを選択できる。
・バックアップファイルの保存先を指定できる。

以下、BackWPupの簡単な使用方法について紹介します。

1. WordPress管理画面の「プラグイン」から「BackWPup」をインストールします。
2. インストールが完了したら、「有効化」をクリックしてプラグインを有効化します。
3. プラグインの管理画面にアクセスし、「新規ジョブを追加」をクリックします。

4. バックアップジョブの設定を行います。バックアップの種類、対象ファイル、保存場所などを選択します。

5. スケジュールを設定して自動バックアップを行う場合は、タイミングや頻度を指定します。

6. 設定が完了したら、ジョブを保存します。
7. 必要に応じて、手動でバックアップを実行することもできます。


WordPressサイトの定期バックアップの方法としては、BackWPupを利用しておけば問題ないかと思います。

3-3. FTPソフトを利用

FTPソフトを利用して手動でファイルをダウンロードしてバックアップする方法もあります。ただし、WordPressサイトの場合は、WebデータとMySQLデータベースのバックアップが必要なので、サーバーからだけでなくphpMyAdmin等からデータベースを書き出す必要があります。

FTPソフトでの手動バックアップは、時間も手間もかかるうえ、操作ミスなどによるエラーも起きやすいので、定期バックアップには向いていませんが、一手段として知っておくと良いでしょう。

おわりに

今回はWordPressサイトのバックアップ方法について紹介しました。
保守管理しているサイトが表示されないなど、急なトラブルに対処するには定期バックアップしておくことが大切です。重要なデータの損失を防ぐためにも、バックアップの作成は必ず怠らないようにしましょう。

Visual Studio Code（以下VS Code）は2015年にリリースされて以来、多くの開発者に利用されているコードエディタです。
以前「VS Code おすすめプラグイン紹介」の記事で便利なプラグインをご紹介させていただきましたが、今回は、ショートカットキー（以下ショートカット）に焦点をあててご紹介します。
ショートカットはGUIから行える操作をキーボードで行えるようにしたものなので、全てを覚えなくても操作に支障はありませんが、普段繰り返しで行っているような作業は、ショートカットで実施することによって開発を効率化することができます。ぜひ参考にしていただけたら幸いです。

1. よく使うショートカット

こちらは非常に登場する機会が多いショートカットになります。
コピー&ペーストやアンドゥはもちろん、コーディングをしていて意外に多いのは「コメントアウト」の操作だと思うので、「Ctrl/cmd + /」は覚えておくと良いでしょう。

2. 検索系のショートカット

ファイル内もしくはフォルダ全体の文字列の検索/置き換えをするショートカットです。
テキストの一括修正やファイルパスの一括修正で効果を発揮します。

「選択した単語を一括選択」は、検索と置換えに近い操作が行なえます。
単語を選択した状態で、「Ctrl/cmd + Shift + L」を入力すると、ファイル内の同じテキストが全て選択された状態になります。

【選択した単語を一括選択】

3. 移動系のショートカット

行の先頭/末尾へのカーソル移動と、行の移動は地味によく使うので覚えておくと良いでしょう。

【行の移動】

4. その他のショートカット

「選択した行の複製」は、複数行の複製も可能なので、例えばdivで囲っている要素が増えた場合のレイアウトを確認したい、といった際に効率的に作業できます。

【選択した行の複製】

おわりに

今回はVS Codeでよく使うショートカットキーをご紹介しました。
基本的なものではありましたが、意外とGUIから行っている操作もあったのではないでしょうか？

VS Codeに限らず、ツールを使いこなす上でショートカットを知っているかいないかは、作業効率に影響してきます。
是非この機会にVS Codeや普段から使っているツールのショートカットを調べてみてください。