meta-seo-inspector_ecmg

マーケティング

基本的なSEOチェックに。DescriptionやOGPを確認できるChrome拡張META SEO Inspectorの使い方

メタタイトル、メタディスクリプション、OGP、alt属性・・・ゴニョゴニョ

はじめは意味の分からないギョーカイ用語だったこれらのワード。でもサイト運営を続けていくうちに、なんとなーく理解できて、自分なりに設定するようになりますよね。

SEOにどれだけの効果があるのか?何をどこまで厳密に設定するべきなのか?考え方も様々です。私はというと…【メタタイトル・ディスクリプションやOGPの設定、hタグエラーやalt漏れの確認】あたりまでは、記事ごとにざっくりと実践しています。

meta-seo-inspector_ins1

程度はともかく、これらの対策が必要だと判断し、同じように実践している人も多いでしょう。せっかく良かれと思って取り入れたなら設定のし忘れがないかの確認はしておきたいところ。

あ、でも大体でやってるんで。そこまでしなくていいかなー

まあ確認はしたいけど、いちいち編集画面に戻るのメンドクサイし

そんなことより、もっと大事な対策があるだろう!

どの意見にも共感するところがあります。でも、きっと取り組む意味はあるんだろーなー・・・とは思っているでしょう?つまり気軽に確認できればいいってことですよね。そうでなければ続けにくいですから。

じゃあ、ブラウザ拡張機能でサラッと確認できるようにしましょう。ここではChromeの拡張機能【META SEO Inspector】を紹介します。彼と一緒にできることは主に以下のとおり 

主な機能

メタタイトル・ディスクリプション・キーワードの確認

Facebook用OGP・Twitterカード形式等の確認

alt属性抜けなど、ページ内の注意点の確認

nofollowリンクを視覚化して確認

いずれも調べたいページを表示している状態で即!確認できるようになります。

META SEO Inspectorの導入

まずは以下からChromeに追加します。利用者も多く評価も高いので安心です。もちろん無料。

Chrome ウェブストア 

インストールするとこんな可愛らしい電球さん  がアドレスバー横に表示されます。

meta-seo-inspector_01

これだけでOK。もう使用できます。設定も必要ありません。

各項目の確認

調べたいページを表示した状態で電球さんをクリックすると、そのページの詳細が現れます。

meta-seo-inspector_02

ファースト・インプレッションは『ややこしそう・・』でしょう。大丈夫です。

メタタイトル・ディスクリプション・キーワードの確認

まずは一番上。メタタイトル、メタディスクリプション、メタキーワードが確認できます。

meta-seo-inspector_02-1

補足-ちょっとした私見

WordPressユーザーの場合、メタ情報はプラグインで設定していることが多いと思います。
(このサイトでもプラグインを取り入れています)

私の利用しているテーマではデフォルトでメタタイトルとメタディスクリプションを設定できる独自項目があり、念のためプラグインと合わせ両方に設定しています。上の画像でディスクリプションが2つ表示されているのはそのためです。

 「ディスクリプションの重複」という響きはイメージ的によろしくないかもしれませんが、Google SearchConsoleで指摘される「重複するメタデータ(descriptions)のあるページ」とはまた別問題。そして小手先を気にし過ぎないことも大切だと考えます。

Facebook用OGP・Twitterカード形式等の確認

その下ではFacebook用OGP設定の確認ができます。

meta-seo-inspector_02-2

アイキャッチ画像もちゃんと指定されていますね。クリックすればデータの確認もできます。

meta-seo-inspector_02-3

meta-seo-inspector_03

これらは設定漏れを確認するためだけでなく、「あれ?ディスクリプション、どんなこと書いてたっけ?」な場合にも重宝します。さらにその下ではTwitter用の設定も確認できます。

meta-seo-inspector_02-4

シェアしてもらった際の体裁確認もラクラクです。

ページ内の注意点を確認

とはいいつつも。それはそれは便利ではあるけども。自分でひとつずつ項目確認していくのであれば、まだメンドクサイ。(と思う人もいるはず)

大丈夫です。電球インスペクターさんはページ内で「ど忘れ事項」「注意事項」があった場合、赤文字でアラート表示してくれます

【問題】下の画像ではどんな注意点をアラートしてくれているでしょう 

meta-seo-inspector_07

でした。さすがにタイトルフザケすぎです的なツッコミ機能は残念ながら実装されていないようですが、英語表記でもすぐに慣れそうなインターフェイスですね。

hタグエラー、alt属性抜けもアラート

さて、下の画像に挙げる例は何の変哲もない、とある日常を綴った記事の抜粋です。

meta-seo-inspector_09

こんな微笑ましい記事においても、「ど忘れ事項」「注意事項」は存在しているのです。もちろん電球スペクターさんは見逃しません。

meta-seo-inspector_10

指摘されていること、分かりましたか?

h1タグは基本的に、サイトタイトルまたは記事タイトルのみに、ひとつだけ利用されるものです。h1タグをさらに記事本文内に使用してしまっているので、「too many h1 tags」と注意されている状態です。

