LoginSignup
38
43

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@mczkzk

Webサイト公開時の設定諸々（SNSシェア、解析タグ、公開後 etc）

Last updated at Posted at 2016-08-05

ベースにしている開発環境

初期設定

meta情報はymlにまとめておく。

meta.yml
# このサイト全体のタイトル
site_name: site name

# meta description（og:description・twitter:descriptionでも使用）
description: site description
# og_description: og description
# twitter_description: twitter description 
# line_description: line description 

# meta keywords
keywords: [sample1, sample2, sample3]

# カノニカル・og:urlなどで使われる、このサイトのURL
# （複数ページあるサイトでは、全てに同じURLを入れないように）
url: http://example.com/

# Facebook OGP・Twitter cardsで使われる画像 フルURLで指定すること
ogp_image_url: http://example.com/ogp.jpg

# Facebookアプリのapp id（入れないとWarningが出る）
facebook_app_id: 99999999999

# Twitter ハッシュタグ
hashtag: sample, sample2, sample3

# Twitter cardsの管理者として登録するアカウント（※任意）
# twitter_card_owner: '@TwitterJP'

# favicon
favicon_url: /favicon.ico

# サイトをホーム画面に追加した際のアイコン画像
# webclipicon_url: http://example.com/webclipicon.png

# iOSにて、サイトをホーム画面に追加した際の、ステータスバーの挙動指定
# ios_status_bar: default

favicon_url : ルートディレクトリでない場合はフルパス
webclipicon_url : 127127
ogp_image_url : ogpは必ずフルパス 1200630

ymlの基本的な使い方はこちら

yml内での改行をslimで<br>として扱いたい場合
simple_format(h("てきすと"))

参考
↓meta情報まとめはこちら
head内に記述する要素の総まとめ -meta要素、link要素、ソーシャルサービス用の要素、ブラウザやスマホアプリ用の要素など

index.pug(エンコード処理)
- var encode_description = encodeURIComponent(twitter_description);
- var encode_hashtag = encodeURIComponent(hashtag);
- var encode_url = encodeURIComponent(url);
- var encode_via = encodeURIComponent(twitter_card_owner);

.node-version

開発者が複数いる場合は必須
最新機能を使わない限りLTSの最新版を記述
https://nodejs.org/ja/

SNSシェア

デフォルトのボタンなら以下を参照
SNSのシェアボタンの設置方法まとめ (サンプルコード付き)

Facebook

まずはFBアプリ登録
https://developers.facebook.com/

  • 本番用とテスト用のIDを取得
  • 忘れないようにすぐに公開（AppReviewを'yes'に）
  • ドメイン、url、emailなど設定

（※Basic認証下だとクローラがOGPを取得できないので、テストサイトでは見られない）

参考
FacebookでDeveloper登録とアプリ登録

続いて、以下を外部ファイルにまとめてincludeするとよい。

facebook.pug
# fb-root
script.
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '#{facebook_app_id}',
      xfbml      : true,
      version    : 'v2.6'
    });
  };
  function shareFB(){
    FB.ui(
      {
        method: 'share',
        href: '#{url}',
      }
    );
  }
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/ja_JP/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

  $('.js-share_fb').on('click', function(){
    shareFB();
  });

OGPのmetaタグ設定は以下参照。
https://developers.facebook.com/docs/sharing/webmasters#markup

「OGP画像シミュレータ」で表示の確認。

参考
https://developers.facebook.com/docs/javascript/reference/FB.ui
http://blog.bornknow.com/2011/02/sharedialog.html

Twitter

エンコード方法は上記参照。

index.pug
<a href="//twitter.com/intent/tweet?text=#{encode_description}&amp;url=#{encode_url}&amp;hashtags=#{encode_hashtag}&amp;via=#{encode_via}" target="_blank"></a>

プロトコルは省略。
Google HTML/CSS Style Guide

複数のOGP,TwitterCardsを出し分ける場合はこちらを参照。

参考
フロントエンジニア向けTwitterに関する実装まとめ 2016 開幕版（ツイートボタンの設置方法・Web Intent・ツイッターウィジェット・Twitterカード etc...）

LINE

旧式

index.jade
a.btn-line(href="//line.me/R/msg/text/?#{encode_description}")

参考
SNSのシェアボタンの設置方法まとめ (サンプルコード付き)

最新

Using the “LINE it!” button on websites

PCブラウザからwebページを共有できる

html
<div class="line-it-button" style="display: none;" data-type="share-c" data-lang="ja"></div>

<script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" async="async" defer="defer"></script>

オリジナルの画像を使う場合は・・・

css
.line-it-button {
  opacity: 0;
}

ただし、ボタンの押下範囲が狭いときにスタイルを当てられないし、jsで操作もできない（？）ので、デフォルトのシェアボタンを埋め込むときだけにしておいたほうが良さそう。

