RailsGitMySQLCUIHerokuSalesforceAWSAuth0エンジニア転職SEOアフィリエイトプロフィールプライバシーサイトマップこのブログは未経験からのエンジニア転職やプログラミングの勉強方法などを発信する、現役エンジニアによるエンジニアのためのトータル技術ブログです。ブログとご一緒にSNSのフォローもよろしくお願いします。LINE2020.10.22スポンサーリンクこんにちは、あっきー(IwswAkht)です。SEO対策を意識して検索順位を上げることを目指してブログを更新するならHTMLのタグの構造を意識してマークアップするべきとう記事を前回更新しました。前回の記事ではユーザの目に見えるbodyタグ内でSEO対策に有効なマークアップをする方法を解説しました。SEO対策はbodyのみに限りません。サイトの閲覧者には通常では見えない部分ですがheadというタグの中でも様々なSEO対策をしています。本記事ではSEOの内部対策の中で検索エンジンやブラウザに情報を提供する役目のhead内における適切なタグの使い分け方を中心に解説していきます。robotsDNSプリフェッチアイコンさいごにはじめにみなさんが普段ネットサーフィンするときに見ているWebページはHTMLにより作られています。HTMLは大きく分けるとheadと、bodyに分けることができます。head:<head>...</head>で囲まれたユーザに見えない部分のタグbody:<body>...</body>で囲まれたユーザに見える部分のタグheadタグ内には、検索エンジンやブラウザに情報を提供したり、指示を出したりするためのタグを書きます。調べない限りは訪問者の目には触れません。bodyタグ内には、今見ているこのページの文字や画像などのページをつくる要素がタグ内に書かれています。本記事ではheadタグについてを中心に解説していきます。今回で読むことで以下のことを学ぶことができます。基本的なheadタグの作り方SEO対策に有効なheadタグの作り方また、bodyタグで意識する点については以下の記事でまとめていますので合わせてご確認してみてください。【SEO】SEO対策に有効なbody内のタグをまとめてみたSEOの内部対策に関する記事です。検索エンジンに適切にコンテンツの内容を伝えるためにはどうすれば良いか?という観点でSEO対策に有効なbody内で使用するタグの使い方を解説しています。iwasawa-officialweb.com2020.10.09設定に必要なhead内のタグheadはユーザの目に見えない部分のマークアップですので、無くても見た目に変化ありません。言って疎かにしてはいけないです。この記事に書くタグは全部重要です。その中でもカテゴリを分けるなら設定のためのタグとSEOに効果的なタグに分けられます。はじめに設定のためのタグから、最低限これは欲しいというタグを3選解説していきます。文字エンコード文字コードを設定するタグで書き方としては以下になります。/>文字コードにはいくつか種類がありますが、混乱を避けるために説明は割愛します。マークアップがわからない方はこの書き方はおまじないとして書くものという風にまず認識しておきましょう。viewportスマホとタブレット設定用のタグで、書き方としては以下になります。/>これがないとスマホ/タブレット用にマークアップできません。これだけ生活に染み込んだスマホとタブレットですのでそれができないというだけでヤバイということは感覚で理解できると思います。Googleの意向としてもモバイルファーストであるべきと発表しており、サイト全体がモバイル対応されているかというのはサイトの評価にも関わってきますので必ず書いておきましょう。Explorer(以後IEと記述)の設定用のタグでして、書き方としては以下になります。/>IE設定って何という方に簡単に説明します。IEには互換モードという過去のバージョンで表示させる機能があります。この機能が有効になっていると古いIEと同じ表示がされ、デザイン崩れなどを起こしてしまう可能性があります。それを防止し、常に標準表示させるためにあるのがこの設定です。IEに対応させるための設定は他にもたくさんありますが、headにはこの設定を必ず入れると覚えておきましょう。マークアップを専門で行う人にIEどう思いますか?と聞いてみてください。大体の人は「IE死すべき慈悲はない」と言うと思いますが理由としてはここらへんの対応が大変という理由があるためです。笑SEOに効果的なhead内のタグ続いてSEOに効果的なheadタグをまとめていきます。SEOの最適化はサイトの検索順位に大きく関係しています。今回は中でも特に必要なSEOタグ5選を解説します。「SEO最適化=Googleの意向に従う」でもありますのでGoogle公式ブログなどを読んでみるのも良いと思います。たぬきち仙人これから解説するタグもGoogle公式ブログで書いてあるタグを参考にしておるのじゃタイトルタグtitleはページのタイトルを決めるタグになります。書き方としては以下です。HTML<title>閲覧しているページのタイトル</title>1<title>閲覧しているページのタイトル</title>このタグは検索ランキングにダイレクトで影響してくる超重要なタグのひとつです。titleに設定したページのタイトルはブラウザの検索結果や、開いたページのタブメニューに表示されます。画像からわかるようにtitleは検索者が欲しい情報をひと目で認識してもらうためにも非常に重要な情報になりますtitleを決める時に意識すべきことを以下にまとめました。検索キーワードを先に記述して簡潔にまとめる検索エンジンに何についての記事が的確に伝えるためです無用なスペースや「、」を使用しない文字の区切りと判断され省略される可能性があるためです24字程でまとめるPCでは30文字以降は表示されなくなったりするためできれば重要キーワードは2回使うより的確に伝えるためです。2回以上は過度な施策とされる評価が下がる可能性ありタイトルは全てオリジナルタイトルにする重複コンテンツは評価を下げる可能性があるからです。メタディスクリプションdescriptionはページの内容を説明するタグです。/>descriptionに設定した説明はブラウザの検索結果の以下の画像の部分に表示されます。descriptionを記述する目的はページの概要を説明することです。説明の内容にユーザが検索したキーワードに含まれている場合、該当した検索キーワードが太字となるため検索目的と合致したWebページと判断されるのでキーワードを入れ込んだ説明を心がける必要があります。descriptionを決める上で意識するべき項目を以下にまとめました。全体としての文字数を意識するPCでは110〜120文字なので全体はそれ以下、重要なことは50〜60文字以内で書く意識OGPOGPとはFacebookやTwitterなどのSNSでシェアされた時にリンクに表示される情報を設定するタグです。OGPの書き方は以下です。/>設定した場合ページをシェアされた時に以下の画像のように表示されます。現在のSEOは検索からアクセスされるオーガニック検索以外にも、SNSから流入するアクセスも非常に重要になってます。クリック率を高めるためにも見た目も非常に重要な要素になりますので、OGPの設定はマストに実行しておきたいところですよね。schema.orgschema.orgとはHTMLのタグによって構造化されたデータに対して何についての情報なのか定義する規格のひとつです。構造化されたデータを定義する規格には他にも種類がありますが、それらをまとめてボキャブラリといいます。<p>岡山</p>とマークアップした場合、検索エンジンでは「岡山」というただの文字列として認識します。この場合だと人の名前の「岡山」なのか住所の「岡山」なのか判断は難しいです。property="address">岡山</p>とすれば住所としての岡山として適切に定義することができるというイメージです。ボキャブラリの書き方は仕様として決まっておりこの仕様のことをシンタックスと呼びます。シンタックスの中でschema.orgによって定められ、Googleがサポートしているものは以下の3つです。LiteJSON-LDちなみに先ほどの例で出した書き方はMicrodataでの書き方です。どのシンタックスを使用するかの決まりはないですが、僕はMicrodataで書くことが多いです。このschema.org+Microdataでの書き方はheadでも使用可能で、実際の書き方としては以下のようになります。content="https://example.com/seo/">そのほかの使うシーンとしてよく使われるのはパンくずリストなどです。近年は検索エンジンの進歩により何もしなくても何についての情報なのかはある程度は判断してくれるようにはなってますが、意図的に適切に検索エンジンに伝えるためには必ず設定しておきたい項目ですね。alternateとcanonicalalternateとcanonicalはURLの正規化を行うためのタグです。URLの正規化とは何でしょうか?たとえば、以下の例のURLでは全部僕のサイトにアクセスすることができます。https://iwasawa-officialweb.com/?foo=bar123https://iwasawa-officialweb.com/https://www.iwasawa-officialweb.com/https://iwasawa-officialweb.com/?foo=barユーザから見れば表示されるコンテンツは同じですが、検索エンジンからしたら全てを別のページとして認識してしまいます。Googleは重複したコンテンツに対してマイナス評価をしますし、被リンクを獲得しても全てのURLがもしバラバラになってしまってはリンクの評価も分散されてしまうというデメリットがあります。ならないためにあるのがcanonicalでのURLの正規化です。指定したURLを正規ページとして検索エンジンに伝えることができます。canonicalは以下のように記述します。href="正規ページのURL">alternateはスマートフォンのURL設定です。レスポンシブ対応にしていればいいのですが、PCとスマホを別々のURLで運営しているサイトなどではこの設定が必要です。理由は先ほどと同じです。alternateの設定は以下になります。href="PCページのURL">max-widthの数値はでスマートフォンの表示サイズを設定しています。その他のhead内のタグその他のタグもいくつか紹介しておきます。あった方が良いかと思いますが優先度としてはここまで紹介したタグよりは低いかと思いましたので、その他で簡単にまとめさせていただきます。robots検索エンジンに対して検索させたくないページに対して設定するタグになります。書き方としては以下になります。/>低品質のページやSEO的に検索されない方が望ましいページはサイトの評価の低下に繋がってしまいますので適切に設定する必要があります。DNSプリフェッチDNSとはという話になるとややこしくなるので、一言でいうとサイトのスピード改善が期待できます。まとめサイトのように複数の参照リンクがあった場合にサイトによっては遅い場合などがあると思います。この時にDNSが関わっています。URLにアクセスしたときにサーバーは初めからhttps://xxx.comいうURLがあることを知りません。IPアドレスという数字の情報をDNSに送って初めてみなさんご存知のURLになるという仕組みがあるのです。DNSプリフェッチはそのURLに変換する作業を先にやっとこうよいうイメージです。DNSプリフェッチの書き方は以下になります。/>アイコンサイトのアイコンを設定するタグです。検索したときにサイトタイトルの横に出てくるアイコンです。設定の方法は以下になります。icoという形式に変換する必要があるのですが、その場合の書き方は以下になります。/>さいごに最後まで読んでいただきありがとうございます。SEO対策は奥が深いですね。僕もまだまだ勉強中の身ですので色々試してみて良い結果が出た対策は積極的に共有していこうかと思いますので引き続きよろしくお願いします。この記事を気に入っていただけましたらTwitterでもプログラミングやブログに関してのツイートをリアルタイムでしていますのでご一緒にフォローもお願いします。元キャバクラ店長から未経験でエンジニアに転職した異端児。自分の経験を元に、エンジニア転職や未経験からでも挫折しないプログラミングの勉強方法の発信をしてます。LINEスポンサーリンク駆け出しエンジニアのつぶやき関連記事SEO【SEO】SEO対策に有効なbody内のタグをまとめてみたSEOの内部対策に関する記事です。検索エンジンに適切にコンテンツの内容を伝えるためにはどうすれば良いか?という観点でSEO対策に有効なbody内で使用するタグの使い方を解説しています。元キャバクラ店長から未経験でエンジニアに転職した異端児。自分の経験を元に、エンジニア転職や未経験からでも挫折しないプログラミングの勉強方法の発信をしてます。転職して半年たって思うこと。元キャバクラ店長から未経験でエンジニアに転職した異端児。自分の経験を元に、エンジニア転職や未経験からでも挫折しないプログラミングの勉強方法の発信をしてます。転職して半年たって思うこと。2020.11.10【簡単】アマゾンアフィリエイトリンクのつくり方【ヨメレバ・カエレバではないよ】2020.08.30。