またもう一つは「1 images with missing ALT attribute」つまり、上の(主人公の身体に褐色の稲妻が走ったランチメニューの)画像はalt属性が抜けている、という注意喚起になります。

文章を書くことに集中していると、こんな”ついうっかり”はよくあることです。なんて頼りになる電球でしょう。

バッジ表示で一目瞭然

META SEO Inspectorはこちらから能動的に「確認しにいかなければならない」ような面倒なツールではありません。上に挙げてきたような注意点の有無や注意箇所の数は、実は電球アイコンにバッジ表示されるので一目瞭然なんです。だから・・・

注意点が無い状態を表す【OK】が表示されていると、ちょっと嬉しくなります。

meta-seo-inspector_04

meta-seo-inspector_01

nofollowリンクを視覚化して確認

外部リンク先のページ内コンテンツが、(失礼ながら)少し低品質かもしれない。または規約違反をしているように見える・・・なんていう時には、nofollow属性を付けることも昔ながらのSEO対策としては定石です。

で、記事を仕上げた後に、「アレ?nofollow付けたっけ?」な事態もよくあることです。そんな時に役立つのがやはりMETA SEO・・・電スペさんです。

上部「options」から「Show nofollow links (pink outline)」にチェックを入れると、nofollow属性を付加しているリンクにだけ、ピンク色の枠が表示されます。

meta-seo-inspector_05

meta-seo-inspector_06

これも地味ながら助かります。確認するために記事編集画面に戻って、目をチカチカさせながら探す・・・といった必要が無くなります。

META SEO Inspectorの役割

meta-seo-inspector_ins2

もれなく必要!と言えそうなメタタイトルやメタディスクリプション、OGP設定の確認はもちろん、注意点をチェックしてくれる点など、かゆいところに手が届くのは大きな付加価値ですね

ただしこのツールに【OK】をもらえたからといって「SEO対策は完璧!」なわけではありません。むしろもっと注力する必要のあることの方が多いくらいでしょう。

このツールでチェック出来るのは【意識次第で出来ることを、出来ているか】の確認です。SEOの観点からも、この簡単な作業量に見合う価値は十分あると考えます。自分が「やっておいた方がいい」と思っていたのであれば尚更のこと

また、この拡張機能を使いはじめると、利用しながらSEOの基本的なルールの一端を覚えていくことにもなるので、サイト開設一年生にもとても有用です。もちろん高学年の先輩方も、他サイトの情報を参考にする使い方など、より有効に活用することが出来るでしょう。

ちゃんと設定出来ているか確認したかったけどなんとなく知らんぷりしていた人は、この機会にぜひ取り入れてみて下さい。きっと、安心感がぐっと上がるはずです。

 関連記事

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simpl…
  2. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  3. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…
  4. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  5. ポチッ、でビョイーン。クリックで画像を拡大表示させるワードプレスプラグイン「Ea…

関連記事

  1. intuitive-custom-post-order_ec

    ワードプレス

    ほら、こんなに直感的。投稿記事の順番を並び替えるWordPressプラグインIntuitive Cu…

    記事の順番だって、自由に決めたい。ブログなどのトップページで表示さ…

  2. insert-card-link_ecmg

    ワードプレス

    クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

    リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い…

  3. business-books_ecmg
  4. todoist-constitution_ec

    マネジメント

    ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法

    ストレスフリーで効率的な下準備。いざ記事を書こうとしても、すぐに手…

  5. simple-image-sizes_ec-ps

    ワードプレス

    メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simple Image Si…

    挿入画像サイズ、もっと自由に選びたい。お悩み相談室のコーナーです。…

  6. retina-weight-saving_ecmg
【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. display-speed_ec
  2. theme-change_ecrt
  3. retina_ecmg
  4. tcd-theme-user-review_ecmg
  5. todoist_ec
  6. tcd-mag_ecmg-ps

ピックアップ記事

  1. compress-jpeg-png-images-ecmg
  2. customized-theme-update_ecmg-1-ps
  3. tcd-theme-options_ecmg
  4. gif-animation_ec
  5. todoist-class_ecrt
  6. intuitive-custom-post-order_ec

タスク管理で、自己管理。

todoist

掘り出し記事

  1. backup-all-in-auto_ec
  2. theme-manual-update-ecmg
  3. analytics-ip-filter_ecmg
  4. LightShot-Screenpresso_ecmg

魅力的なブログを、今すぐ作る。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

ピックアップ記事

  1. gif-animation_ec
  2. quicktag_ecmg
  3. compress-jpeg-png-images-ecmg
  4. original-share-button_ecmg-ps

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. enlarge-image-ecmg
  2. spark-tutorial-ecmg
  3. modern-dilemma-ecmg
  4. paradigm-shift-ecmg

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考系ピックアップ

  1. modern-dilemma-ecmg
  2. blog-contents_ecrt
  3. irreplaceable-ecmg
  4. reset-button_ecrt
  1. business-books_ecmg

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
  2. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  3. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  4. display-speed_ec

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計…
  5. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
PAGE TOP