SEOとかLPOとかをやっているので、
その辺り意識して作っている時に気をつけていることをざっとまとめていこうと思います。
headerタグ編
headerにはサイトに適したタグを埋め込むことで、検索エンジンがきちんと情報を取り組んでくれます。
基本セット
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>サイトタイトル</title>
<meta name="description" content="サイトの説明文">
<link rel="canonical" href="http://xxx.xxx">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
title
SEOで最も重要なタグです。以下に気をつけて設定すると良いです。
- 30文字前後（スマホ最適の場合は50文字程度）
- 複数ページで重複しないように全ページ固有のタイトルにする
discription
タイトルの下部にはいる補足になる文章です。
シンプルにユーザーがクリックしやすいような内容で。
最長120文字程度が目安。（スマホの場合は20文字）
OGP関連
// headタグは以下推奨
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="og:title" content="タイトル">
<meta property="og:type" content="blog">
<meta property="og:url" content="http://xxx.xxx">
<meta property="og:image" content="images/xxx.png">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="サイト概要">
// Facebook App IDを入れるかた
<meta property="fb:app_id" content="">
</head>
スマホ対応系
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<meta name="apple-itunes-app" content="">
<meta name="google-play-app" content="">
// アドレスやメールを自動判定でリンクさせない
<meta name="format-detection" content="telephone=no,address=no,email=no">
viewport
レスポンシブ対応しているサイトには必ず必要になる。
width = 横幅。初期値は980px。
height = 縦幅。
initial-scale = 倍率。
minimum-scale = 最小縮小比率
maximum-scale = 最小拡大比率
user-scalable = ユーザーが拡大表示できるかどうか。デフォルトはyes
HTMLタグ
H1
記事のタイトル。titleタグの次に重要。
32文字程度で解りやすい言葉でキーワードを意識して作る。
1ページに1つまで。
html5から原則的に、複数個おけるようになったが、価値は分散してしまうので、結果1つのほうが良さそうだとか。）
a
リンクのアンカーテキストはキーワードを含めると良い。
「こちら」とかにするのはSEO的によろしくない。
strong
強く強調したいキーワードに。
em
重要なキーワードに。
img
きちんとaltをつけること。
その他考慮したいこと
利用する画像サイズを下げる
必ず圧縮した画像をアップロードすることでサイトの速度があがります。
大きな画像は特に意識して圧縮することを推奨します。
http://optimizilla.com/ja/
http://compressjpeg.com/ja/
シンプルなアイコンはSVGで！
イラレがないからSVG作れないよ！っていうかたも多いかと思いますが、
webで簡単につくれるサイトがあります。
画像と違って拡大縮小で劣化しないので出来る限りSVG化したいところ。
http://editor.method.ac/
ページ下部の画像は後読み込みにする
あとで読み込んでも良いものはどんどん後読み込みに・・・
ライブラリ、いっぱいあります。他記事参考で。
LP高速化のために5つの画像の遅延読み込みライブラリを比較した
あとがき
アトラエでは一緒にプロダクトを作る仲間を募集しております！
どんなことしているのか、宜しければご覧いただければ嬉しいです！
新規事業yenta/wevoxも急成長中！求人メディアGreenを運営するHRTechベンチャー
エンジニア・デザイナー・コーダー・・・みなさん仲間になってください！