https://webcode-lab.com/attic/

Coding Rules・SEO施策 チェックサイト

  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
HOME > Study > Workshop > 2015-09-17勉強会

2015-09-17 勉強会


今回の課題


  • 課題1. スマートフォンサイトのsm/_common/tag/meta_fix.phpのルール作り
  • 課題2. 新スマートフォン自動転送プログラムの導入
  • 課題3. INCLUDE・Commonの再確認とマイナーチェンジ
  • 課題4. htaccess記述の大幅チェンジ
  • 課題5. チェックリストの導入
  • 課題6. 新KeyビジュアルJqueryの選別
  • 課題7. PCサイトスマートフォンサイトの別URLシステム再考

課題1. スマートフォンサイトのsm/_common/tag/meta_fix.phpの意見交換・ルール作り


目標
スマートフォンサイトの<meta>要素の共通ルールを作る

例)


【meta_fix.php】

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<meta name="format-detection" content="telephone=no" />
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
<meta http-equiv="Imagetoolbar" content="no">

<まとめ>
当面これでいきましょう!
meta_fix.htmlからダウンロード可


課題2. 新スマートフォン自動転送プログラムの導入


目標
新自動転送プログラムの仕組みと、動く要件、設置方法の理解

スマートフォン自動転送プログラムを旧サイト(サイト構造がディレクトリになっていない)にも適用できるよう新しくしました
参照リンク:footer.htmlスマートフォンサイト自動転送ルール

<まとめ>
スマホサイトの「PCビューを見る」に貼る、リンクの貼り方(変数使うやつ)をアップしました。
footer.htmlスマートフォンサイト自動転送ルールの、3. スマートフォンサイトでの「PCビュー」リンク設定


課題3. INCLUDE・Commonルール全体の再確認とマイナーチェンジ


目標
INCLUDE・Commonルール全体の再確認と、マイナーチェンジについてのお知らせ

INCLUDE・Commonルール全体の再確認をし、忘れがちな部分を補強したいと思います
参照リンク:Common Rules チェックリスト



課題4. htaccess記述の大幅チェンジ


目標
htaccess記述の新項目追加のお知らせ

htaccess記述に、追加項目がありますのでお知らせします
参照リンク: 「Htaccess設定」参照



課題5. チェックリストの導入


目標
コーディング等作業後のルール漏れチェック

チェックすべき項目がたくさんありますが、リストとしてまとめてみました
参照リンク:上記と同じ 全体参照

<まとめ>
最新JqueryのセットをJqery CDNからダウンロードできます。

最新keyVプラグインのセットを KeyビジュアルSETからダウンロードできます。
KeyV用iconも上記からダウンロードできます。

「画像」の項目にロスレス圧縮への外部リンク貼ってます。

スマホサイトに入れる「電話番号」関係デザインは、とりあえずで、「画像で入れる」ことに決まりました!(IMGタグにGTM用ID貼るから) SEO


課題6. 新KeyビジュアルJquery意見交換


目標
新Keyビジュアルについての意見交換

今後採用する予定の新Keyビジュアルがありますので、ご覧下さい
参照リンク:SkitterPogo参照

<まとめ>
最新keyVプラグインのセットを KeyビジュアルSETからダウンロードできます。
KeyV用iconも上記からダウンロードできます。


課題7. PCサイト・スマートフォンサイトのURLシステム再考


目標
PCサイト・スマートフォンサイトの別URL OR 同URL 意見交換

現行の、PCサイト・スマートフォンサイトURLが別のシステムを再考したいと思います。
再考の理由は、SEO的評価と管理しやすさです。
(現行ではcanonical属性とalternate属性を設定する必要あり・「PCビュー」を見るリンクにわざわざ該当ページを指定する必要アリ)


【現行の別URLサイトシステム】
PCサイトがhttp://○○○.com/、SMサイトがhttp://○○○.com/sm/、のように別URLで別HTMLのサイトシステム

メリット
 デバイスごとのサイト構造が分かりやすい
 デバイスごとに個別管理のため、マーケティングデータを分散できる
デメリット
 同内容のページURLがデバイスごとに異なり重複し、SEOに不利
 上記を避けるために、全ページでcanonical属性とalternate属性を使って最適化する必要がある
 バックリンクが分散される(SEOに不利・ユーザビリティ低下)
 デバイスごと個別管理のため、マーケティングデータが分散される
 URLがデバイス毎に倍増し、管理が大変

