SEO内部対策の確認には、次のGoogle提供のツールを使うのがおすすめです。

この記事では、あなたのブログサイトがSEO的に良いのか悪いのかが分かる2つツールを紹介します。

ポイントは「ページ表示速度」と「モバイル対応」。Googleが提供しているツールを使えば、”今の状況” と “どのような点を改善すればいいか” が分かるようになります。

SEOは難しいですが、かんたんなところから少しづつ一緒に学んでいきましょう。

参考にした書籍「これからのSEO内部対策 本格講座」

この記事では、次の書籍をベースにSEO内部対策の確認方法を紹介します。

これからのSEO内部対策本格講座 [ 瀧内賢 ]

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

この本はSEO内部対策について、基礎的なことを勉強するのにおすすめです。

今回紹介する内容は主に「第3章 SEO内部対策の応用・発展」に書かれています。

SEO内部対策のポイント「ページ表示速度」と「モバイル対応」

SEO内部対策の確認ポイントは次の2つ。

ページ表示速度は検索結果の順位に影響しているとGoogleが公表。さらにベージ表示速度が遅いと、ユーザーがページから離れてしまう要因にもなってしまいます。

また、PCよりもモバイル(スマホ、タブレット)の検索数が増えたことから、Googleはモバイル対応も重視しています。

これらの状況からから「ページ表示速度」と「モバイル対応」はSEO的にも重要なポイントとなっています。

SEO内部対策の確認①：ページ表示速度

ページ表示速度は、Googleの提供ツール「PageSpeed Insights」で確認できます。使い方は次の通り。

ページ表示速度は0〜100のスコアで表示され、値によって “速い・平均・遅い” に分類されます。

参考に次の記事で「ページ表示速度」を確認してみます。

≫ Amazonのコワーキングスペース「AWS Loft Tokyo」の利用方法を15枚の写真付きで紹介

PageSpeed Insightsの確認結果①：モバイル

速度スコアは「25」で “遅い” という結果でした。

改善できる項目は「オフスクリーン画像の遅延読み込み」が大きいです。これを改善すればページ表示速度をアップさせられる見込みです。

PageSpeed Insightsの確認結果②：パソコン

速度スコアは「87」で”平均”という結果。モバイルの結果(=25)と大きく異なりました。

こちらは改善点が「適切なサイズの画像」なので、添付している画像サイズを小さくすれば良さそうです。

このようにGoogleツール「PageSpeed Insights」を使えば、次の2つが分かります。

SEO内部対策の確認②：モバイル対応

モバイル対応は、Google Search Consoleの「モバイルフレンドリーテスト」で確認できます。

先ほどと同じ次の記事で「モバイル対応」を確認してみます。

≫ Amazonのコワーキングスペース「AWS Loft Tokyo」の利用方法を15枚の写真付きで紹介

モバイルフレンドリーテストの確認結果

「このページはモバイルフレンドリーです」という結果で、テスト結果は良好でした。

次のような場合は、モバイルフレンドリーではないという判定になるようです。

モバイルフレンドリーテストも、どのような点を改善すればいいか具体的に教えてくれます。

まとめ

いかがでしたか？

この記事では書籍「これからのSEO内部対策 本格講座」をベースに、あなたのブログサイトがSEO的に良いのか悪いのかが分かるツールを紹介しました。

ポイントは「表示速度」と「モバイル対応」。それぞれGoogle提供のツールで確認できます。

いずれも “今の状況” と “どのような点を改善すればいいか” が分かるようになります。まずはあなたのブログサイトで確認してみてはいかがでしょうか？

この記事が少しでもあなたのお役に立てれば幸いです。

＼参考にした書籍はこちら／

これからのSEO内部対策本格講座 [ 瀧内賢 ]

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

投稿 SEO内部対策：ページ表示速度とモバイル対応はGoogleツールを使えば無料で確認できます！ は COCOFREE に最初に表示されました。

SEO内部対策の基本は次の7つ。

「SEO」って聞くと難しいイメージがありますが、知ってしまえば意外とかんたんなもの多いです。

この記事では当ブログを使って、SEO内部対策の「ポイント」と「確認結果」を紹介していきます。

少しでもSEOに対する苦手意識をなくせるようにお役に立てれば嬉しいです。

一緒にSEOについて勉強していきましょう。

参考にした書籍「これからのSEO内部対策 本格講座」

SEO内部対策について紹介するにあたり、参考にした書籍は以下の通りです。

これからのSEO内部対策本格講座 [ 瀧内賢 ]

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

この本はSEO内部対策について、基礎的なことを勉強するのにおすすめです。