※Basic認証を突破できないので、LINEのシェア画像確認は公開後。

参考
新しくなった「LINEで送る」について

OGPの更新

_ver2などで画像の名前を変更してあげることで、facebookはすぐに変更を認識してくれる。twitterは反映に時間がかかることがある。

公開したら改めてValidatorとDebuggerを通す。

解析タグ

GAタグ

Google Analytics
https://analytics.google.com/analytics/

通常は</head>の直前にトラッキングコードを設置するだけでok
Googleアナリティクス基礎：トラッキングコードの設置
Googleアナリティクス設定|導入～分析までの完全攻略ガイド

SNSボタンのクリックデータも取得したい場合は、以下のコードを追加。
ラベルは目的ごとに細かく分けるとなお良い。

javascript
$('.btn-facebook').on('click', () => { 
    ga('send', 'event', 'share', 'click', 'facebook'); 
});
$('.btn-twitter').on('click', () => { 
    ga('send', 'event', 'share', 'click', 'twitter'); 
});
$('.btn-line').on('click', () => { 
    ga('send', 'event', 'share', 'click', 'line'); 
});

GAサイトの以下の項目から確認。

  • 行動 > イベント > サマリー
  • リアルタイム > イベント

c1f8a3855f8e7c02a42450c4f47a6845.png

Analyticsの送信状態をconsoleに出したい場合は・・・
Google Analytics Debugger

adobeタグ

入れると隙間が生まれることがあるので任意の親要素で囲ったうえで、cssで飛ばす。

html
<div class="adobe">
	<!-- SiteCatalyst code version -->
	（中略）
	<!-- End SiteCatalyst code version: H.6. -->
</div>
css
.adobe{
	font-size: 0;
	line-height: 0;
}

サーチコンソール

サイトの再クロールの申請などに使用。
（公開後にサイトを変更した場合すぐに反映させる）

参考
サーチコンソール（Google Search Console）の使い方とSEO
URL の再クロールを Google にリクエストする
【初心者向け】サーチコンソール（Search Console）の登録方法と基本的な使い方

favicon

html以外を表示させるときのfaviconは/favicon.icoでブラウザが自動でアクセスするので、img/に入れないで直下におく。

ジェネレーター

簡単！Macのプレビューだけでとりあえず的なファビコン（.ico）をサクッと1分で作る方法

それぞれのページが違う階層のディレクトリにある場合（特にブランドサイトなどの下層ディレクトリで作業する場合）、相対パスで書くと表示されないことがあるので絶対パスで書くこと。また、デザイナーはpng形式で渡してくることが多いが基本的にはicoにしたほうがよい。ググって出てくる無料サービスはサーバーを介している可能性もあるので、できるならデザイナーに作ってもらうのがベスト。

参考
faviconがIEで表示されません。可能性のある表示されない原因を教えてください。
綺麗なfavicon（ファビコン）作成の基本的なコツ・アイデアまとめ

バリデーション

Markup Validation Service
CSS Validation Service
Can I use

同時にconsole.logを全て消す（IEだと止まることすらある）

テスト

モバイルフレンドリーテスト
Lighthouse

デバッグ

まとめました -> フロントエンドのデバッグ

画像圧縮

まとめました -> 画像圧縮/スプライト生成

Gulpでやるなら・・・ | imagemin・tinypng

gulp-tinypng-compress
1ヶ月に500枚の制限はあるが、処理スピードはかなり早い。

gulp-imagemin
imagemin-pngquant
gulp-imageoptim
gulp-tinypng-compressを使いつつ、上限を越えてしまったら
上記の3つを組み合わせるのが今のところのベストプラクティス。
圧縮率はgulp-tinypng-compressと大差ないが、処理スピードが遅い。

参考
2分でできる、gulpとTinyPNGで画像圧縮を自動化する方法
ImageOptimを使って画像ファイルのサイズを小さくしてみる

TinyPNG / COMPRESS JPEG

コマンドラインを叩きたくない人
TinyPNG
COMPRESS JPEG

画像以外にページが遅い原因はPageSpeed Insightsで特定する

参考
WEB ページの読み込み時間を短くしよう

納品

公開後

Twitter Validator

Facebook Debugger

https://developers.facebook.com/tools/debug/og/object/
"feach new scrape information"でキャッシュをなくす（ogpを最新のものにする）
-> エラーがあればogpがフルパスで設定できていないなど疑う

Google Analytics

https://www.google.com/analytics/
取得できているか確認する（表示がおかしい場合は、日付に注意）

おまけ

Google案件

Google案件ではライブラリを使用できない（ことが多い）。
jQueryを使えないということ。Angularは使える。
ライブラリやフレームワークに頼りすぎない。
https://help.googlegoro.com/index.html

innerHTML使うなとか制約も多いので、こちらも確認
https://partner-security.withgoogle.com/docs/webapp_requirements

38
43
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
38
43

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?