SEOと技術に関して頂いた質問、”これって意味あるの？”

SEOと技術に関して頂いた質問、”これって意味あるの？”

みなさん、こんにちは。

今回はSEOに関係あるのかどうか、考える方が多い分野について書いてみようと思います。

昨年末（2015年末）から当サイトに色々な手を加えてたりします・・・さり気なく。笑
見た目的に変わったことについては見て分かることですが、ソース上だけの改変はなかなか分かりませんよね。

しかし、そういう見えない部分の改変で色々な動きを見た気がしました。
もちろん、見た目も含めてというところですが、色々な動きが出ています。

ということで、早速オフィシャルなコーポレートサイト含め、様々なサイト様に提案をさせて頂きました。
そしたら、やはり色々なご質問を頂くんですよね。
ということで、そこで熱々と話させて頂く内容を書いてみようという内容です。

OGPは「Open Graph Protocol」の略でして、ソーシャルメディアとデータの受け渡しに使われるメタ属性です。
平たくいえば、facebookに渡したいデータやTwitterに渡したいデータをメタタグでつくっておく・・・というモノです。

このOGPの設定って検索順位の要因になったりするんですか？

OGPについて話をすると、このように聞かれることが多いです。

結論から言ってしまうと、直接的な評価にはなりませんよ・・・というところです。
OGPのデータについては評価の対象になってないようですので、検索順位期待のためのモノとしてみるのは厳しいと思われます。

ただしかし、OGPを設定するとSNS上では思った通りの表示をしてもらうことが出来ます。
ですので、クリック率が変わったり、なかなか難しい話を端的に分かりやすく表示することが出来るため、見込み領域を顕在化させるきっかけになるかもしれませんよね。
そして、リピートユーザーが検索エンジン経由で当該サイトを探したりすることもあるため、データの蓄積がモノを言うようになりますよね。
ですので、直接的に検索順位には貢献しないかもしれませんが、二次・三次的に何かしらの影響力があってもおかしくないというところです。

当サイトもそうですが、OGPを設定してからGoogle Analyticsのデータに変化がおきました。
数字の変化もそうですが、検索クエリや滞在時間などなど、色々変わったと感じています。
当サイトのトップページにTwitterの埋め込みがあります。
そのタイムラインには「概要を見る」というクリックポイントがありますので、それを見て頂ければと思います。

しかし、このOGPを設定してから、Googleのサイト内検索での画像の表示内容が変わった気がします。
Googleの検索結果にも何かしら影響を与えていることを考えると、オフィシャルなアナウンスなどは出てないと思いますが、何かしらの影響力はあるのかもしれません。

ちなみにですが、当サイトでは以下のような感じでメタタグを記述しています。
それぞれの中身については半自動で挿入するようにしていまして、本ページの内容をそのままコピペしています。

<link rel="publisher" href="https://plus.google.com/+OosakawebJp_seo/" />

<meta property="fb:app_id" content="201305399914752" />
<meta property="article:publisher" content="https://www.facebook.com/semlabo" />
<meta property="og:title" content="SEOと技術に関して頂いた質問、”これって意味あるの？” - SEO対策 - コラム | SEMラボラトリー" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.oosaka-web.jp/column/seo/160128/" />
<meta property="og:image" content="https://www.oosaka-web.jp/column/img/column_27_160128.gif" />
<meta property="og:site_name" content="株式会社SEMラボラトリー | SEM Labo" />
<meta property="og:description" content="SEO対策カテゴリに投稿したコラム記事「SEOと技術に関して頂いた質問、”これって意味あるの？”」です。" />

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@semlaboratory" />
<meta name="twitter:title" content="SEOと技術に関して頂いた質問、”これって意味あるの？” - SEO対策 - コラム | SEMラボラトリー" />
<meta name="twitter:description" content="SEO対策カテゴリに投稿したコラム記事「SEOと技術に関して頂いた質問、”これって意味あるの？”」です。" />
<meta name="twitter:image" content="https://www.oosaka-web.jp/column/img/column_27_160128.gif" />

上記の細かな仕様については、以下のリンクからご確認下さい。

• Google がサポートしているメタタグ
• デバッガー - 開発者向けFacebook
• Card Types | Twitter Developers

jQueryって、iPhoneから見たりすると重いことがあるよね？
それは大丈夫なの？