すべての内容を紹介すると非常にボリュームが多くなってしまうので、この記事では基礎となる「第2章 SEO内部対策の基盤構築」について紹介していきます。

SEO内部対策の基本は7つ

初心者が取り組みやすいSEO内部対策は次の7つです。

そのほか細かい設定などありますが、まずは基本となるこの7つを押さえておきましょう。

それぞれ順番に解説します。

SEO内部対策①：タイトル

タイトルはSEOにおいて最も重要な要素です。ポイントは次の3点。

当ブログのSEO内部対策の現状【タイトル】

引用：勢いで会社員を辞めてフリーランスに！お金の負担はどのぐらい増えるのか？（社会保険編） 

この記事の【タイトル】は次の通りです。

この記事では「フリーランス　社会保険」あたりのキーワードで上位表示を狙っています。

キーワードは先に書いていない、”！”を入れている、重要語句は2回使用していないといずれも「×」という結果でした…

SEO内部対策②：URL

URLが分かりやすいと読者に内容が伝わりというメリットがあります。また検索エンジンに対しても伝わりやすくSEO的に効果があります。

ここでのポイントは次の2点。

当ブログのSEO内部対策の現状【URL】

引用：【2019年確定申告】個人事業主・フリーランスに向けて「生命保険料控除」をわかりやすく解説しました

【URL】は次の通りです。

長過ぎるURL、「-」は5つも使用しており、こちらも全て「×」という結果です…

SEO内部対策③：見出し1(h1タグ)

h1タグは、コンテンツの中ではSEO上もっとも重要なタグです。ポイントは次の2点。

当ブログのSEO内部対策の現状【見出し1(h1タグ)】

引用：アマゾンの領収書を一括で発行する方法を解説!! 確定申告に向けた準備をはじめよう！

WordPressのブログ記事のタイトルに当たる部分です。【h1タグ】の中は次の通りです。

それぞれ「○」とした理由は次の通りです。

• h1タグの中に画像を表示させるimgタグが含まれていないので「○」
• h1タグとh2タグ(見出し2)の間にテキスト(pタグ)が含まれているので「○」

SEO内部対策④：見出し2〜6(h2〜h6タグ)

h2〜h6は数字が小さいほどSEO的に効果があります。ポイントは次の2点。

当ブログのSEO内部対策の現状【見出し2〜6(h2〜h6タグ)】

次の記事の一部を参考に見てみます。

≫ 横浜のコワーキングスペース一覧！「ドロップイン料金」と「月額利用の料金」を比較しました 

見出し2〜4(h2〜h4タグ)のあとにすべてテキスト(pタグ)があるので「○」という結果でした。

SEO内部対策⑤：テキスト

小さすぎる文字はSEO的に不利になります。Google推奨の基本フォントサイズは16pxです。

ポイントは次の2点。

当ブログのSEO内部対策の現状【テキスト】

引用：2019年確定申告：「医療費控除」に必要な書類の書き方と提出方法をわかりやすく解説します

この記事では「矢印」の部分を意図的に目立たなくさせていますが、いずれも「×」という結果だったので改善が必要です。

SEO内部対策⑥：画像

画像の設定もSEOに関係します。ポイントは次の4点。

当ブログのSEO内部対策の現状【画像】

引用：Amazonのコワーキングスペース「AWS Loft Tokyo」の利用方法を15枚の写真付きで紹介

この画像の情報は次の通りです。

ファイル名が複雑すぎ「-」も複数使用しているので「×」、alt属性は書いているもののイメージしにくい名前のため「△」という結果でした。

なお、画像サイズは、1,200pxかつJpegであればOKと判断しています。1,200pxの根拠は以下を参考にしています。

なお、「なんで1,200pxなんですか？」と聞かれそうですが、その回答は「1,200pxくらいだと、PCで画像が綺麗に見えて、かつ、重たすぎないから」です。

引用：【簡単】WordPressサイトで画像圧縮して、サイトを軽量化する方法｜manablog

SEO内部対策⑦：スニペット

スニペットはWebページの概要説明の部分です。

このスニペットにキーワードが入っていると太字表示され、ユーザーの目に付きやすです。またSEO的にも有効です。ポイントは次の3点。

当ブログのSEO内部対策の現状【スニペット】

この記事の【スニペット】は次の通りです。

この記事は「コワーキングスペース　都内」あたりのキーワードで上位表示を狙っています。

「こんにちは、ふじぱん（@fujipan8960）です。」は明らかに不要ですね…

 

補足説明

WordPressの場合では、プラグインを導入することでスニペットの入力ができます。

