2018年5月29日火曜日

Google のガイドライン から読み解く画像検索 SEO

Search Console ヘルプ の画像に関するガイドラインが更新されました。

画像公開に関する Google のガイドライン

今までのありきたりな内容より有用性の高い情報が追加されています。Google は最近、画像検索に力を入れているそうなので、その影響かも知れません。初めて聞く内容や確証のなかった理論についても明文化されています。

Google のガイドラインの記述に沿って、画像検索 SEO について思うところを自身の経験と照らしあわせて書き付けていきたいと思います。

alt を書きましょう!といったウェブマスターさんがうんざりする内容はないので安心してください。

2018年4月13日金曜日

Inkscape SVG を Adobe Illustrator ファイルに変換

Inkscape で作成された SVG ファイルを、.ai ファイルに保存して、最終的にプレーン SVG を出力する方法です。

Inkscape SVG を Illustrator で編集して、.svg で出力しようとすると、エラーが表示されたり大きくずれたりします。これは、知らないとまったく理由がわからず対処できません。

この作業を完了できませんでした。不明なエラーが発生しました。

Wikimedia Commons から頂いてきた、Inkscape Logo.svg を例にして解説します。

Inkscape Logo.svg をテキストエディタで開くとすぐに次の構文が見えます。

xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

これは、ネームスペースといって「Inkscape や前身の sodipodi 特有の命令を使います」 という宣言です。

本文にも SVG には見慣れない記述が見つかります。

sodipodi:version="0.32"

inkscape:version="0.48.4 r9939"

これが、Inkscape SVG を Illustrator で扱う場合にエラーになる直接の原因ですが、他にも注意したい箇所がいくつもあるので、順番に解説します。

必要なもの
InkscapeInkscape Portable と Illustrator

Illustrator で編集する前に下ごしらえをします。

  1. Inkscape Logo.svg を Inkscape で開きます。
  2. ファイルメニュー、ドキュメントのクリーンアップ
  3. 名前を付けて保存。プレーン SVG を選択して保存します。
  4. 保存した.svg ファイルをメモ帳などテキストエディタで開きます。

    <title>…</title>

    <metadata>…</metadata>

    を削除します。

まだ不要なネームスペースが残りますが、編集には影響ないのでそのままにします。

SVG を Illustrator で開きます。

この項目が最も重要で、Inkscape SVG 以外の 普通の SVG を扱う場合にも該当します

SVG をそのまま保存してはいけない

新規ドキュメントを作成して、svg のパスをコピーして貼り付けます。こうしないと座標がずれますviewBoxを大きく外れてなにも表示されないこともあります。ずれる理由がないので、おそらく Illustrator のバグです。

一旦、新規ドキュメントを .ai ファイルで保存します。

この状態が、エラーがない svg を出力できる最低ラインですが、もう一つ重要な作業があって、こちらもやったほうが良いです。

transform 属性が付く

出力した.svg に 意図していない transform 属性が付くことがあります。

transform="matrix(0.9905442,0,0,0.9905442,0.6051535,0.604136)"

これも知らないと、ちゃんと表示できているだけに気づかないと思います。

transformが付くのはグループです。

.ai ファイルを開いて、グループ複合パスクリッピングマスクレイヤー を一旦、解除してすぐに元のグループに戻します。グループ アピアランスには注意。

これは、大きなファイルだと対処しきれないので、どこかで妥協することになります。

再グループ化すると、なぜ正しくなるのか不明で これも多分 Illustrator のバグです。

これで完了です。

Inkscape SVG はパスに id が付いているので、削除するとより綺麗になります。

SVGOMG を通すと、不要な id のみ削除できます。オプションの説明が長くなるので解説は省きますが、基本的に SVG ファイルを画面にドロップするだけです。実は先の <title> を削除する手順のところでも SVGOMG を通すとクリーンになります。

自分で作成する時には SVG は必ず最終出力にします。

2017年8月18日金曜日

2017年7月9日日曜日

SVG 画像と Google 検索 SEO と HTML5

Web制作で SVG ベクター画像をよく使っています。経験してみて初めて分かった現在の SVG を取り巻く環境や Google 検索と SVG の関係についての考察記事です。

まだ SVG を使ったサイトさんは少ないですが、ベクトルの画像をWebで表現するには、Flash を除くと、現実的に SVG しかないので、これから増えていくのは確実です。

先行して使ってみての経験則になりますが、ちょっとだけ詳しくなったので、これから SVG を使ってみようというウェブマスターさんの参考になればと思います。

svg logo

SVG は画像

検索エンジンにとって SVG はテキストデータではなく、見ているのは最終的にレンダリングされた画像として見える SVG のみ。

Google 検索が、SVG をインデックスの対象としたのは 2010年9月。その頃から今まで多少の変化は見られますが、認識能力はあまり変わっていない印象を受けます。

Google 検索エンジンは、xlinktitledesctext、著作権情報などの SVG 内の情報を一切見ていない

2017年4月13日木曜日

Organize Search Engines 後継

Firefox アドオンの Organize Search Engine は、検索のパラメーターを簡単に変更設定できる優れた拡張機能でしたが、現在は開発を終了して公開もされていません。

Google.comへ行く方法や余計な検索パラメーターを除いたり、50件表示にするのに必要なので、.xpiファイルを保存して継続して使い続けていましたが、それも、とうとう動作しなくなってしまいました。

Firefoxを低いバージョンのまま維持するのも難しくなって困っているところ、有り難い事に、開発を継続されている方が見えました。

2017年2月1日水曜日

2016年11月22日火曜日

Twitter画像がJPEGへ劣化されるのを回避する方法

Twitter で PNG でシェアした画像が、勝手に JPEG へ変換される。

たまたま、ツイートを見かけたので確認してみると、指摘されたとおり、.Jpg へ劣化している。

元画像.png
no-transparent.png

Twitter画像.jpg
twitter-transparent.jpg

画像を作成して、PNGで保存しているクリエイターなら、これが、いかに哀しい出来事かわかるはず。

「JPEGがいかん!」というわけじゃなくて、JPEGは風景写真などには、とても向いています。ただベクターからおこしたロゴなど輪郭のクッキリした物は、PNGです。JPEGで作られたロゴを、見るひとが見れば一発で見分けがつくほど違います。

これを回避する方法も先ほどのツイートに載っていて、確認もできました。

透過PNGは変換されません。
ただし実際に透過ドットがある必要があります。

この有益な情報を踏まえて、もうひと工夫してみました。