はい、それは大丈夫にします・・・というところです。笑

jQueryの挙動が重いのは、物理的に言えば、以下のケースに当てはまるんじゃないですかね？

• 閲覧デバイスのスペックが低い。
  2年前のandroidは結構怪しいことが多い気がします。
• サーバースペックが低い。
  最近のサーバーは大丈夫なことが多いですが、古くからあるサーバーだった場合、何かとカクつくことが多い気がします。
• jQueryをたくさん書いてて、そもそも読み込み量が多すぎる状態。
  最近のソースであれば大丈夫なことが多いですが、デバイスのスペック以上にソースがありまくる場合、重い感じがします。
• jQueryやprototypeを幾つか組み込んでて、ファンクションが干渉してたりしている。
  干渉した場合は干渉しているうちのどれか一つだけしか動きませんが、外部から呼び出したりしてて読み込みに失敗した時など変な挙動になります。

ということで、UIに動きを入れて重いというのは、デバイスやインフラ依存の問題を解決出来る場合、ある程度回避出来るんじゃないかなと思っています。

jQueryの組み込みも、これ自体は検索順位をあげるきっかけにはなりませんが、ユーザーのリピートにつながる場合があるので、やはり見過ごせない時もあります。
また、新規のユーザーに何かとインパクトを残すという意味でも必要な要素なのかもしれません。
そして、二次的・三次的に影響が出るかもしれないことを無視し続けると何も蓄積しませんので、やはり意味はある改変になるのではないでしょうか。

当サイトのロゴは全てSVGに変えました。
だいぶと綺麗に表示されるようになりました。笑

スマホ対応されているサイトには必須対応かな？なんて思ってたりするんですが、なかなか気づかれないことが多いようで・・・orz
目立つようなそうでもないような・・・そんな感じですが、やっぱり綺麗に表示されるに越したことはありませんよね。

あと、SVGの活用についてはGoogleも推奨しています。

画像 | Web Fundamentals - Google Developers

インデックスに登録されるようですし、何ら問題なく、むしろレスポンシブは好ましいですよね、というところです。
ですので、ロゴなどの画像についてはSVGにすることで何かしらの影響が出てもおかしくはありません。

当サイトでは、以下のような感じでSVGタグを記述しています。

