くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > SEO > SEO/OGP関連のmetaタグをまじめに対応しようとしてみた。

SEO/OGP関連のmetaタグをまじめに対応しようとしてみた。

SEO OGP Webサービス

リリースした新しいWebサービス「トランスノート]を公開するときに、
まじめにSEO関連を調べてみたので、その時の備忘録。

やらなきゃいけなことがたくさんあった。。

metaタグといっても、いろいろある。

  1. 検索関連の基本的な設定
  2. ファビコンやiPhoneやAndroidのショートカットで表示されるタッチアイコン
  3. ソーシャル関連のメタタグ(OGP)
  4. Twitterカード用の設定
  5. Facebook用の設定

やることをまとめると以下の感じ。

SEOに対応するためにタスクリスト

  • 用意する
    • サイト名
    • タイトル(各ページ)
    • 著者名/Copyright
    • 説明文
    • キーワード
    • ファビコン用の画像(700×700のpngとsvg)
    • OGP用の画像(縦630px横1200px。ただし、まんなかの630pxx630pxに収まるくらいがよい)
    • Twiterカード用の画像(OGP用の画像でもOK)
    • TwitterID
  • favicon generatorで画像を一括生成
  • 用意した文書と画像を元に、metaタグを設定
  • Google Search Console の設定(サイトマップの登録, robots.txt の登録)
  • Google Analyticsの設定(コンバージョン設定, Google Search Console との連携)

SEOのためのチェックリスト

確認用のツールがいろいろ公開されているので、それぞれ試してみる。

設定するmetaタグ

設定するタグは、以下な感じ。

SEO/基本要素

<meta charset="utf-8">
<title>{{ タイトル }}</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="{{ 説明文 }}">
<meta name="keywords" content="キーワード,キーワード">
<meta name="author" content="{{ 作成者 }}">
<meta name="copyright" content="{{ コピーライト }}">

ファビコン/タッチアイコン

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="shortcut icon" href="/favicon.ico">

<!-- iPhone/iPad用 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

<!-- Safari用 -->
<link rel="mask-icon" href="/safari-icon.svg" color="#FFFFFF">

<!-- AndroidのChrome用 -->
<link rel="icon" type="image/png" sizes="192×192" href="/android-chrome-192×192.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#FFFFFF">

<!-- Window8/10用 -->
<meta name="msapplication-config" content="/browserconfig.xml" >
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/mstile-144×144.png">

OGP(ソーシャルメタタグ)

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb#">
<meta property="og:type" content="website" /> <!-- website/blog/article/profileなど -->
<meta property="og:title" content="{{ タイトル }}" />
<meta property="og:description" content="{{ 説明文 }}">
<meta property="og:url" content="{{ ページURL }}" />
<meta property="og:image" content="{{ 絶対パス }}/img/ogp.jpg" />
<meta property="og:site_name" content="{{ サイト名 }}" />

Twitterカード

<meta name="twitter:card" content="summary_large_image" /> <!- summary, summary_large_image, app, player cards ->
<meta name="twitter:site" content="@{{ twitter id }}" />
<meta name="twitter:creator" content="@{{ twitter id }}" />

Facebook

<meta property="fb:app_id" content="AppID">

インデックス対策: インデックスしてほしくないとき

<meta name="robots" content="noindex,nofollow"> <!-- クローラへの指示。indexしない、リンクを辿らない -->

以上！！

参考にしたサイト様