サイト制作時のSEO向け要件として定義しておきたい16選

ライフハック的なコンテンツページのタイトルにありそうな書き方をしましたが(笑)、サイト制作時に事前に制作会社に依頼したい設定内容をざっくり16個挙げてみましたので、ご紹介します。細かく言えば30個近くありますが、面倒なのでとりあえず16個書き連ねてみたいと思います。

クリスマスシーズン

ふわふわ

1.スマホ対応

とりあえず最低限のスマホ対応ですね。

モバイルフレンドリー化

  • 携帯端末では一般的でないソフトウェア(Flash等)を使用していないこと
  • ズームしなくても判読できるテキストを使用していること
  • ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
  • 目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること
  •  
    これは今のところの最低限遵守内容です。対応状況の確認方法として、サイト全体において未対応部分を検出するには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有にする場合は

    RewriteEngine on
    RewriteCond %{HTTP_HOST} ^[URL]\.com
    RewriteRule (.*) //www.[URL].com/$1 [R=301,L]

     
    と.htaccessファイルに記述します。www無にする場合はその逆です。
     

    index.html等を.htaccessファイルへ記述

    index.html等のファイル名を読み込ませず、”/”で終わらせるように設定します。内部外部リンクの分散を防ぐにも効果的です。.htmlだけでなく、様々なパターンもあると思いますので、

    RewriteEngine On
    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として記載するのもアリです。

    <link rel=”canonical” href=”[正規URL]” />

     
    ただ、パタメータ付URLも含めてGoogleに読み込ませたい場合は、この限りではないのでURLの命名方針に合わせて設定ください。

    ふわふわ

    5.内部リンク

    ルートパス化

    “/”から始まるルートパスにてリンク先を定義しましょう(相対パスは非推奨です)。
     

    アンカーテキストの命名規則

    例え施策キーワードを含まない場合でも「記事」「ここをクリック」「こちら」等の一般的な文言は使用しないようにしましょう。また、リンク先の内容と異なったり、無関係だったり、URLだったり、段落になるほど長かったり、テキストに見えるCSS(隠しテキスト)だったり、施策キーワードの詰め込みは良くありません。
     

    ナビゲーション関連

    画像やJavaScriptでも構いませんが、極力テキストリンクを使用しましょう。AMP HTML施策ともバッティングしませんし。あと、分類が必要と思われる程の情報を詰め込んだナビゲーションだったり、逆に細かすぎる分類だったり、Flashを使用したりするナビゲーションメニュー内容も避けましょう。
     

    パンくずリスト

    内部リンクの重要性」を参考に、サイト構造を示すようなパンくずリストを設置してください。

    ふわふわ

    6.HTTPS化(SSL)

    私は心から推奨しているのがHTTPS化です。今後のHTTP/2に伴うブラウザ対応定義を考えても導入をオススメします。実際には、SSLを取得した上で、

    RewriteEngine on
    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

     
    と.htaccessファイルに記述します。

    ふわふわ

    7.robots.txt

    robots.txtファイルを設置しましょう。robots.txtに記載する内容は基本的に

    User-agent: *
    Sitemap:[URL]/sitemap.xml

     
    くらいですが、一応「noindexとrobots.txtの因果関係」もご参考ください。

    ふわふわ

    8.XMLサイトマップとRSS/Atomフィード

    設定しましょう。HTMLサイトマップの場合は飽くまでユーザー向けであって、有無によって直接ランキングには影響しないとGoogleは言っていますが、この2つはあった方が良いです。「XMLサイトマップとRSS/Atomフィードが必要な理由」もご参考ください。

    ふわふわ

    9.ページネーションタグ

    「1 > 2 > 3 > 4 > 5」等のように、ページ送りになるページを対象にページネーションタグ(rel=”prev/next”)を入れるようにしてください。

    <link rel=”prev” href=”[前のページのURL]” />
    <link rel=”next” href=”[次のページのURL]” />

     

    ふわふわ

    10.titleの命名規則

    これは私のやり方ですが、以下の命名規則だと管理もしやすく、キーワードのカニバリゼーションも防ぎやすいです。

  • キーワードを含む各ページでオリジナルのタイトルを使用
  • ファイル名|カテゴリ(ディレクトリ)名|(装飾語)のサイト名
  • 文字数は全角30文字以内に収めてください
  •  
    文字数がどうしても全角30文字(~)をオーバーしてしまう場合は、カテゴリ名を省略する等して、個別に設定しましょう。「タイトルの設定について」をご参考ください。

    ふわふわ

    11.meta descriptionの命名規則

    これも私のやり方ですが、全角100文字前後を目安にページの内容をまとめて各ページオリジナルで設定ください。検索流入を見込まなかったり、施策上優先度の低いページであれば未設定(空白)でも構いませんが、余裕がある限り記載していくことをオススメします。「descriptionの設定について」もご参考ください。

    ふわふわ

    12.meta keywordsの命名規則

    正直、アルゴリズム上考慮されていない部分ですが、ページごとの施策の管理上では有効です。ページごとに施策対象のキーワードを3~4語程度記入すると良いでしょう。もちろん、ファイル容量の削減を目的としたり、競合他社からの施策キーワード推察を防ぐために記述しないこともアリです。

    ふわふわ

    13.h1タグ

    見出しタグの設定について」をご参考ください。h1は各ページオリジナル内容で設置しましょう。ちなみに、h1はページ回遊者に分かるページの見出しタイトル(既にサイト内に訪問している人向け)という位置付けで、titleはサイト外から訪問する場合のページの見出しタイトルという位置付けですので、その認識で考えれば、サイト名等を除いたtitleをh1タグで括るようにしても良いと思います。

    ふわふわ

    14.altの命名規則

    altは画像の題材が分かるように、4語程度以内で形成して設置ください。要は画像の内容が分かる説明的なファイル名(ASCII文字コード)です。キーワードの詰込だったり、長い文章は避けて下さい。ちなみに、画像ファイルは分散して保管せず、1箇所やいくつかのディレクトリでまとめるようにすると良いです。「画像の取り扱いについて」もご参考ください。

    ふわふわ

    15.AMP

    モバイル高速表示化を実現するために、AMP HTMLを実装しましょう。目的と意味については「AMP時代到来!?」をご参考ください。
    <実装参考URL>
    https://www.ampproject.org/docs/get_started/create_page.html
    //www.blackwatcher.net/entry/2015/12/02/073000

    ふわふわ

    16.OGPタグの設置

    OGP(Open Graph Protocol)を設定すると、FacebookやGoogle+等のSNSにリンク先として表示される際、専用の(リッチな)表示が出来ます。各SNSからのクリック率を向上させられたり、titleタグ等とは異なるSNS専用のキャッチーなタイトルを表示させることが可能です。各ページの<head>内に

    <meta property=”og:type” content=”[記事タイプ|例)article,blog,website]”>
    <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=”[表示したいメール連絡先]”>

     
    等と記載します。

    ふわふわ

    以上です

    疲れました。また追加していくかもしれませんし、変更していくかもしれませんが、ご参考までにふわふわ書いてみました。