seoとjava script。 〜文書構造とチームと、時々、闇〜
TRANSCRIPT
SEOとJavaScript。 ～ 文書構造とチームと、時々、闇 ～
2016/01/16 WDF研修 「半歩先のSEOで効率よく結果を出そう」
DMM.com Labo Yuki Minakawa
自己紹介• 2015/09/01 ～DMM.com Labo 加賀デザイン部にフロントエンドエンジニアとしてJoinしました
• 業務では、HTML/CSS/JavaScript等の実装や開発環境の準備・宴会部長まで幅広くやらせて頂いてます :-)
ミナカワ ユウキ HP : kglabo.com
初LT
よろしくお願いします！
気になる
先に結論
極力、JS書かないようにしよう
極力、JSを書かないようにしよう
本日のアジェンダ
• 検索エンジンに反映されるまで
• 文書構造を意識する
• 理想と現実
検索エンジンに反映されるまで※前置き
検索エンジンに反映されるまで
検索エンジンに反映されるまで
1. 検索エンジンがクローラーを使ってページの情報を集める
検索エンジンに反映されるまで
1. 検索エンジンがクローラーを使ってページの情報を集める
検索エンジンGoogle / Yahoo 等
クローラー GoogleBot 等
検索エンジンに反映されるまで
1. 検索エンジンがクローラーを使ってページの情報を集める
情報あつめてきてー
検索エンジンGoogle / Yahoo 等
クローラー GoogleBot 等
検索エンジンに反映されるまで
情報あつめてきてー
検索エンジンGoogle / Yahoo 等
クローラー GoogleBot 等
わかりましたー
1. 検索エンジンがクローラーを使ってページの情報を集める
検索エンジンに反映されるまで
情報あつめてきてー
検索エンジンGoogle / Yahoo 等
クローラー GoogleBot 等
1. 検索エンジンがクローラーを使ってページの情報を集める
検索エンジンに反映されるまで
1. 検索エンジンがクローラーを使ってページの情報を集める
2. クローラーが集めた情報を検索エンジンがインデックスしていく
いただきます！
検索エンジンGoogle / Yahoo 等
クローラー GoogleBot 等
もってきた！
検索エンジンに反映されるまで
1. 検索エンジンがクローラーを使ってページの情報を集める
2. クローラーが集めた情報を検索エンジンがインデックスしていく
きろくしよう
検索エンジンGoogle / Yahoo 等 データベース
検索エンジンに反映されるまで
1. 検索エンジンがクローラーを使ってページの情報を集める
2. クローラーが集めた情報を検索エンジンがインデックスしていく
きろく完了
検索エンジンGoogle / Yahoo 等 データベース
検索エンジンに反映されるまで
1. 検索エンジンがクローラーを使ってページの情報を集める
2. クローラーが集めた情報を検索エンジンがインデックスしていく
検索エンジンGoogle / Yahoo 等 データベース
検索結果に表示
各種ブラウザ
ここまで覚えればOK
その中の、
途中の出来事
クローラー GoogleBot 等
なになに・・・？
途中の出来事
クローラー GoogleBot 等
・・・・・・・。
• クローラー 内容が理解できない問題
途中の出来事
クローラー GoogleBot 等
imgしか…無い…！
• クローラー 内容が理解できない問題
途中の出来事
クローラー GoogleBot 等
imgしか…無い…！
• クローラー 内容が理解できない問題
途中の出来事
クローラー GoogleBot 等
imgしか…無い…！今回はコレの話
文書構造を意識する
文書構造を意識する
• ユーザは表示されているページを見ている。
クローラー GoogleBot 等
見出しが無エ！
文書構造を意識する
• ユーザは表示されているページを見ている。
• クローラーはソースコードを見ている。
クローラー GoogleBot 等
テキスト無エ！
文書構造を意識する
• ユーザは表示されているページを見ている。
• クローラーはソースコードを見ている。
クローラー GoogleBot 等
altもそれほど入って無エ！
文書構造を意識する
• ユーザは表示されているページを見ている。
クローラー GoogleBot 等
imgしか…無い…！
文書構造を意識している
• クローラーはソースコードを見ている。<h1 class="entryTitle">1/16開催 WDF研修「半歩先のSEOで効率よく結果を出そう」</h1><p> WDFの2016年最初のセミナーは、SEOの第一人者でWDFに過去3回講演していただいている 住 太陽さんをお招きして、WDF研修「半歩先のSEOで効率よく結果を出そう」を開催します。 住さんからは、「直近のセミナーで話した内容すべてを詰め込んだ総集編」、 「内容の濃すぎるセミナー」というコメントをいただいています。 日々の運用のヒントが必ず見つかります。ぜひご参加ください。</p><h2>半歩先のSEOで効率よく結果を出そう</h2><p> ウェブマスターの手間と時間は何よりも大切なもの。効果の薄い最適化施策や、 PVばかりで売上につながらないコンテンツ作りに、大切な手間と時間はかけられません。 確実に、しかも、効率よく結果を出すには、集中すべきところとそうでないところを 切り分ける必要があります。 </p>
文書構造を意識している
• クローラーはソースコードを見ている。<h1 class="entryTitle">1/16開催 WDF研修「半歩先のSEOで効率よく結果を出そう」</h1><p> WDFの2016年最初のセミナーは、SEOの第一人者でWDFに過去3回講演していただいている 住 太陽さんをお招きして、WDF研修「半歩先のSEOで効率よく結果を出そう」を開催します。 住さんからは、「直近のセミナーで話した内容すべてを詰め込んだ総集編」、 「内容の濃すぎるセミナー」というコメントをいただいています。 日々の運用のヒントが必ず見つかります。ぜひご参加ください。</p><h2>半歩先のSEOで効率よく結果を出そう</h2><p> ウェブマスターの手間と時間は何よりも大切なもの。効果の薄い最適化施策や、 PVばかりで売上につながらないコンテンツ作りに、大切な手間と時間はかけられません。 確実に、しかも、効率よく結果を出すには、集中すべきところとそうでないところを 切り分ける必要があります。 </p>
…ほう。大見出しは「1/16開催 WDF..
文書構造を意識してない
• クローラーはソースコードを見ている。<b>1/16開催 WDF研修「半歩先のSEOで効率よく結果を出そう」</b><br> <br> WDFの2016年最初のセミナーは、SEOの第一人者でWDFに過去3回講演していただいている住 太陽さんをお招きして、WDF研修「半歩先のSEOで効率よく結果を出そう」を開催します。住さんからは、「直近のセミナーで話した内容すべてを詰め込んだ総集編」、「内容の濃すぎるセミナー」というコメントをいただいています。日々の運用のヒントが必ず見つかります。ぜひご参加ください。<br> <br> <b>半歩先のSEOで効率よく結果を出そう</b><br><br> ウェブマスターの手間と時間は何よりも大切なもの。効果の薄い最適化施策や、PVばかりで売上につながらないコンテンツ作りに、大切な手間と時間はかけられません。確実に、しかも、効率よく結果を出すには、集中すべきところとそうでないところを切り分ける必要があります。
文書構造を意識してない
• クローラーはソースコードを見ている。<b>1/16開催 WDF研修「半歩先のSEOで効率よく結果を出そう」</b><br> <br> WDFの2016年最初のセミナーは、SEOの第一人者でWDFに過去3回講演していただいている住 太陽さんをお招きして、WDF研修「半歩先のSEOで効率よく結果を出そう」を開催します。住さんからは、「直近のセミナーで話した内容すべてを詰め込んだ総集編」、「内容の濃すぎるセミナー」というコメントをいただいています。日々の運用のヒントが必ず見つかります。ぜひご参加ください。<br> <br> <b>半歩先のSEOで効率よく結果を出そう</b><br><br> ウェブマスターの手間と時間は何よりも大切なもの。効果の薄い最適化施策や、PVばかりで売上につながらないコンテンツ作りに、大切な手間と時間はかけられません。確実に、しかも、効率よく結果を出すには、集中すべきところとそうでないところを切り分ける必要があります。
…どういう事だってばよ！？
文書構造とは何だったのか
• クローラーはソースコードを見ている。
<img src="/images/ttl_h1_01.png" alt=""> <img src="/images/txt_01.png" alt=""><img src="/images/ttl_h2_01.png" alt=""> <img src="/images/txt_02.png" alt="">
つらい
お前は一体、何を言っているんだ。
※クローラーです
この件については、上に伝えさせてもらう。
※クローラーです
機会損失
美味しいソースをくれ！
※クローラーです
正しい文書構造、大事。
クローラー GoogleBot 等
JS CSS
クローラーはソースコードを みている
これは一体。
クローラーはどうしていいのか わからない！
クローラー GoogleBot 等
JS CSS
ああ、噂のJSですよね
クローラーの クローリング！MP が たりない！
クローラー GoogleBot 等
JS CSS
まだ勉強中なんですよね
？
プログレッシブ・エンハンスメント
役割を分ける
JS(インタラクション)を削除しても、 内容が通じる
CSS(スタイル)を削除しても、内容が通じる
役割を分ける
役割を分ける
役割を分ける
• HTMLは適切にマークアップ
• 見栄えに関わるものはCSS
• インタラクションはJSで
適切なマークアップ？
適切なマークアップ
• テキストがそのコンテンツを示すタグで囲まれている・見出しは<h◯>タグに、段落は<p>で囲まれている etc
適切なマークアップ
• テキストがそのコンテンツを示すタグで囲まれている・見出しは<h◯>タグに、段落は<p>で囲まれている etc
• HTML要素が正しく利用されている・<h1>タグ等を文字サイズを大きくする為ではなく、 見出しとして適切に利用する etc
適切なマークアップ
• テキストがそのコンテンツを示すタグで囲まれている・見出しは<h◯>タグに、段落は<p>で囲まれている etc
• HTML要素が正しく利用されている・<h1>タグ等を文字サイズを大きくする為ではなく、 見出しとして適切に利用する etc
• テキストにスタイル属性を直接的に含まない・<font>や<center>タグや<div style=“”> ・ちゃんとCSSに記載する
極力、JS書かないようにしよう
極力、JS書かないようにしよう
非同期コンテンツについて
• JavaScriptで動的に生成するコンテンツについては、クローラーは完全に理解する事ができない。
非同期コンテンツについて
• JavaScriptで動的に生成するコンテンツについては、クローラーは完全に理解する事ができない。
非同期コンテンツについて
• JavaScriptで動的に生成するコンテンツについては、クローラーは完全に理解する事ができない。
• HTML スナップショット？
非同期コンテンツについて
• JavaScriptで動的に生成するコンテンツについては、クローラーは完全に理解する事ができない。
• HTML スナップショット？・工数が掛かる・その前に構成的に問題ない？
非同期コンテンツについて
• JavaScriptで動的に生成するコンテンツについては、クローラーは完全に理解する事ができない。
• JavaScriptを切っても情報を、閲覧・ページ遷移できるように作る！
何でもかんでもJSで処理しない
何でもかんでもJSで処理しない
JSONのデータをJSでHTMLに描画
JSONのデータをJSでHTMLに描画
// HTML<body> <h1>艦隊一覧</h1> <ul> <li></li> <li></li> </ul></body>
何でもかんでもJSで処理しない
JSONのデータをJSでHTMLに描画
// JSON[ { "title": "叢雲", "genre": "駆逐艦", "note": “我々の業界ではご褒美です", "url": “https://murakumo.com” }, { "title": "島風", "genre": "駆逐艦", "note": “めっちゃ早い", "url": “https://simakaze.com” },]
// HTML<body> <h1>艦隊一覧</h1> <ul> <li></li> <li></li> </ul></body>
何でもかんでもJSで処理しない
JSONのデータをJSでHTMLに描画
// JS$.getJSON(“itemlist.json” ,function(data) { $(data).each(function){ $(“<h2><a href=“”+this.url+””>+this.title+”</a></h2>”) .appendTo(‘ul li’); }});// HTML<body> <h1>艦隊一覧</h1> <ul> <li></li> <li></li> </ul></body>
// JSON[ { "title": "叢雲", "genre": "駆逐艦", "note": “我々の業界ではご褒美です", "url": “https://murakumo.com” }, { "title": "島風", "genre": "駆逐艦", "note": “めっちゃ早い", "url": “https://simakaze.com” },]
何でもかんでもJSで処理しない
JSONのデータをJSでHTMLに描画
// JS$.getJSON(“itemlist.json” ,function(data) { $(data).each(function){ $(“<h2><a href=“”+this.url+””>+this.title+”</a></h2>”) .appendTo(‘ul li’); }});// HTML<body> <h1>艦隊一覧</h1>
<ul> <li><h2><a href=“https://murakumo.com”>叢雲</a></h2></li> <li><h2><a href=“https://simakaze.com”>島風</a></h2></li>
</ul></body>
// JSON[ { "title": "叢雲", "genre": "駆逐艦", "note": “我々の業界ではご褒美です", "url": “https://murakumo.com” }, { "title": "島風", "genre": "駆逐艦", "note": “めっちゃ早い", "url": “https://simakaze.com” },]
何でもかんでもJSで処理しない
JSONのデータをJSでHTMLに描画
// JSON[ { "title": "叢雲", "genre": "駆逐艦", "note": “我々の業界ではご褒美です", "url": “https://murakumo.com” }, { "title": "島風", "genre": "駆逐艦", "note": “めっちゃ早い", "url": “https://simakaze.com” },]
// JS$.getJSON(“itemlist.json” ,function(data) { $(data).each(function){ $(“<h2><a href=“”+this.url+””>+this.title+”</a></h2>”) .appendTo(‘ul li’); }});// HTML<body> <h1>艦隊一覧</h1>
<ul> <li><h2><a href=“https://murakumo.com”>叢雲</a></h2></li> <li><h2><a href=“https://simakaze.com”>島風</a></h2></li>
</ul></body>
何でもかんでもJSで処理しない
• URLは動的に生成しない※不完全なURLをクロールしてエラーを出す事がある為
JSONのデータをJSでHTMLに描画
// JSON[ { "title": "叢雲", "genre": "駆逐艦", "note": “我々の業界ではご褒美です", "url": “https://murakumo.com” }, { "title": "島風", "genre": "駆逐艦", "note": “めっちゃ早い", "url": “https://simakaze.com” },]
// JS$.getJSON(“itemlist.json” ,function(data) { $(data).each(function){ $(“<h2><a href=“”+this.url+””>+this.title+”</a></h2>”) .appendTo(‘ul li’); }});// HTML<body> <h1>艦隊一覧</h1>
<ul> <li><h2><a href=“https://murakumo.com”>叢雲</a></h2></li> <li><h2><a href=“https://simakaze.com”>島風</a></h2></li>
</ul></body>
何でもかんでもJSで処理しない
• URLは動的に生成しない※不完全なURLをクロールしてエラーを出す事がある為
• HTML自体に <a href=“hoge”>で記載する
JSONのデータをJSでHTMLに描画
// JSON[ { "title": "叢雲", "genre": "駆逐艦", "note": “我々の業界ではご褒美です", "url": “https://murakumo.com” }, { "title": "島風", "genre": "駆逐艦", "note": “めっちゃ早い", "url": “https://simakaze.com” },]
// JS$.getJSON(“itemlist.json” ,function(data) { $(data).each(function){ $(“<h2><a href=“”+this.url+””>+this.title+”</a></h2>”) .appendTo(‘ul li’); }});// HTML<body> <h1>艦隊一覧</h1>
<ul> <li><h2><a href=“https://murakumo.com”>叢雲</a></h2></li> <li><h2><a href=“https://simakaze.com”>島風</a></h2></li>
</ul></body>
何でもかんでもJSで処理しない
• URLは動的に生成しない※不完全なURLをクロールしてエラーを出す事がある為
• HTML自体に <a href=“hoge”>で記載する
• オリジナルテキストは非同期にしない ※Googleはオリジナルテキストを高く評価する傾向がある為
何でもかんでもJSで処理しない
JSONのデータをJSでHTMLに描画
// JSON[ { "title": "叢雲", "genre": "駆逐艦", "note": “我々の業界ではご褒美です", "url": “https://murakumo.com” }, { "title": "島風", "genre": "駆逐艦", "note": “めっちゃ早い", "url": “https://simakaze.com” },]
// JS$.getJSON(“itemlist.json” ,function(data) { $(data).each(function){ $(“<h2><a href=“”+this.url+””>+this.title+”</a></h2>”) .appendTo(‘ul li’); }});// HTML<body> <h1>艦隊一覧</h1>
<ul> <li><h2><a href=“https://murakumo.com”>叢雲</a></h2></li> <li><h2><a href=“https://simakaze.com”>島風</a></h2></li>
</ul></body>
• URLは動的に生成しない※不完全なURLをクロールしてエラーを出す事がある為
• HTML自体に <a href=“hoge”>で記載する
• オリジナルテキストは非同期にしない ※Googleはオリジナルテキストを高く評価する傾向がある為
• 更に複数ページに利用するとペナルティ※コンテンツ内容が乏しいページがサイト内に多数あった場合、低品質サイトと判断
何でもかんでもJSで処理しない
JSONのデータをJSでHTMLに描画
// JS$.getJSON(“itemlist.json” ,function(data) { $(data).each(function){ $(“<h2><a href=“”+this.url+””>+this.title+”</a></h2>”) .appendTo(‘ul li’); }});// HTML<body> <h1>艦隊一覧</h1>
<ul> <li><h2><a href=“https://murakumo.com”>叢雲</a></h2></li> <li><h2><a href=“https://simakaze.com”>島風</a></h2></li>
</ul></body>
// JSON[ { "title": "叢雲", "genre": "駆逐艦", "note": “我々の業界ではご褒美です", "url": “https://murakumo.com” }, { "title": "島風", "genre": "駆逐艦", "note": “めっちゃ早い", "url": “https://simakaze.com” },]
何でもかんでもJSで処理しない
スライダーはJSを切っても全部表示されるようにする
スライダーはJSを切っても全部表示されるようにする
何でもかんでもJSで処理しない
Slider images
Slider images
スライダーはJSを切っても全部表示されるようにする
li { display:none;}
JS OFF
$(function(){ $(“.slide li”).show();});
何でもかんでもJSで処理しない
スライダーはJSを切っても全部表示されるようにする
Slider imagesli { display:none;}
JS OFF
$(function(){ $(“.slide li”).show();});
何でもかんでもJSで処理しない
スライダーはJSを切っても全部表示されるようにする
Slider imagesli { display:none;}
JS OFF
$(function(){ $(“.slide li”).show();});
何でもかんでもJSで処理しない
スライダーはJSを切っても全部表示されるようにする
Slider images
JS OFF
何でもかんでもJSで処理しない
スライダーはJSを切っても全部表示されるようにする
Slider images
JS OFF
何でもかんでもJSで処理しない
他にも色々
• ナビ等の主要なリンクを非同期コンテンツにしない
• JavaScriptによるリダイレクト
• ブラウザにレンダリングさせる前に、サーバサイドでレンダリング出来ないか考える。
• アプリインストールを促す「インタースティシャル広告」もコンテンツの大半を覆うようなものだと、ペナルティ対象
とは言うものの
難しい時もある
理想と現実
分業の闇
分業の闇
デザイナー
デザインカンプ出来たので、マークアップお願いします。
分業の闇
デザイナー
デザインカンプ出来たので、マークアップお願いします。
わ、わかりました！
新人くん
分業の闇
デザイナー
・・・・・！
新人くん
分業の闇
デザイナー
出来ました！
新人くん
分業の闇
＿人人人人人人人＿ ＞ <div>まみれ ＜ ‾Y^Y^Y^Y^Y^Y‾
※あくまで起こりうる闇の例であり、弊社の事例ではありません。
分業の闇
デザイナー
コーディングが完了したので、 JSの処理導入お願いします。
エンジニア
分業の闇
デザイナー
コーディングが完了したので、 JSの処理導入お願いします。
エンジニア
了解しました。 内容確認します。
分業の闇＿人人人人人人人＿ ＞ imgしかない ＜ ‾Y^Y^Y^Y^Y^Y‾
※あくまで起こりうる闇の例であり、弊社の事例ではありません。
＿人人人人人人人人人人人＿ ＞ text-indent:100% ＜ ‾Y^Y^Y^Y^Y^Y^Y^Y^Y‾
＿人人人人人＿ ＞ つらい ＜ ‾Y^Y^Y^Y^‾
※あくまで起こりうる闇の例であり、当社の事例ではありません。
※あくまで起こりうる闇の例であり、弊社の事例ではありません。
ちなみに
弊社がやってる事• 社内 / 社外向けのガイドライン作成
弊社がやってる事• 社内 / 社外向けのガイドライン作成
• 定期的な社内勉強会の開催 (東京⇔石川)
弊社がやってる事• 社内 / 社外向けのガイドライン作成
• 定期的な社内勉強会の開催 (東京⇔石川)
• Slackを利用して活発に情報交換
弊社がやってる事• 社内 / 社外向けのガイドライン作成
• 定期的な社内勉強会の開催
• Slackを利用して活発に情報交換
弊社がやってる事• 社内 / 社外向けのガイドライン作成
• 定期的な社内勉強会の開催
• Slackを利用して活発に情報交換
まとめ
まとめ
• クローラーの動きを理解して、SEOを考慮したマークアップを行うこと。
まとめ
• クローラーの動きを理解して、SEOを考慮したマークアップを行うこと。
• 部分的にしか担当できないモノもあるので、その制限の中で、出来る事は何か考える。
まとめ
• クローラーの動きを理解して、SEOを考慮したマークアップを行うこと。
• 部分的にしか担当できないモノもあるので、その制限の中で、出来る事は何か考える。
• チームみんなでSEOについて考え、知識を共有する事、大事。
Thank you :-D