続・アイコンフォント

すっかり梅雨入りしましたね。
昼休みにグァバジュースを買って、トロピカル気分で働いております、國宗です。

さて、以前岩井さんがアイコンフォントについて記事を書いていましたが、 今回はわかりやすく、もう少し深く掘り下げたアイコンフォントのお話をしたいと思います。

そもそもアイコンフォントって何なの?

アイコンフォントを分かりやすく説明しますと、 「機能のいっぱいある、アイコン集のフォントをブラウザ上で動かす」という事です。 これだけだと、まだ分かりにくいので、 まずはOpentypeというフォントの形式を説明します。

Opentypeとは……

Opentypeには、リガチャー(合字)、スウォッシュ(単語の頭や末にアクセントをつける)、分数など様々な機能があり、 これを使うと、ただキーボードで入力した文字がプロフェッショナルの組版に変わるのです。 リガチャーを例に上げますと、
例えば「Office」という文字を入力します。(illustrator CC、Adobe Garamond Premium proを使用)
欧文合字機能をONにすると……

Officeの「ffi」の部分が、1文字になりました。 これは、フォントの作り手側が意図的に「f」と「f」と「i」が入力された場合に1文字の「ffi」に変換しているのです。 fiやflの黒く中途半端な部分をなくし、本文を読みやすくさせるためです。

さて、これからアイコンフォントの話に移ります。今までの「ffi」を応用したのがアイコンフォントです。僕のよく使っている「Symbolset」のサイトです。

アニメーションの文字の部分をクリックするとテキスト入力に切り替わります。 この状態で「love」とキーボードで入力して下さい。

すると、「l」、「o」、「v」とここまでは、普通のテキストなのですが、
最後の「e」を入力すると「♥」になりました。

https://symbolset.com

これがアイコンフォントの使い方です。

まとめ

【メリット】

  • 画像の代わりにテキストを入力しているので、SEO的に良い。
  • ビットマップの画像データではないので、拡大縮小しても汚くならない。Retinaもバッチリ。
  • CSSでの色の変更や装飾も自由自在。

【デメリット】

  • IEでもWebフォントを読み込めますが、クロスブラウザでつかうには、
    様々な種類のアイコンフォント形式を読み込まないといけない。

また、僕は正しい使い方ではないのですが、アイコンフォントを通常のフォントとしてインストールし、 カンプデザインにも使ったりしています。
こうする事で、いちいちアイコン集を探す手間が省けるので、 重宝しています。 ただし、この場合は画像ファイルになってしまうので注意が必要ですね。

機会があれば是非お試しください。

PDFファイルのSEOについて

ディレクターの武士です。

コーポレートサイトを制作させていただいていると、「PDFファイルを検索結果に表示させたい」「PDFが検索結果に出ないようにしてほしい」などのご要望を承ることがあります。
今回はPDFファイルのSEOについて解説します。
 


■PDFファイルは検索エンジンに認識される?
サーバにアップされたPDF文書は、基本的にHTMLと同じように検索エンジンにインデックスされます。
検索される内容は文書内の文字列(テキストコンテンツ)およびメタデータです。
文書内の画像は認識されないようです。


■PDFファイルのSEO対策
PDFファイルはそのままサーバにアップしても検索エンジンにインデックスされますが、よりSEO対策を強化するには下記の2つの方法があります。
 

(1)文書のプロパティ(メタ情報)を設定する

Adobe Acrobatの場合、ファイル→プロパティを選択すると「文書のプロパティ」編集画面になります。
「概要」タブで、タイトル、サブタイトル、キーワードを設定することで、検索エンジンに最適化されたPDFを作成することができます。

文書のプロパティスクショ

タイトル:HTMLの<TITLE>タグと同じ扱いになります。検索結果のタイトル(リンク部分)として表示されます。
サブタイトル:HTMLの<meta description>と同じ扱いになります。検索結果のスニペット(説明文)として表示されます。
キーワード:HTMLの<meta keywords>と同じ扱いになります。HTMLと同じように5個程度設定するのが良いかと思います。

※PDFのプロパティを編集するにはAdobe Acrobatなどの専用のソフトが必要です。
 

(2)リンク元のアンカーテキストを最適化する

Googleの公式見解によれば、検索結果に表示するタイトルの生成には、前述のファイル内のタイトル(メタ情報)と、“PDFファイルを指すリンクのアンカーテキスト”の2つの要素を使用しているとあります。

“PDFファイルを指すリンクのアンカーテキスト”とはどういう意味かというと、

PDFへのリンクテキスト(またはボタン画像等のALT)が「会社概要はこちら」の場合、検索エンジンに「会社概要がこちら」というタイトルでインデックスされる可能性があるということです。
SEO対策したいキーワードが「メディカルデザイン」「会社概要」の場合は、「会社概要はこちら」ではなく「メディカルデザイン会社概要はこちら」というアンカーテキストでPDFにリンクを設定するのが正解ということになります。

アンカーテキスト例

PDFの編集ソフトがなくて(1)の作業が不可能な方は、(2)だけでも対策しておくことをお奨めします。


■PDFを検索結果に表示させない、検索結果から削除するには
個人情報など、PDF文書内に検索されたくない内容が記載されている場合は、検索エンジンにインデックスされないよう対策する必要があります。
簡単な方法としては、PDF文書をパスワードで保護する、または暗号化することでクローリングを回避することができますが、ユーザライクな方法ではないのであまり現実的ではないでしょう。

ではどうすれば良いかというと、PDFファイルのクローリングは、.htaccessで制御することができます。
X-Robots-Tagという記述を用います。

・サイト内にあるすべてのPDFドキュメントを検索結果に表示させたくない場合

<Files ~ "\.pdf$">
Header set X-Robots-Tag "noindex"
</Files>

・「ファイル名.pdf」を検索結果に表示させたくない場合

<Files ファイル名.pdf>
Header set X-Robots-Tag "noindex"
</Files>

・「ファイル名.pdf」のクロールとインデックスを、2014年2月1日0時以降に終了させたい場合

<Files ファイル名.pdf>
Header set X-Robots-Tag "unavailable_after: 1-Feb-2014 00:00:00 JST"
</Files>

SEOに詳しい方ならお気づきかと思いますが、要はHTMLのヘッダーに記述するrobot metaタグや、robot.txtの記述方法(と概念)とほぼ同じです。
PDFの場合はmetaタグを埋め込むことができないので、 X-Robots-Tagを.htaccessに記述することで検索エンジンのクローラーを制御します。

既にインデックスされてしまっているPDFファイルを検索結果から削除したい場合も、X-Robots-Tagで指定すれば認識してもらえます。
ただ、おそらく一定の時間はかかると思いますので、急ぐ場合はGoogleウェブマスターツールのURL削除ツールも併せて使用することをおすすめします。