Twitter や Facebook のソーシャルメディアのシェアボタンを簡単に設置できるウェブサービスの AddThis の全ての機能が無料で使えるようになりました。
完全に無料です。有料ユーザーには払い戻しされます。
AddThis はこのブログにも設置されています。見えない時は広告ブロックをオフにすると AddThis ボタンを確認できます。
なぜ、無料なのか？
もっともな疑問です。AddThis Data Solutions が回答です。要するに、ビッグデータを利用したリサーチデータを提供するビジネスモデルに転換するようです。
日本で AddThis はあまり有名ではありませんが、世界ではトップクラスであり、なるほど、ビッグデータとして充分なアクセスがあります。
The 500 Most Important Websites on the Internet - Moz では、世界で 46位。
非常に有名なサービスなので試してみるのも良いかもしれません。が 実際に AddThis を使っている感想としては、設定画面が英語、さらにヘルプがパッパラパ～なので、少し難しいと感じます。
Search Console ヘルプ の画像に関するガイドラインが更新されました。
今までのありきたりな内容より有用性の高い情報が追加されています。Google は最近、画像検索に力を入れているそうなので、その影響かも知れません。初めて聞く内容や確証のなかった理論についても明文化されています。
Google のガイドラインの記述に沿って、画像検索 SEO について思うところを自身の経験と照らしあわせて書き付けていきたいと思います。
alt を書きましょう！といったウェブマスターさんがうんざりする内容はないので安心してください。
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 で扱う場合にエラーになる直接の原因ですが、他にも注意したい箇所がいくつもあるので、順番に解説します。
必要なもの
Inkscape か Inkscape Portable と Illustrator
Illustrator で編集する前に下ごしらえをします。
保存した.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 は必ず最終出力にします。
CSS の Padding に auto が効かない。
「今日は Padding の効きがよくないな」
スペルチェックやら見直してみても分からない。
もしや！と検索してみても、色々なところで確かに、padding: auto;と解説がある。
Web制作で SVG ベクター画像をよく使っています。経験してみて初めて分かった現在の SVG を取り巻く環境や Google 検索と SVG の関係についての考察記事です。
まだ SVG を使ったサイトさんは少ないですが、ベクトルの画像をWebで表現するには、Flash を除くと、現実的に SVG しかないので、これから増えていくのは確実です。
先行して使ってみての経験則になりますが、ちょっとだけ詳しくなったので、これから SVG を使ってみようというウェブマスターさんの参考になればと思います。
検索エンジンにとって SVG はテキストデータではなく、見ているのは最終的にレンダリングされた画像として見える SVG のみ。
Google 検索が、SVG をインデックスの対象としたのは 2010年9月。その頃から今まで表示方法の変化は見られますが、認識能力はあまり変わっていない印象を受けます。
Google 検索エンジンは、xlink、title、desc、text、著作権情報などの SVG 内の情報を一切見ていない。
Firefox アドオンの Organize Search Engine は、検索のパラメーターを簡単に変更設定できる優れた拡張機能でしたが、現在は開発を終了して公開もされていません。
Google.comへ行く方法や余計な検索パラメーターを除いたり、50件表示にするのに必要なので、.xpiファイルを保存して継続して使い続けていましたが、それも、とうとう動作しなくなってしまいました。
Firefoxを低いバージョンのまま維持するのも難しくなって困っているところ、有り難い事に、開発を継続されている方が見えました。
Google フォトから直リンを取得してウェブサイト上に画像を表示する方法です。
ダイレクトリンクを取得するまでのルートは狭いので細かく説明します。