【参考】All in One SEO Packの場合

まとめ：SEO内部対策の基本の7つ

いかがでしたか？

これまでに紹介した「SEO内部対策の基本の7つ」を整理してみます。

まずはこの7つのSEO対策について、できるところから取り組んでみてください。

この記事が少しでもあなたのお役に立てれば幸いです。

＼参考にした書籍はこちら／

これからのSEO内部対策本格講座 [ 瀧内賢 ]

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

投稿 SEO内部対策：初心者でもできる7つのSEO対策（WordPressブログ向け） は COCOFREE に最初に表示されました。

ブログのメニューにアイコンが付いてるサイト、見たことありませんか？

このブログ（COCOFREE）でも使っているコレ↓です。

このアイコンを誰でもかんたんに付けれます。

手順はたったの3つ。

• コードをコピペ
• アイコンを選ぶ
• コードをコピペ

これで完成です。

この記事では「WordPressのメニューにアイコンを付ける方法」を画像付きで詳しく解説していきます。ぜひあなたのブログのカスタマイズに役立ててください。

それでは順に紹介します。

＼このブログのWordPressテーマはこちら／

OPENCAGE 公式ページ

WordPressのメニュー（グローバルメニュー）にアイコンをつけるメリット

まず何でメニューにアイコンを付けるのがいいのか。メリットを2つあげます。

• 見栄えがよい
• アイコンでメニュー何を示しているのか分かる

分かりやすくアイコンがある場合とない場合を並べてみました。

ある場合
ない場合

あきらかにアイコンがあった方が見栄えがいいですね。それぞれのメニューが何を示しているのかも分かりやすいです。

このアイコンは誰でもかんたんに付けることができます。その方法について続いて解説していきます。

WordPressのグローバルメニューにアイコンを付けるのは誰でもかんたんにできる

WordPressのメニューにアイコンを付ける手順は次の3つです。

1. テーマのheadタグにコードを貼りつける
2. サイトでアイコンを選ぶ
3. アイコンのコードを貼りつける

それぞれ順番に説明していきます。

1. テーマのheadタグにコードを貼りつける

メニューに付けるアイコンは「Font Awesome」というWebアイコンフォントを利用します。これを利用する準備として以下コードをコピーしてブログのheadタグ（<head>〜</head>内）に貼りつけます。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

引用：【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

headタグへの貼りつけ方は次のどちらかでできます。

WordPressテーマのカスタマイズ機能をつかう

テーマによってはカスタマイズ機能でheadタグに追記ができます。いくつか例を載せておきます。

LION BLOGの場合	SWALLOWの場合

WordPressのダッシュボードから「外観」＞「カスタマイズ」を選んで、headタグに追記できるメニューがないか探してみてください。

あった場合は、そこへ”Font Awesomeを利用するためにのコード“を貼りつければOKです。

WordPressテーマの「header.php」に追記する

上記のカスタマイズ機能がない場合は、テーマの「header.php」にコードを追加します。手順は次の3つです。

①. WordPressのダッシュボードから「外観」＞「テーマの編集」を選択。

②. テーマファイルの中の「header.php」を選択。

③. </head>の直前に”Font Awesomeを利用するためにのコード”を貼りつける。

これでFont Awesomeが使えるようになりました。

2.サイトでアイコンを選ぶ

次にメニューに付けるアイコンを選びます。

①. 「Font Awesome」にアクセスして「Icons」をクリック。

②. キーワードを入れてアイコンをリサーチ。（海外サイトなのでキーワードは英語で）

③. 使いたいアイコンを選択。（無料版で使えるのは色の濃いアイコンのみ。無料版で十分。）

④. アイコンのコード（<i…> </i>）をクリックしてコピー。

これでアイコンのコードがコピーできました。あとはこのコードをWordPressのメニューに貼り付ければ完成です。

3.アイコンのコードを貼りつける

①. WordPressのダッシュボードから「外観」＞「メニュー」を選択。

②. 「ナビゲーションラベル」のメニュー名の前に、先ほどコピーしたアイコンのコードを貼り付け。

これで完成です。

さらに追加でアイコンを付けたい場合は、”2″と”3″の「アイコンを選んでコードをコピペ」を繰り返せばOKです。

補足

WordPressのテーマによっては「メニューにアイコンをつける機能」が標準で付いています。あなたのテーマに入ってないか一度確認してみてください。

参考：JINのカスタマイズ事例

WordPressのメニューにアイコンをつけるのにプラグインはおすすめしません

