コードで解決するSEO対策

10869 ワード
SEO HTML HTML テキストリンク

この内容について

この内容は、こんな感じのコードを書けばSEO対策になる
ものをまとめたものです。

SEO対策とは

SEOはSearch Engine Optimizationの略で、
Googleなどの検索結果を上位にするための対策のこと。

SEO対策 必須

h1タグは1つ

Webページ1つにつきh1タグは1つにします。

h2タグにはキーワード

h2タグをWebページに使うことがあると思いますが、使うタイミングとしては
そのページのキーワードを含めたものにh2タグをつけるようにしましょう。
それ以外の見出しはh3以下を使います。

また今では推奨となっていませんが、私の感覚では今でもメタキーワード
は入れた方が検索エンジンの評価は良いです。

HTML例
<meta name="keywords" content="SEO対策,００,００">

ディスクリプション

Webページの概要を記述します。
概要は、Googleの検索結果に表示され、ユーザはそれを見てサイトを訪問するか決めることもあるので、
より関心を持たせるよう記述しましょう。

HTML例
<meta name="description" content="SEO対策を知っていますか？SEO対策は実は００をするだけで良いんです。">

URLの正規化

値canonicalを使って、URLの正規化をします。
ページをリライトして、リダイレクトする場合は必ずする作業ですが、
これは全てのページでやっておくと良いでしょう。

これは、「このページはこのURLで評価してください」という意味です。

HTML例
<link rel="canonical" href="https://korenarawakaru.com">

OGP設定

OGPのコードを記述します。
詳しい書き方は、こちら

HTML例
<head prefix="og: http://ogp.me/ns#">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:title" content="ページタイトル">
  <meta property="og:description" content="ページ説明">
  <meta property="og:url" content="ページURL">
  <meta property="og:type" content="article">
  <meta property="og:image" content="画像のURL">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@twitterid">
  <meta name="fb:app_id" content="数字15桁">
</head>

構造化マークアップ

構造化マークアップのコードを記述します。
ホームページには、「Website」、
記事ページには、「Article」と「BreadcrumbList」を指定します。
詳しい書き方は、こちら

HTML例
<script type="application/ld+json">
  [
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      "headline": "サイト名",
      "description": "ディスクリプション",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "ホームページURL"
      },
      "image": {
        "@type": "ImageObject",
        "url": "OGP画像"
      },
      "author": {
        "@type": "Person",
        "name": "サイト管理者名",
        "image": "サイト管理者画像"
      },
      "publisher": {
        "@type": "Organization",
        "name": "サイト管理会社名/サイト名",
        "logo": {
          "@type": "ImageObject",
          "url": "ロゴ画像"
        }
      },
      "datePublished": "作成日付(例:2020-04-01T00:00)",
      "dateModified": "更新日付(例:2020-05-01T00:00)"
    }
  ]
</script>

SSL化

Webページにアクセスした時に、「このサイトは安全ではありません」と表示されることがある時は
SSL化できていないので、SSL化するようにしましょう。

SEO対策 推奨

サイト表示速度

サイトの表示速度は、3秒以内がベストですがリッチなサイトにしようとすると
難しいので、5秒以内になるようにするのがベターです。

テストは下記のサイトを使ってやりましょう。
PageSpeed Insights
GTmetrix

タイトル最適化

Webページのタイトルは、検索結果で一番目立つので、これを最適な名前にすることで、
ユーザのクリック数を増やすために重要です。
なお、タイトルを後から変更すると一時的に検索順位が下がるので、そこは注意しましょう。

レスポンシブ対応

レスポンシブ対応はスマホ向けに見やすく表示させることです。
最近ではPCよりもスマホで検索する人が多いので、今どきのサイトは必須です。

まとめ

SEO対策をすることでサイトへの流入が増え、
企業であればお問い合わせの増加やブログ収益の増加などが見込めます。
今回紹介したコードを書くだけでSEO対策になるのであれば、是非やっておきたいものですね(^^)

この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)

JavaWeb日記——Shiroのパスワード暗号化
linuxでのLAMPインストールと構成