【動的配信 同URLサイトシステム】
PCサイトもSMサイトも、http://○○○.com/、のように同じURLながら別HTMLのサイトシステム

メリット
 重複内容のページURLが統一され、SEOに有利
 canonical属性とalternate属性を使って最適化する必要がない
 バックリンクを集約できる(SEOに有利・ユーザビリティ向上)
 サイト一括管理のため、マーケティングデータを集約できる
 URLを統一でき、管理しやすい
デメリット
 デバイスごとのサイト構造が分かりにくい
 サイト一括管理のため、マーケティングデータを分散できない

「バックリンクを集約できる」の補足ですが、
FacebookのいいねボタンやTwitterのツイートボタンで、サイトへのリンクを設置する場合、
ボタンを押した人がスマホから閲覧していた場合、掲載されるリンクのURLはSMサイトのものになり、
それをPCからリンクを押した際に、デバイスはPCにも関わらずスマホサイトが表示されることになります。
(逆もしかり)
URLが統一されていると、PCでもスマホでも振り分け無しでそれぞれの最適な形のページでサイトを閲覧できます。

ちなみにGoogleの推奨順は、
1.レスポンシブサイト(同URL・同HTML)
2.動的配信(同URL・別HTML)
3.URLを分ける(別URL・別HTML)
と言われています。(Google公式HPで確認済み)

1番いいのはレスポンシブサイトですが、
デメリットの威力も最大で、
豊富な専門知識や高いスキルが必要で、運用が難しく構築費用が高いこと、チーム作業の難しさや、新規コンテンツの追加更新が難しいこと、新しいデバイスが出る度にサイトの構築が必要になること、などが挙げられます。
レスポンシブサイトを採用する場合には、CSSフレームワークなどを使用して運用することが現実的です。

参照外部リンク:canonical属性とalternate属性を使ってモバイルの最適化をしよう参照

<まとめ>
意見交換の結果、
「磯貝さんが、PCサイト・スマホサイト別で、SEOコンバージョン関係レポートをみたい」
URLが同じでも別々にデータ取る方法があるか!?が課題!!
課題クリアできれば→導入を塩川さん・磯貝さんで検討!

課題クリア!!!URLが同じでも、PC・SMサイト別々にレポート取得可!




次回までにお願いする課題


  • 課題1. SPEEDUP施策の効果を測りたいので、Before/Afterの評価点を教えてください。
       speedinsights
       検証できるのはhtaccess設定だけ。。。!? 
  • 課題2. スマートフォンサイトで、以下のCLASSを誰か使ってみてください~
    
    下記のように、IDやimg属性で、width100%など指定すると、継承がキツイ
    例)
    img {
    	width: 100%;
    }
    や
    #main img {
    	width: 95%;
    }
    汎用的な要素(imgやdivなど)に対しての指定を避けたい。。。
    次のCLASSの使い勝手はどうでしょう!?
    
    
    画像を画面いっぱいに引き伸ばすクラス
    
    /* css */
    .img-responsive {
      display: block;
      width: 100%;
      height: auto;
    }
    
    img {
      max-width: 100%;
      height: auto;
      border: 0;
    }
    
    /* html */
    <img src="photo.jpg" class="img-responsive" />
    
    							
  • 課題3. お使いで便利なJqueryプラグインがありましたら、引き続きお知らせください
  • 課題4. 分からないことなどあれば聞いてください。

  今回の課題は多岐にわたり、とっても重たいです。
  大変だと思いますので徐々にお願いしますm(_ _)m
  気づいた問題点・曖昧点などなんでも聞いてください!            




塩川さん&磯貝さん スクリーンショットの件


  • Awesome Screenshot
     Chrome上でスクリーンショット(ページ全体・可視部分・選択範囲など)
     https://chrome.google.com/webstore/category/apps?utm_source=chrome-app-launcher-info-dialog(GoogleWebStore)で
     Awesome Screenshotで検索してください。
     似たやつが2つ、、、どちらを機能拡張したか分からないので、やってみてください
     
     http://www.awesomescreenshot.com/(HP)



ページの先頭へ



次回までにお願いする課題

  • 課題1. 知っているHTML5のマーキング情報を、みなさんへ共有しましょう。
  • 課題2. 共有CSS・共有JSを構築しましょう。提案をお待ちしています。
  • 課題3. 今後サイトコーディングで必要になるプラグインを教えてください。
  • 課題4. 分からないことなどあれば聞いてください。
12/04勉強会