ここまで紹介した「ブログのメニューにアイコンを付ける方法」はWordPressのプラグインを使ってもできます。しかしプラグインは便利な反面デメリットもあります。

主なデメリットは、

• 大量のプラグインを入れると、サイトの動作が重くなる
• プラグイン同士の相性が悪い場合、サイトの動作不良が起こる

どうしても必要なものを除いてできるだけプラグインは追加しないようにしましょう。メニューにアイコンを付けるのはプラグインを使わずこれまで紹介した方法でかんたんにできます。

まとめ

いかがでしたか？

WordPressで作ったブログのグローバルメニューに、アイコンを付ける方法を紹介しました。

手順はたったの3つ。

1. テーマのheadタグにコードを貼りつける
2. サイトでアイコンを選ぶ
3. アイコンのコードを貼りつける

トラブルを避けるためにもプラグインを使わない方法を画像付きで解説しました。

ぜひ今回紹介した「WordPressのメニューにアイコンをつける方法」を使って、あなたのブログをカスタマイズしてみてください。この記事が少しでも役に立ったら、シェアしてもらえると嬉しいです。

＼このブログのWordPressテーマはこちら／

OPENCAGE 公式ページ

投稿 WordPressのグローバルメニューにアイコンを付けるのは超かんたん！手順を画像付きで紹介!! は COCOFREE に最初に表示されました。

ブログ記事をTwitterでシェアするとき、少しでも目立たせたいと思いませんか？この記事ではその悩みを解決するために「Twitterカード」の活用方法を紹介します。

このTwitterカードがあるなしで、あなたのツイートが読者の目にとまる可能性が大きく変わってきます。記事をシェアしたいときは必須の機能でしょう。

この記事では、

• Twitterカードにはどんな種類があるのか？
• 目立ちやすいTwitterカードの画像サイズ
• Twitterカードの設定方法

について図解つきで解説します。

記事を読めばツイッターカードを活用する方法をより理解することができるでしょう。それでは順に紹介していきます。

Twitterカード（ツイッターカード）とは

あらためてツイッターカードについて解説します。

ツイッターカードはツイートに記事を貼り付けたときに“画像”や”タイトル”を表示させる機能です。わかりやすくツイッターカードの”なし”の”あり”で比べるとつぎの通り。

あり	なし

あきらかに“あり”の方が目立つのが分かりますよね。

またツイッターカードでは、画像の表示方法を“要約”と“要約の大きい画像”の2種類から選ぶことができます。

Summary （要約）	Summary with large image （要約の大きい画像）

“要約の大きい画像”の方が目立ちます。記事ごとに設定もできるので、内容にあわせて変えてみてください。

ツイッターカードは”ツイートを目立たせることができる”ことを紹介しました。しかし、設定を間違えると誤ったかたちで目立ってしまいます。

とくに注意してほしいのが「画像サイズ」。これを間違えるとせっかくのツイッターカードの見栄えが悪いものに…そうならないために、適切な画像サイズをつぎに解説します。

Twitterカードのアイキャッチ画像の縦横比は「1.91 : 1」で！「2 : 1」でもOK

ツイッターカードのアイキャッチ画像の適正サイズは、それぞれつぎの通りです。

「要約の大きい画像」の場合、画像サイズを間違えるとすごく見栄えの悪いツイッターカードになってしまいます。

具体的にどうなってしまうのか、実例つきで紹介します。

TwitterカードのNG例（3 : 2）

よくあるのがこちら。縦横比が「3 : 2」の画像で、ブログのアイキャッチに主に使われるサイズです。

表示させたい画像はこちら。

これをツイッターカードのアイキャッチ画像に設定した場合、

画像の上下左右がきれてしまい、文字が見えなくなってしまってます。

TwitterカードのOK例（1.91 : 1）

縦横比「1.91 : 1」の画像。

ツイッターカードの表示はつぎの通りになります。

ばっちりですね。見せたいものがすべて表示されており見栄えも良いです。

Twitterカードの適正画像サイズ

結論：ツイッターカードのアイキャッチ画像の縦横比は「1.91 : 1」で！

注意）Twitterのタイムラインで表示される際は、上下左右が若干トリミングされるので少し余白をもたせておきましょう。

でも「1.91 : 1」なんて覚えにくいよ…そんな方は「2 : 1」でも大丈夫です。

「2 : 1」の画像の場合、左右が少し多めにトリミングされるので余白を少し多めにとっておけばOK。（下図参照してください。）

これでツイッターカードのアイキャッチ画像のサイズは大丈夫ですよね。つづいて、このアイキャッチ画像を設定する方法について解説します。

