目指せ最強のheadタグ【解説編】

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SEO
コピペで簡単!言語別OGタグの記述方法まとめ【目指せ最強のheadタグ】の解説です。

最強のheadタグ全容【html ver】

各metaタグの詳細

ページの内容部分

文字コードの設定です。特に理由が無い限りUTF-8のままでいいでしょう。

ホームページのタイトルです。ページ上部のタイトルバーに表示されたり検索結果に大きく出たりします。
32文字以内にしないと…となってしまう場合があるので注意。

スマホ対応サイトを作る場合に必須です。CSSでmedia screenタグを使うのに必要です。

descriptionは検索エンジンで表示される文章です。 SEO的に最も重要と言われています。64文字程度でキーワードを2〜3回入れるのがベストなようです。
keywordはdescriptionほど重要度が高くありません。Googleにはほとんど見られないようですが今後変更される可能性もあるので入れておきましょう。コンマ区切りで5個以下程度で入力します。(例: content=”koejima,SEO”)

OG部分

PR

  • title

    facebook等OGPが表示されるサイトに貼りつけた時に一番大きく表示される文字です。
    ページのタイトルや記事のタイトルなどにすると良いでしょう。

  • type

    ページの種類です。
    いくつかあるのですが基本的にはwebsiteかarticleしか使わないのではないかと思います。
    type一覧はOGPタイプ(og:type)の設定をwebsiteとarticleで自動振り分け – web覚書にありましたので気になる方はご覧ください。
    blog等の場合ルートページをwebsiteにし記事ページをarticleにするのがいいようです。

  • url

    そのページのURLです。

  • description

    そのページの説明です。OGPが表示されるサイトに貼りつけた時に表示される説明文となります。
    上のdescriptionと同じでいいでしょう。

  • image

    OGPが表示されるサイトに貼りつけた時に表示される画像です。推奨サイズは1200px × 630px以上です。
    登録する前にOGP画像シミュレータで確認して見ることをおすすめします。

  • site_name

    サイトの名前です。

  • email

    emailアドレスです。

  • phone_number

    電話番号です。

  • latitude

    店舗などの場合位置を登録しておくことが出来ます。緯度です。

  • longitude

    経度です。

OGタグがちゃんと設定出来ているかどうかはFacebook Developers Debuggerで確認することが出来ます。何かを変更してもすぐには反映されない仕様なので何かを変更した場合はFetch new scrape informationを何度か押してみましょう。

Twitter部分

基本的にはOGと同じです。twitter公式のTwitterカード – Twitter Developpersが分かりやすいのでそちらをご覧ください。
Twitterでカードを表示させるためにはTwitter Developpersの登録とページの申請が必要です。

favicon

faviconです。タブに表示される小さなアイコンみたいなやつです。
Favicon Converter等で作成しましょう。

CSS

CSSへのリンクです。

CSSやJSの一部をIE対応

IE9以下ではHTML5やCSS3に対応していません。出来るだけその影響を少なくしある程度整えて表示してくれるスクリプトです。

PR

この記事が気に入ったら
いいね ! しよう

Twitter で
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。