2020.06.12コーディングの学習をしていて、どうしても後回しにしがちなのがheadタグ内のコード。実はとても重要な内容を記述する部分で、SEOにも影響を及ぼすものでもあるのでしっかりと覚えておきたいところです。メタタグをサポートしています。googleがサポートしている特別なタグ目次headタグとbodyタグ記述重要タグtitleタグmetaタグcharsetでエンコードの種類を指定name=”description”でページの概要を指定name=”viewport”でモバイルのビューポートを設定name=”robots”で検索エンジンのロボットへの指示name=”format-detection”で自動リンクをオフhttp-equiv=”X-UA-Compatible”でIEのレンダリングで指定OGPタグでSNSでのウェブサイト情報を明示linkタグrel=”canonical”で内容が重複するサイトの評価をまとめるrel=”stylesheet”で外部CSSスタイルシートを読み込むrel=”icon”でアイコンを指定scriptタグnoscriptタグまとめheadタグとbodyタグbodyタグ内にはウェブサイトに表示される部分を記述する部分であり、コーディングの学習を行っている人はどうしてもこちらを優先しがちです。headタグ内の記述はhtmlファイルの情報を宣言し、検索エンジンやブラウザが理解するために記述するものであり、直接的にウェブサイトの表示されるものではありません。headタグ内の記述内容はページに関する付加情報(メタデータ)や表示に必要な設定を行います。SEO的には重要な部分であるため、しっかりと学習しておきたいところです。ウェブサイトは広告であり、集客できなければ意味がありません。デザインやコンテンツも重要ですが、SEO対策の一歩としてheadタグ内の内容も理解しておきましょう。一度覚えて記述しておけば、あとはサイトごとに一部修正するだけなので、すぐに対応できます。Webデザイナーとしてはしっかりと押さえておきたい部分なので、理解しておきましょう!!記述重要タグheadタグ内に記述できるタグはたくさんあり、何を記述したらよいかわからないと思いますので、絶対に記述すべき重要タグから説明していきます。ここだけ抑えておけば最低限大丈夫です。name=”format-detection”OGP設定linkタグscriptタグtitleタグ<title>サイトやページのタイトル</title>titleタグは記述必須のタグです。例外で省略することもできますが、必ず記述するようにしましょう。charset="UTF-8">サイトで表示される文字の種類を指定します。指定しないと、文字化けしてしまいます。content="記事の紹介文を記述します">SEO対策としても重要な指定。検索結果で表示されるウェブサイトの紹介文を記述します。content属性を使用して、ウェブサイト・ページの紹介文を記述します。ページの概要がわかる文章を記述しましょう。ほとんどの検索エンジンでは、検索結果で表示される概要は最大160文字なので、文章が全て表示されるように160文字以内で記述しましょう。initial-scale=1">モバイルデバイスに合わせた表示(レスポンシブ)をするための指定。レスポンシブ対応は今や必須となりますので、必ず記述するようにしましょう。これで、Googleの検索エンジンにモバイル対応のページであると判定されます。nofollow">検索エンジンのロボットに指示する内容を記述します。content属性で指示する内容を記述します。ページ内のリンクを追跡しない検索結果に表示してほしくない、リンクを追跡してほしくないページなどに記述します。普通に表示してほしいページには記述しないでください。content="telephone=no">iOSでは電話番号やemailアドレス、住所をサイト内で見つけると、自動でリンクを付ける便利な機能がありますが、不要なリンクを付けられてしまうことがあるので、必ず記述しておきましょう。その上で、リンクを付けたい電話番号やemailアドレス、住所にはhtmlでaタグを指定し、CSSでテキストのスタイルを記述します。Explore)には互換表示機能があり、古いバージョンのIEで表示することが出来ます。この互換表示機能を設定していると、HTML5で作成したサイトはレイアウト崩れを起こしてしまいます。この記述をすることで、最新の標準規格で表示することが出来るため、レイアウト崩れを起こさずに表示されます。OGPタグでSNSでのウェブサイト情報を明示property属性を使用し、明示する情報を指定します。SNSでページを紹介したり、シェアした時に使用されます。content="@twitterユーザー名">コチラはname属性を使用するので、間違えないように注意してください。linkタグlinkタグはrel属性でリンクタイプを、href属性でURLを指定します。rel=”canonical”で内容が重複するサイトの評価をまとめる内容が同じページが、別のURLで存在していることはGoogleの評価を大きく下げます。canonicalを設定することで、設定したページはhrefに指定したURLのコピーだと示すことができ、評価をまとめることが出来ます。当然のことですが、これは自サイト内での重複問題でのみ有効なものです。別のサイトと内容が同じものには適用されません。rel=”stylesheet”で外部CSSスタイルシートを読み込むCSSなどを記述した外部ファイルを、htmlに反映させるために記述します。title="">hrefにはCSSのファイル名を記述しますが、パスを間違えないように注意しましょう。sizes="〇〇×〇〇">ブラウザ上部のタブtitle横のアイコンブックマークページスマホホーム画面へのリンク時ファビコンと呼ばれるアイコンの設定です。type属性のファイル形式はpngやgifなどです。jpg画像は使用しないようにしましょう。sizes属性でサイズを指定。scriptタグscriptタグはsrc属性で外部のスクリプト(JavaScriptなど)を指定するか、scriptタグ内にスクリプトソースを直接記述します。src="ファイルのURLやパス"></script><script>スクリプトソースを記述</script>scriptタグにおいては、headタグ内だけでなく、bodyタグ内でも記述可能です。linkタグに似ていますが、ファイルのURLやパスの指定はsrc属性を使用し、また閉じタグがあるので注意しましょう!noscriptタグスクリプトが動作しない環境用の代替情報の表示を指定することが出来ます。scriptタグ同様headタグ内だけでなく、bodyタグ内でも記述できます。まとめtitleタグ・metaタグ・linkタグ・scriptタグ・OGPタグの設定方法SEO対策に重要な記述内容サイトの表示に影響する記述の内容bodyタグ内のコーディングに時間を割いてきた人には、見慣れないタグばかりで最初は戸惑うかもしれませんが、重要なものは限られているので、一度覚えてしまえばそれほど難しくないと思います。一部の内容を変更すれば、他はそのまま使えますので、試しに一度記述してみると良いでしょう。関連記事HTML&CSS初心者が覚えておくべきhtmlタグを紹介!これだけ覚えればサイトの構造は作成できます!!「Webデザイナーの学習をなにからはじめたらいいかわからない」「htmlってなに」そんな悩みを抱えている方に、まず初めに学ぶ必要のあるhtmlタグを説明します。これからのタグを覚えればほとんどのサイトの構造は作成することができます。HTML&CSS新しい横並びレイアウトのプロパティFlexboxを身につけて他のWEBデザイナーに差をつける!!横並びレイアウトを行うCSSプロパティのフレックスボックス。今後スタンダードになるこの技術を一から丁寧に説明していきます。HTML&CSS5分でわかる!CSSのfloatプロパティの使い方を仕組みから教えます!!floatを使うと「レイアウトが崩れてしまう!」「思ったようなレイアウトにならない!」などCSSでつまづくポイントでもあるfloat。図解を使用して一から説明していますので、簡単に理解できます!!ので是非一読下さい!!HTML&CSSなぜに文字化け?!保存時のエンコードを確認しようコーディングを行っていて、実際にブラウザで表示したときに文字化けが起きてしまったことはありませんか...HTML&CSSSEO対策としてHTMLのタグ設定を理解する!効果的な4つの方法HTML記述がSEOに影響を及ぼすことをご存じですか?正しい記述方法を知っていますか?学習を始めたばかりの人は特に、表示にばかり気を取られ、W3CやGoogleが推奨しているHTMLの記述方法をあまり気にしていない人も多いはず!それほど難しくなく、すぐにでも対応できる内容なので、まとめて説明しました。「背景が上手く設置できない」「スマホ画面で背景が切れてしまう」などCSSでの背景画像の設定に困っている方は、この記事を読めばどんな背景画像でもレスポンシブで対応することが可能になります。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。スポンサーリンクTomoアラフォーで勉強を始めて40歳手前でWebデザイナーとして働き始めた男。アラフォーから始めるウェブデザイナー.メニュープロフィールWEBデザイナーSEO在宅ワークプライバシーポリシーホーム検索トップサイドバースポンサーリンクTomoアラフォーで勉強を始めて40歳手前でWebデザイナーとして働き始めた男。タイトルとURLをコピーしました。