※ 2019年3月22日現在で一部仕様に変化(ページネーションタグの廃止)がございましたので、書き直しています。
ライフハック的なコンテンツページのタイトルにありそうな書き方をしましたが(笑)、サイト制作時に事前に制作会社に依頼したい設定内容をざっくり16個挙げてみましたので、ご紹介します。細かく言えば30個近くありますが、面倒なのでとりあえず16個書き連ねてみたいと思います。
1.スマホ対応
とりあえず最低限のスマホ対応ですね。
モバイルフレンドリー化
これは今のところの最低限遵守内容です。対応状況の確認方法として、サイト全体において未対応部分を検出するにはSearch Consoleで[モバイル ユーザビリティレポート]で、ページ単体で確認したい場合は[モバイルフレンドリー テストツール]でそれぞれ確認できます。
URLのひも付け
PCページとスマホページでURLが異なる場合、PC用ページにrel=“alternate”、モバイル用ページにrel=”canonical”の設定をします。これは全ページが対になるように入れなければいけません。
PCページへの記述
<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”[スマホURL]” />
スマホへの記述
<link rel=”canonical” href=”[PCページURL]” />
参考）「スマホ専用URLにおけるアノテーション」
2.ファイル名命名規則
HTMLファイルでも、画像ファイルでも、ディレクトリでも、内容を推察しやすい英語を各ファイル(HTML毎、画像ファイル毎に)重複することなく命名しましょう。SEOというよりも、何より管理しやすいです。尚、整理・分類されたサイト構造を実現するにはディレクトリ構造とリンク構造を合わせて考える必要があります。管理上、ディレクトリの親子関係も考慮しながら、含有するコンテンツに関係するディレクトリ名を使用してください。
3.構造化データ
schema.orgの要件に従って、JSON-LD形式でマークアップしていきましょう。とりあえず最低限の対象は、ぱんクズ、企業名、企業ロゴ、住所、電話番号、ampくらいでしょうか。articleは必要に応じて、またレシピやその他様々な案件に応じてマークアップ要素は増加していきますので、英語ですがココから種類をご確認ください。また、構造化データのテストツールでしっかり実装されているかどうかの確認もしましょう。
4.URLの正規化
www有無を.htaccessファイルへ記述
wwwの有り無しを統一します。例えば、www有にする場合は
RewriteCond %{HTTP_HOST} ^[URL]\.com
RewriteRule (.*) //www.[URL].com/$1 [R=301,L]
と.htaccessファイルに記述します。www無にする場合はその逆です。
index.html等を.htaccessファイルへ記述
index.html等のファイル名を読み込ませず、”/”で終わらせるように設定します。内部外部リンクの分散を防ぐにも効果的です。.htmlだけでなく、様々なパターンもあると思いますので、
RewriteBase /
RewriteCond %{THE_REQUEST} ^.*/index.(cgi|do|java|html|htm|php|py|rb|shtml|xhtml)
RewriteRule ^(.*)index.(cgi|do|java|html|htm|php|py|rb|shtml|xhtml)$ //%{HTTP_HOST}/$1 [R=301,L]
と.htaccessファイルに記述します。
canonicalタグ
パラメータ付URLの重複インデックス回避のため、canonicalタグを使って、デフォルトで各ページに正規URLとして記載するのもアリです。
ただ、パタメータ付URLも含めてGoogleに読み込ませたい場合は、この限りではないのでURLの命名方針に合わせて設定ください。
5.内部リンク
ルートパス化
“/”から始まるルートパスにてリンク先を定義しましょう(相対パスは非推奨です)。
アンカーテキストの命名規則
例え施策キーワードを含まない場合でも「記事」「ここをクリック」「こちら」等の一般的な文言は使用しないようにしましょう。また、リンク先の内容と異なったり、無関係だったり、URLだったり、段落になるほど長かったり、テキストに見えるCSS(隠しテキスト)だったり、施策キーワードの詰め込みは良くありません。
ナビゲーション関連
画像やJavaScriptでも構いませんが、極力テキストリンクを使用しましょう。AMP HTML施策ともバッティングしませんし。あと、分類が必要と思われる程の情報を詰め込んだナビゲーションだったり、逆に細かすぎる分類だったり、Flashを使用したりするナビゲーションメニュー内容も避けましょう。
パンくずリスト
「内部リンクの重要性」を参考に、サイト構造を示すようなパンくずリストを設置してください。
6.HTTPS化(SSL)
私は心から推奨しているのがHTTPS化です。今後のHTTP/2に伴うブラウザ対応定義を考えても導入をオススメします。実際には、SSLを取得した上で、
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
と.htaccessファイルに記述します。
7.robots.txt
robots.txtファイルを設置しましょう。robots.txtに記載する内容は基本的に
Sitemap:[URL]/sitemap.xml
くらいですが、一応「noindexとrobots.txtの因果関係」もご参考ください。
8.XMLサイトマップとRSS/Atomフィード
設定しましょう。HTMLサイトマップの場合は飽くまでユーザー向けであって、有無によって直接ランキングには影響しないとGoogleは言っていますが、この2つはあった方が良いです。「XMLサイトマップとRSS/Atomフィードが必要な理由」もご参考ください。
9.titleの命名規則
これは私のやり方ですが、以下の命名規則だと管理もしやすく、キーワードのカニバリゼーションも防ぎやすいです。
文字数がどうしても全角30文字(～)をオーバーしてしまう場合は、カテゴリ名を省略する等して、個別に設定しましょう。「タイトルの設定について」をご参考ください。
10.meta descriptionの命名規則
これも私のやり方ですが、全角100文字前後を目安にページの内容をまとめて各ページオリジナルで設定ください。検索流入を見込まなかったり、施策上優先度の低いページであれば未設定(空白)でも構いませんが、余裕がある限り記載していくことをオススメします。「descriptionの設定について」もご参考ください。
11.meta keywordsの命名規則
正直、アルゴリズム上考慮されていない部分ですが、ページごとの施策の管理上では有効です。ページごとに施策対象のキーワードを3～4語程度記入すると良いでしょう。もちろん、ファイル容量の削減を目的としたり、競合他社からの施策キーワード推察を防ぐために記述しないこともアリです。
12.h1タグ
「見出しタグの設定について」をご参考ください。h1は各ページオリジナル内容で設置しましょう。ちなみに、h1はページ回遊者に分かるページの見出しタイトル(既にサイト内に訪問している人向け)という位置付けで、titleはサイト外から訪問する場合のページの見出しタイトルという位置付けですので、その認識で考えれば、サイト名等を除いたtitleをh1タグで括るようにしても良いと思います。
13.altの命名規則
altは画像の題材が分かるように、4語程度以内で形成して設置ください。要は画像の内容が分かる説明的なファイル名(ASCII文字コード)です。キーワードの詰込だったり、長い文章は避けて下さい。ちなみに、画像ファイルは分散して保管せず、1箇所やいくつかのディレクトリでまとめるようにすると良いです。「画像の取り扱いについて」もご参考ください。
14.AMP
モバイル高速表示化を実現するために、AMP HTMLを実装しましょう。目的と意味については「AMP時代到来！？」をご参考ください。
＜実装参考URL＞
https://www.ampproject.org/docs/get_started/create_page.html
//www.blackwatcher.net/entry/2015/12/02/073000
15.OGPタグの設置
OGP(Open Graph Protocol)を設定すると、FacebookやGoogle＋等のSNSにリンク先として表示される際、専用の(リッチな)表示が出来ます。各SNSからのクリック率を向上させられたり、titleタグ等とは異なるSNS専用のキャッチーなタイトルを表示させることが可能です。各ページの<head>内に
<meta property=”og:description” content=”[表示したい記事説明文]”>
<meta property=”og:title” content=”[表示したい記事タイトル]”>
<meta property=”og:url” content=”[表示したい記事URL]”>
<meta property=”og:image” content=”[表示したい画像URL]”>
<meta property=”og:site_name” content=”[表示したいサイト名]”>
<meta property=”og:email” content=”[表示したいメール連絡先]”>
等と記載します。
以上です
疲れました。また追加していくかもしれませんし、変更していくかもしれませんが、ご参考までにふわふわ書いてみました。