<svg xmlns="http://www.w3.org/2000/svg" width="202.362" height="39.058" viewBox="0 0 202.362 39.058">
<g>
<title>SEM Labo</title>
<desc>SEO対策（検索エンジン最適化）の株式会社SEMラボラトリー</desc>
<path d="M12.915 6.345c-2.25 0-5.13 1.125-5.13 3.735 0 3.24 4.455 4.5 6.93 5.354 9.45 3.15 11.385 7.695 11.385 11.97 0 5.22-3.735 11.654-13.23 11.654C6.48 39.058 0 35.638 0 28.484c0-3.825 2.295-6.075 2.745-6.075.765 0 0 9.133 9.674 9.133 3.42 0 6.39-1.485 6.39-4.275 0-3.285-4.05-4.635-6.66-5.444-9.855-3.06-10.936-7.515-10.936-11.34C1.214 6.704 3.78.27 12.914.27c6.525 0 11.16 3.465 11.16 4.77 0 1.26-2.34 5.355-3.6 5.355-1.125 0-2.88-4.05-7.56-4.05z" fill="#E50013" />
<path d="M31.725 38.383c-2.385.09-1.665-1.485-1.89-10.62 0-6.03 2.475-26.82 3.78-26.82h17.73c.54 0 2.16-.134 2.16.766 0 .36-2.88 6.66-3.466 6.66-.766 0-2.116-2.116-6.526-2.116-3.104 0-6.39 1.845-6.39 6.165 0 .944.18 2.564 1.44 2.564 1.44 0 4.635-2.115 8.415-2.115.54 0 2.024.18 2.024.944 0 .045-2.52 7.38-3.06 7.38-.45 0-2.16-.9-3.915-.9-2.296 0-5.626 1.664-5.626 6.12 0 3.6 1.89 6.21 5.67 6.21 4.454 0 7.2-2.97 8.28-2.97.674 0 3.69 7.603 3.69 8.054 0 .855-1.126.675-1.666.675H31.725z" fill="#4CB1E5" />
<path d="M59.174 38.383c-1.125 0-2.475.855-2.475-16.02C56.7.133 59.04.943 59.803.943h4.14c1.755 0 2.385 0 4.59 3.016 4.23 5.804 4.5 9.09 5.4 9.09.675 0 .945-3.286 5.715-9.09C82.17.9 82.843.943 84.6.943h3.51c.764 0 3.104-.81 3.104 21.42 0 16.874-1.35 16.02-2.475 16.02h-5.76c-.54 0-1.62.134-1.62-.676 0-.63 2.564-8.73 2.564-20.474 0-.945.135-6.48-1.35-6.48-1.305 0-3.015 4.455-3.465 5.535-3.78 9.224-2.25 13.454-5.266 13.454-3.78 0-2.295-4.23-6.3-13.455-.45-.99-1.935-5.536-3.33-5.536-1.485 0-1.44 5.535-1.44 6.48 0 11.744 2.835 19.844 2.835 20.474 0 .81-1.08.675-1.62.675h-4.816z" fill="#EBD200" />
<path d="M110.653 38.383c-2.385.09-1.665-1.485-1.89-10.62 0-6.03 2.475-26.82 3.78-26.82h7.155c.315 0 .855.09.855.9 0 .99-5.22 10.666-5.22 23.085 0 6.21 2.7 7.695 5.175 7.695 4.14 0 6.66-3.825 7.785-3.825.855 0 2.61 8.685 2.61 8.91 0 .9-1.395.675-1.935.675h-18.315zM143.413 19.664c1.305-.225 2.34-.45 2.34-1.935 0-2.296-2.385-3.51-4.365-3.51-4.59 0-3.915 3.87-4.905 3.87-1.44 0-3.015-1.756-3.015-3.69 0-3.33 3.734-5.49 7.875-5.49 1.44 0 7.604-.046 9.9 6.253.944 2.61 1.034 15.93 1.034 17.504 0 1.98.36 3.15.36 4.68 0 .945-4.23 1.035-8.235 1.035-10.844 0-11.61-5.58-11.61-8.28 0-5.668 5.582-9.583 10.62-10.438zm2.79 7.875c0-1.576.27-3.466-1.89-3.466-2.655 0-5.445 2.25-5.445 4.995 0 2.52 2.205 4.004 4.59 4.004 2.655 0 2.745-1.35 2.745-3.555v-1.98zM162.988 0c.54 0 1.62 0 1.62.99 0 .36-1.35 4.86-1.35 7.515 0 .72.135 1.44.99 1.44.495 0 1.125-.225 1.845-.495.765-.225 1.665-.54 2.61-.54 3.825 0 9.18 3.42 9.18 12.915 0 5.174-1.306 9.314-4.59 13.05-1.3051.53-3.69 3.51-7.11 3.51h-7.965c-1.575 0-1.395-15.075-1.395-16.11 0-2.115-.18-22.274 1.845-22.274h4.32zm8.82 22.364c0-7.38-3.196-9.18-5.085-9.18-3.195 0-3.825 1.576-3.825 8.146 0 9.72 2.295 9.54 3.465 9.54 4.41 0 5.444-5.176 5.444-8.506zM179.772 23.94c0-7.246 3.465-15.03 11.295-15.03s11.294 7.785 11.294 15.03c0 10.574-6.12 15.118-11.293 15.118-5.174 0-11.295-4.544-11.295-15.12zm17.01-1.126c0-3.555-1.26-8.595-5.714-8.595-4.455 0-5.715 5.04-5.715 8.594 0 3.6 1.17 8.73 5.715 8.73 4.544 0 5.714-5.13 5.714-8.73z" fill="#4C4646" />
</g>
</svg>

ということで、導入すべきことはSEOの一環として提案しているんですが、これはこれで取り組んでたら面白いですよ。
こういうポジティブな変化は喜んで取り組むべき変化かなと思っています。

ただ、SEO云々もそうですが、それらの持つ役割はきっちりと理解しておきたいところです。

メタタグはブラウザに情報を伝えるためのモノで、jQueryなどはそもそもUIに動きを出すためのモノで、SVGは画像を綺麗にするための技術であって・・・と、そもそも論的に言えば何もSEOには関係ありませんが、ユーザーへの配慮こそSEOですよね？
ということで、ちょっとしたことでも構わないので、ポジティブな改変は是非とも導入して頂きたく思う今日この頃です。

執筆 : 清水 隼斗