2018年12月20日木曜日

CSS スプライトは表示速度の改善にならない?

SVG の Target 属性による画像の切り替えは、1枚画像による background-potition での方法とは違い、速度や転送量の改善に効果が薄いことがあるようです。

SVG の URLフラグメントによる画像切り替えは、次のようなスタイルを追加した SVG ファイルを用意しておきます。

<svg>
<style>
<![CDATA[
g { display: none; }
g:target { display: inline; }
]]>
</style>
<g id="image1">
<rect x="1" y="6" class="st7" width="30" height="20"/>
</g>

<g id="image2">
<path d="M32,27.313C32,29.891,29.891,32,27.313,32H4.688C2.109,32,0,29.891,0,27.313V4.688C0,2.109,2.109,0,4.688,0 h22.625C29.891,0,32,2.109,32,4.688V27.313z"/>
</g>
</svg>

HTML から Target を指定して呼び出します。

<img src="splite-mail-soft.svg#image1" alt="">
<img src="splite-mail-soft.svg#image2" alt="">

当然、画像の読み込みは 1 回限りと思い込んでいましたが、実際はそうではありませんでした。

2018年9月20日木曜日

Googlebot が激増

Googlebot 乱舞。9月16日 から 17日、さらにそれ以降も、Googlebot のアクセスが半端ではない数に上っています。

平均が 367 で 5,235 ということは、14倍

これまでも、だいたい 20 日スパンで大きなアクセスがあったものの、せいぜい 3倍程度。中には 2桁前半の来訪数もあるので、いかに途方も無い数字なのかがわかります。

それで本題はなにか


2018年6月28日木曜日

な、なんと! AddThis が無料に!

Twitter や Facebook のソーシャルメディアのシェアボタンを簡単に設置できるウェブサービスの AddThis の全ての機能が無料で使えるようになりました。

AddThis is Now Free!

完全に無料です。有料ユーザーには払い戻しされます。

AddThis はこのブログにも設置されています。見えない時は広告ブロックをオフにすると AddThis ボタンを確認できます。

なぜ、無料なのか?

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 で扱う場合にエラーになる直接の原因ですが、他にも注意したい箇所がいくつもあるので、順番に解説します。


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 内の情報を一切見ていない