Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
20
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@mo49

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

随時更新していきます。

ベースにしている開発環境
https://github.com/kayac/kayac-html5-starter

初期設定

jadeを使用。meta情報はjsonにまとめておく。

meta.json
{
    "site_name": "sampleサイト",
    "description": "サイトの説明",
    "sns_description": "シェア文言",
    "hashtag": "sample,sample2,sample3",
    "url": "http://sample.com",
    "via": "sample",
    "favicon_url": "favicon.ico",
    "webclipicon_url": "apple-touch-icon.png",
    "facebook_app_id": "123456789",
    "ogp_image_url": "http://sample.com/img/ogp.png",
    "keywords": [
        "サンプル",
        "sample",
        "qiita"
    ]
}

hashtag : 複数登録は","で区切る
favicon_url : ルートディレクトリでない場合はフルパス
webclipicon_url : 127*127
ogp_image_url : ogpは必ずフルパス 1200*630
※ htmlタグを含んだ文字列の場合、エスケープされたくないので!=を使う

エンコード処理

index.jade
- var encode_description = encodeURIComponent(sns_description);
- var encode_hashtag = encodeURIComponent(hashtag);
- var encode_url = encodeURIComponent(url);
- var encode_via = encodeURIComponent(via);

SNSシェア

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

Facebook

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

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

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

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

facebook.jade
#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

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

html
<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で操作もできない(?)ので、デフォルトのシェアボタンを埋め込むときだけにしておいたほうが良さそう。

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

OGPの更新

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

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

解析タグ

GAタグ

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

通常は</head>の直前にトラッキングコードを設置するだけでok
Googleアナリティクス基礎:トラッキングコードの設置

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

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

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

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

ex) https://gyazo.com/c1f8a3855f8e7c02a42450c4f47a6845

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;
}

favicon

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

ジェネレーター

それぞれのページが違う階層のディレクトリにある場合(特にブランドサイトなどの下層ディレクトリで作業する場合)、相対パスで書くと表示されないことがあるので絶対パスで書くこと。また、デザイナーはpng形式で渡してくることが多いが基本的にはicoにしたほうがよい。

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

バリデーション

Markup Validation Service
CSS Validation Service
Can I use

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

画像圧縮

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

gulpが止まった時にはこちらを使用
TinyPNG
COMPRESS JPEG

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

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

納品

公開後

Twitter Validator

https://cards-dev.twitter.com/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を使えないということ。
ライブラリやフレームワークに頼りすぎない。
https://help.googlegoro.com/index.html

innerHTML使うなとか いちゃもんをつけてくることもあるので、こちらも確認
https://partner-security.withgoogle.com/docs/webapp_requirements

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
20
Help us understand the problem. What are the problem?