SEOで注意すべきheaderタグの中身についてまとめてみた
今回は、人目に触れることの少ないheaderタグの書き方について説明します。
検索エンジンやSNSのクローラーがページを解析する時に使われます。
クローラーに自分の記事をアピールするために重要なタグです。
タイトル
titleタグはブラウザのタブ画像や検索結果の表示に使われる重要なタグです。
<title>記事のタイトル</title>
検索結果のタイトルは34文字まで表示されるので、
34文字に収まるように設定するのが良いです。
また、SNSではメタタグの情報を利用することもあるのでこちらでも設定しましょう。
<meta property="og:title" content="ページタイトル" />
meta description
meta descriptionはGoogle検索結果やSNSで表示されるページ説明で表示されます。
<meta name="og:description" content="ページの説明">
ページの説明は300文字程度だと良いようです。
検索結果で表示された時に検索キーワードが太文字で表示されるので
キーワードを散りばめると良いでしょう。
viewportとは
viewportはデバイスごとの画面サイズの違いを吸収する仕組みです。
これを書かないとスマホで文字が小さくなるなどの問題が起こります。
基本的には以下のおまじないを書いておくと問題ないです。
<meta name="viewport" content="width=device-width,initial-scale=1">
SNS関連(Twitter,Facebookなど)のOGP
SNS関連のメタタグはまとめて紹介します。 先述のtitleとdescriptionも利用されるので設定しましょう。 これ以外にも次のmetaタグも設定しましょう。
設定例は次のようになります。
<meta property="og:title" content="ぽちっと画像編集" /> <meta property="og:description" content="ぽっちと画像編集へようこそ。本サイトでは簡単に画像の編集ができるツールを公開してます。" /> <meta property="og:image" content="https://pochi.apuriapuri.com/thumbnail.jpg" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@0nozawa" /> <meta property="og:url" content="https://pochi.apuriapuri.com/" />
行ごとに説明をします。 1行目のimageはTwitterなどのカード形式のリンクで利用される画像を指定します。 注意点として、画像のurlは相対パスではなく、ドメインを含むURLで指定しましょう。
2行目のtwitter:cardは、画像の表示方法を指定します。 summary_large_imageを指定すると大きな画像の下にタイトルと記事の説明が表示されます。 summary_cardを指定すると画像の横にタイトルと記事の説明が表示されます。
3行目のtwitter:siteは、Twitterの「@アカウント名」を入力しましょう。
4行目のog:urlは、ページのURLを入力します。
以上を設定してTwitterでの表示を確認したい場合はCard validatorで確認しましょう。
https://cards-dev.twitter.com/validator
さもないと次のような失敗ツイートをすることになります。 本当は画像を表示される予定でしたが画像のパスが相対パスになっていたのが原因で画像が表示されていません…
favicon
faviconは最近はスマホでサイトをお気に入りにした時のアイコンなどで 表示されるため様々なサイズのfaviconが存在します。
頻繁に利用されるのは16x16,32x32,48x48です。 少し前までは、これらをicoファイルにひとまとめにするのが一般的でした。 しかし、現在だと直接画像を指定するのがメジャーになっています。
一通りfaviconを設定すると次のようになります。
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="shortcut icon" href="/favicon.ico"> <link rel="shortcut icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="shortcut icon" type="image/png" sizes="192x192" href="/favicon-192x192.png"> <link rel="shortcut icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="shortcut icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> <link rel="msapplication-TileImage" sizes="144x144" href="/ms-icon-144x144.png">
全てのサイズのファビコンを逐次生成するのは面倒なのでツールを利用しましょう。 ちなみに、私が作ったアプリなので是非使って見てください。