記事ごとにTwitterカードのアイキャッチ画像を設定する方法

WordPress（ワードプレス）でツイッターカードを設定する方法を紹介します。

手順はつぎの通りです。

1. プラグイン「All in One SEO pack」をインストール
2. All in one SEO packのソーシャルメディア設定
3. 投稿記事のソーシャル設定

順番に解説していきます。

1. プラグイン「All in One SEO pack」をインストール

すでにインストール済みの方は、2.へ進んでください。

①WordPressの管理画面から「プラグイン ＞ 新規追加」を選択。

②”プラグインの検索”に「all in one seo」と入力。画像の「All in One SEO Pack」が出てきたら”今すぐインストール”をクリック。

③インストールが完了したら”有効化”をクリック。

これで「All in One SEO pack」のインストールは完了です。

2.All in One SEOのソーシャルメディア設定

インストールが完了したら、WordPressの管理画面に「All in One SEO」が表示されるので、こちらの設定をします。

①All in One SEO＞「機能管理」を選択して、ソーシャルメディアをクリック。

②「Activate」が「Deactivate」に変更されればOK。

3.投稿記事のソーシャル設定

つづいて投稿記事でツイッターカードの画像を設定します。

①投稿ページの下の方にある「All in One SEO Pack」の「ソーシャル設定」タブを選択。

②「Twitterカードタイプ」の”要約の大きい画像”を選択して、「カスタムTwitter画像」横の”画像をアップロード”をクリック。

③さきほど作成した「1.91 : 1」の画像をアップロードし、”Choose Image”をクリックする。

④「更新」ボタンを押して、投稿ページを保存する。

以上でツイッターカードの設定は完了です。最後に設定したツイッターカードが正しく表示されるか。それを確認する方法を紹介します。

Twitterカードのアイキャッチ画像の表示を確認する方法

ツイッターカードのアイキャッチ画像を確認するには「Card Validator」というツイッターの公式サービスを利用します。確認する手順はつぎの通りです。

1.「Card Validator」にアクセス。

2. Twitterにログイン。

3. “Card URL” に記事のURLを貼り付け、”Preview cart”をクリック。

4. “Card Preview” にツイッターカードのプレビューが表示されます。その下のLogがすべて”グリーン”であればOKです。

なお、ツイッターカード設定から反映されるまで少し時間がかかります。ですので、少し時間に余裕をもって確認することをおすすめします。

Twitterのタイムラインでアイキャッチをきれいに表示させるもうひとつの方法

ここまで「ツイッターのタイムラインでアイキャッチをきれいに表示させる方法」としてツイッターカードを紹介しました。それ以外にもうひとつ方法があるので紹介します。

それは「画像を添付する」です。これまで紹介した方法と比較するとこんな感じ。

要約の大きい画像	画像を添付

ツイッターのタイムラインは、“ツイッターカード”より”添付画像”が優先されます。

タイトルや概要文を表示させたくないときは「画像を添付する」方法もおすすめです。ただし、添付する画像の縦横比は「16 : 9」で！こちらもお忘れなく。

＼ツイッターの画像は16:9で／

ツイートの添付写真は、そのまま貼り付けると上下が切れちゃうんですよね…

写真が1枚なら「16:9」がおすすめ！

ケータイのタイムラインだと、ちょうど見切れないサイズ!!

まわりに話したら意外と知らない人が多かったので…ぜひ試してみてー???? pic.twitter.com/PBbz62Vdmj

— ふじぱん｜朝×フリーランス (@fujipan8960) 2018年10月13日

まとめ

いかがでしたか？

「Twitterのタイムラインでアイキャッチ画像をきれいに表示させる方法」としてツイッターカードを紹介しました。

やり方をおさらいします。

1. Twitterカード用の画像を縦横比「1.91 : 1」で作成！「2 : 1」でもOK（その場合、左右の余白を少し多めに）
2. WordPressのプラグイン「All in One SEO Pack」のソーシャルメディア設定
3. 投稿記事の「ソーシャル設定」で、”Twitterカードタイプ”と”カスタムTwitter画像”を設定

以上で完成です。

あらかじめツイッターカードがどのように表示されるか確認しておきたいときは「Card Validator」を使いましょう。

ツイッターカードは、Twitterのタイムライン上で記事を目立たせるのに必須のツールです。うまく活用してあなたの記事を目立たせるよう活用してください。

この記事が少しでも役に立ったら、シェアしてもらえると嬉しいです。

投稿 ツイッターカードつかってますか？ブログ記事をタイムラインで目立たせるアイキャッチ画像の設定方法 は COCOFREE に最初に表示されました。