今回は、htmlのherdタグ内に書くといいものをいくつかご紹介します。
Web上で見ているサイトは通常htmlで書かれています。その中に<herd>タグ・<body>タグがあります。
<herd>タグはそのWebサイトの情報を書く、訪問者には見えないところです。
検索エンジンやサーバーに向けての指示になります。
herdタグにはmetaタグやlinkタグを書く
metaタグをheadタグ内に書くことで、文字コードの指定やブラウザ表示、検索エンジンへのアプローチを指定します。
linkタグとをhead内に書くことで、CSSファイルの読み込みをしたり、サイト内のページ同士の関係性を検索エンジンに伝えたりすることができます。
ともに、種類が多いので、Web制作の現場や個人ブログのカスタマイズでも結局何を入れたらいいの？ SEOに効くのは？？ と迷ってしまいますよね。
そこで、今回はheadタグ内に書くべきもの、<meta>タグ・<link>タグをまとめてお伝えします。
herdタグ内に書くものまとめ
それでは、各タグとその中身を見ていきましょう。
文字のエンコード
<meta charset="utf-8"> 文字コードは、コンピュータが多くの言語圏内で利用されるようになったことで種類もたくさんあります。
ある文字コードで作成されたデータを別の文字コードに変換しようとしたとき、表示するコードが存在しないとサイトが正しく表示されず、文字化けするなどの問題が起きてしまいます。 日本語で作ったサイトにはこれを必ず入れておきましょう。
Internet Explorerにむけて
<meta http-equiv="X-UA-Compatible" content="IE=edge">InternetExplorerは、別バージョン向けに作成されたWebサイトを表示すると、テキストや画像が正しい位置からずれたり、Webページの一部が空白になったりするなど、正しく表示されないことがあります。
こちらのmetaタグを指定することで、 互換表示が有効になり、別バージョンのInternet Explorerでも同じように表示できるようになります。
スマホ向けに必須！ viewport設定
<meta name="viewport" content="width=device-width, initial-scale=1.0">スマホやタブレット表示に対応したレスポンシブデザインのサイトを作るには、viewport設定のmetaタグを書いておくのが必須です。
タイトルタグはSEO対策にも
<title>ページタイトル</title> titleタグ内で指定した「ページタイトル」は、検索結果やブラウザのタブに表示されます。どんなサイトページなのかわかるように必ず書いておくようにしましょう。
WordPressやはてなブログなどでは、タイトルは重要ですから、だいたい自動出力されるようになっています。
ディスクリプション
<meta name="description" content="ページの内容紹介文"> ページの内容を表す文章を書くところです。このタグで指定した文章は、検索結果のタイトル下に表示されますので、わかりやすく書くことで、見ている方のクリック率を高めるためにけっこう重要です。
しかし今はSEOや検索順位の上昇に効果はないようです。あくまでも検索している人のために書くようにしましょう。
Twitterカード/その他SNSでの記事リンク表示
<meta name="twitter:card" content="カード種類">
<meta name="twitter:site" content="@Twitterユーザー名">
<meta property="og:url" content="ツイッターに投稿したい記事のURL">
<meta property="og:title" content="記事のタイトル">
<meta property="og:description" content="記事の内容">
<meta property="og:image" content="画像のURL"> Twitterカードとは、ツイートに貼り付けられた記事へのリンクを魅力的に見せる機能のことです。具体的にはツイートの中に「アイキャッチ画像」や「記事のタイトル」などが表示されるようになります。
設定なしだと、記事へのリンクは文字だけで表示されます。
設定していると、アイキャッチ画像やタイトルなどのページ情報が決まった形で自動表示されるようになります。
Twitterでの記事拡散を重視しているのであれば、設定をしておいた方がいいでしょう。
カードの種類には、summaryかsummary_large_imageを入れます。
上2つはTwitter用ですが、下4つはFacebookなどほかのSNSとも共通になっています。
WordPressやはてなブログなどでは、いちいちコードを書かなくても簡単に設定できるので、それは探してみてくださいね！
メタキーワードは意味がない？
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">以前はSEO効果があると言われていたmetaタグの一つに、metaキーワードタグがあります。
以前は、メタキーワードから、ページのコンテンツを判断していたため設置することでSEOに効果がありました。しかし、メタキーワードが悪用されるようになったり、Googleクローラーの性能が上がったことで、2020年現在では、一切の効果を持たなくなったそうです。
「Googleは、metaキーワードの情報を一切見ていないと発表した」と公表しているので、そうなんでしょう…。
URLの正規化、linkタグの『link rel=”canonical” 』
<link rel="canonical" href="正規化するURL"> SEO的にも重要なlinkタグです。同じ内容で URLや見た目は違うというような重複するページに使います。これを設定しないと、検索エンジンからのページ評価が分散してしまいます。（www.があったりなかったり、.htmlがあったりなかったり）
例えば、PCとスマホとで、同じ内容だけどURLが異なるとします。その時スマホ用のページのhead内に<link rel=”canonical” href=”PCの方のページURL”>と書けば、PCのURLに検索からの評価をまとめることができます。
CSSやJavaScriptファイルの読み込み
<link rel="stylesheet" href="CSSファイルのURL">
<script src="JavaScriptファイルのURL"></script>html内でなく、外部のスタイルシートにCSSを書いている場合は必須ですのでお忘れなく！
おわりに
この他にもたくさんの種類のlinkタグやmetaタグがありますが、基本的にはこの内容を抑えておけばOKだと思います。ブログサービスなんかによってはこんな難しいこと考えなくてもいいよっていうところがおおいですし。
自分でサイトデザインしている場合は結構重要なのでおさえておきましょう。
他にもどんなタグがあるか、興味ある人はタグ辞典などもありますので引いてみてくださいね♪
HTML5 & CSS3ポケットリファレンスはブログやサイトの制作・リニューアルに実用性バツグンです。
目的別だから、困ったときに探しやすいですし、小さめサイズなので机の上でも邪魔になりません。
発売日は2018年ですが、ほとんど現役で使えるます！
管理人おすすめの一冊です。
コメント