SEOとJava Script。〜文書構造とチームと、時々、闇〜

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

よろしくお願いします！

極力、JS書かないようにしよう

極力、JSを書かないようにしよう

本日のアジェンダ
• 検索エンジンに反映されるまで
• 文書構造を意識する
• 理想と現実

検索エンジンに反映されるまで
※前置き

1. 検索エンジンがクローラーを使ってページの情報を集める

検索エンジン 
Google / Yahoo 等
クローラー
GoogleBot 等

情報あつめてきてー
Google / Yahoo 等
クローラー
GoogleBot 等

Google / Yahoo 等
クローラー
GoogleBot 等
わかりましたー

Google / Yahoo 等
クローラー
GoogleBot 等

2. クローラーが集めた情報を検索エンジンがインデックスしていく
いただきます！
Google / Yahoo 等
クローラー
GoogleBot 等
もってきた！

きろくしよう
Google / Yahoo 等データベース

きろく完了

検索結果に表示
各種ブラウザ

途中の出来事
クローラー
GoogleBot 等
なになに・・・？

途中の出来事
クローラー
GoogleBot 等
・・・・・・・。

• クローラー内容が理解できない問題
途中の出来事
クローラー
GoogleBot 等
imgしか…無い…！

• クローラー内容が理解できない問題
途中の出来事
クローラー
GoogleBot 等
今回はコレの話

文書構造を意識する
• ユーザは表示されているページを見ている。
クローラー
GoogleBot 等
見出しが無エ！

• クローラーはソースコードを見ている。
クローラー
GoogleBot 等
テキスト無エ！

クローラー
GoogleBot 等
altもそれほど入って無エ！

クローラー
GoogleBot 等

文書構造を意識している
<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> 
</p> 
 
<h2>半歩先のSEOで効率よく結果を出そう</h2> 
<p> 
</p>
…ほう。大見出しは「1/16開催 WDF..

文書構造を意識してない
<b>1/16開催 WDF研修「半歩先のSEOで効率よく結果を出そう」</b><br> 
<br> 
<br> 
<br> 
<b>半歩先のSEOで効率よく結果を出そう</b><br> 
<br> 
切り分ける必要があります。

文書構造を意識してない
<b>1/16開催 WDF研修「半歩先のSEOで効率よく結果を出そう」</b><br> 
<br> 
<br> 
<br> 
<b>半歩先のSEOで効率よく結果を出そう</b><br> 
<br> 
…どういう事だってばよ！？

文書構造とは何だったのか
<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

• HTML要素が正しく利用されている 
・<h1>タグ等を文字サイズを大きくする為ではなく、 
見出しとして適切に利用する etc

• HTML要素が正しく利用されている 
・<h1>タグ等を文字サイズを大きくする為ではなく、 
見出しとして適切に利用する etc
• テキストにスタイル属性を直接的に含まない 
・<font>や<center>タグや<div style= >  
・ちゃんとCSSに記載する

非同期コンテンツについて
• JavaScriptで動的に生成するコンテンツについては、 
クローラーは完全に理解する事ができない。

クローラーは完全に理解する事ができない。 
 
 
• HTML スナップショット？

 
 
• HTML スナップショット？ 
・工数が掛かる 
・その前に構成的に問題ない？

 
 
• JavaScriptを切っても情報を、 
閲覧・ページ遷移できるように作る！

何でもかんでもJSで処理しない

JSONのデータをJSでHTMLに描画

JSONのデータをJSでHTMLに描画 
 
 
 
 
 
 
 
 
// HTML 
<body> 
<h1>艦隊一覧</h1>  
<ul> 
<li></li> 
<li></li> 
</ul> 
</body>

// JSON 
[ 
{ 
"title": "叢雲", 
"genre": "駆逐艦", 
"note": “我々の業界ではご褒美です", 
"url": “https://murakumo.com” 
}, 
{ 
"title": "島風", 
"note": “めっちゃ早い", 
"url": “https://simakaze.com” 
}, 
]
 
 
 
 
 
 
 
 
// HTML 
<body> 
<ul> 
<li></li> 
<li></li> 
</ul> 
</body>

// JS 
$.getJSON(“itemlist.json” ,function(data) { 
$(data).each(function){ 
$(“<h2><a href=“”+this.url+””>+this.title+”</a></h2>”) 
.appendTo(‘ul li’); 
} 
}); 
 
// HTML 
<body> 
<ul> 
<li></li> 
<li></li> 
</ul> 
</body>
// JSON 
[ 
{ 
}, 
{ 
}, 
]

// JS 
} 
}); 
 
// HTML 
<body> 
<ul> 
<li><h2><a href=“https://murakumo.com”>叢雲</a></h2></li> 
<li><h2><a href=“https://simakaze.com”>島風</a></h2></li> 
</ul> 
</body>
// JSON 
[ 
{ 
}, 
{ 
}, 
]

// JSON 
[ 
{ 
}, 
{ 
}, 
]
// JS 
} 
}); 
 
// HTML 
<body> 
<ul> 
</ul> 
</body>
• URLは動的に生成しない 
※不完全なURLをクロールしてエラーを出す事がある為

// JSON 
[ 
{ 
}, 
{ 
}, 
]
// JS 
} 
}); 
 
// HTML 
<body> 
<ul> 
</ul> 
</body>
• HTML自体に <a href= hoge >で記載する

// JSON 
[ 
{ 
}, 
{ 
}, 
]
// JS 
} 
}); 
 
// HTML 
<body> 
<ul> 
</ul> 
</body>
• オリジナルテキストは非同期にしない 
※Googleはオリジナルテキストを高く評価する傾向がある為

// JSON 
[ 
{ 
}, 
{ 
}, 
]
// JS 
} 
}); 
 
// HTML 
<body> 
<ul> 
</ul> 
</body>
• オリジナルテキストは非同期にしない 
※Googleはオリジナルテキストを高く評価する傾向がある為
• 更に複数ページに利用するとペナルティ 
※コンテンツ内容が乏しいページがサイト内に多数あった場合、低品質サイトと判断

// JS 
} 
}); 
 
// HTML 
<body> 
<ul> 
</ul> 
</body>
// JSON 
[ 
{ 
}, 
{ 
}, 
]

スライダーはJSを切っても全部表示されるようにする

スライダーはJSを切っても全部表示されるようにする 
Slider images

Slider images
li { display:none;}
JS OFF
$(function(){ 
$(“.slide li”).show(); 
});

Slider images
JS OFF

他にも色々
• ナビ等の主要なリンクを非同期コンテンツにしない
• 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を利用して活発に情報交換

まとめ
• クローラーの動きを理解して、 
SEOを考慮したマークアップを行うこと。

まとめ
• 部分的にしか担当できないモノもあるので、 
その制限の中で、出来る事は何か考える。

まとめ
• 部分的にしか担当できないモノもあるので、 
その制限の中で、出来る事は何か考える。
• チームみんなでSEOについて考え、 
知識を共有する事、大事。

SEOとJava Script。〜文書構造とチームと、時々、闇〜

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to SEOとJava Script。〜文書構造とチームと、時々、闇〜

Similar to SEOとJava Script。〜文書構造とチームと、時々、闇〜 (20)