Weitere ähnliche Inhalte
Ähnlich wie SEOとJava Script。 〜文書構造とチームと、時々、闇〜 (20)
Kürzlich hochgeladen (10)
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
- 2. 自己紹介
• 2015/09/01 ∼
DMM.com Labo 加賀デザイン部に
フロントエンドエンジニアとしてJoinしました
• 業務では、HTML/CSS/JavaScript等の
実装や開発環境の準備・宴会部長まで
幅広くやらせて頂いてます :-)
ミナカワ ユウキ
HP : kglabo.com
- 33. 文書構造を意識している
• クローラーはソースコードを見ている。
<h1 class="entryTitle">1/16開催 WDF研修「半歩先のSEOで効率よく結果を出そう」</h1>
<p>
WDFの2016年最初のセミナーは、SEOの第一人者でWDFに過去3回講演していただいている
住 太陽さんをお招きして、WDF研修「半歩先のSEOで効率よく結果を出そう」を開催します。
住さんからは、「直近のセミナーで話した内容すべてを詰め込んだ総集編」、
「内容の濃すぎるセミナー」というコメントをいただいています。
日々の運用のヒントが必ず見つかります。ぜひご参加ください。
</p>
<h2>半歩先のSEOで効率よく結果を出そう</h2>
<p>
ウェブマスターの手間と時間は何よりも大切なもの。効果の薄い最適化施策や、
PVばかりで売上につながらないコンテンツ作りに、大切な手間と時間はかけられません。
確実に、しかも、効率よく結果を出すには、集中すべきところとそうでないところを
切り分ける必要があります。
</p>
- 34. 文書構造を意識している
• クローラーはソースコードを見ている。
<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..
- 71. 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で処理しない
- 72. 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で処理しない
- 73. 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で処理しない
- 74. 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をクロールしてエラーを出す事がある為
- 75. 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 >で記載する
- 76. 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はオリジナルテキストを高く評価する傾向がある為
- 77. 何でもかんでも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はオリジナルテキストを高く評価する傾向がある為
• 更に複数ページに利用するとペナルティ
※コンテンツ内容が乏しいページがサイト内に多数あった場合、低品質サイトと判断
- 78. 何でもかんでも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”
},
]
- 104. 弊社がやってる事
• 社内 / 社外向けのガイドライン作成
• 定期的な社内勉強会の開催 (東京⇔石川)
• Slackを利用して活発に情報交換