『LION MEDIA』SEO設定

『LION MEDIA』カスタマイズ【SEO設定】の使い方:初心者向け

最終更新日:2018.05.31


WordPressの無料テーマ『LION MEDIA』を解説しているページです。

今回のテーマは、カスタマイズ【SEO設定】の使い方です。

 

SEO設定とは、

検索エンジン(GoogleやYAHOO!など)の検索結果に、自分のWEBサイトが上位に表示されるように設定することをいいます。

<titile><meta description>の内容を効果的なもの(これが難しい)に変更するだけで、上位に表示される可能性があります。あくまでも可能性です。

 

こういった設定も大切ですが、しっかりとしたコンテンツがあればGoogleさんからは嫌われないらしい・・・。

 

 

広告

<title>と<meta description>

title と meta description

まずは、「ヤフー」と検索したときの検索結果を見てみましょう。

 

検索結果

 

ヤフー」の部分が<title>

日本最大級のポータルサイト。検索、オークション・・・」の部分が<meta description>

 

何かを探している人は、検索された結果の「タイトル」や「表示された文章」をチェックし、自分が探し求めている答えがありそうなサイトをクリックしますよね。

この「タイトル」や「表示された文章」という限られた情報の中で、いかにしてユーザーの心を掴むのかが重要になってくるということです。

TOPページの<title>設定

TOPページのタイトル設定

TOPページの<title>が反映されるのは、検索結果はもちろんですが、ブラウザーのタブにも表示されます。タブにマウスを合わせると全文見ることができます。

タイトルが反映される場所

サイトをブックマーク(お気に入り)登録したときにも表示されますよね。

 

タイトル設定ボックスに何も入力しない場合

SEO:TOPページの<title>設定

 

WordPressの一般設定で入力しているキャッチフレーズサイト名が表示されます。

 

この場合、「ママが笑う」毎日を。こころ豊かな生活を。|Mamma Ridea マンマリデアと表示されます。

タイトル入力欄の下にある「サイト名を表示する」のチェックボックスですが、タイトルを入力していない場合は、チェックの有無にかかわらずサイト名が表示されます。

 

タイトル設定ボックスに入力した場合

入力した文字がタイトルとして表示されます。「サイト名表示」のチェックボックスにチェックがない場合は、タイトルのみの表示となります。

 

左がタイトルのみ。右がタイトルとチェックあり

タイトルとチェックの有無

 

 

つまり、ここで表示させたいフレーズを設定すれば、一般設定のキャッチフレーズは無視され、設定しなければ、キャッチフレーズが活かされるということです。

広告

TOPページの<meta description>の設定

TOPページの<meta description>の設定

TOPページが検索結果に表示されたときに、この項目で入力した内容がサイトの説明文として表示されます。

TOPページの<meta description>設定

 

TOPページ以外はどうやって設定するの?

投稿ページや固定ページの<meta description>の設定は、各ページごとに行います。

 

詳細については、こちらのページで解説していますのでご参照ください。

『LION MEDIA』を使うとWordPressの投稿ページと固定ページはこう変わる!

 

CSS非同期読み込み設定

CSS非同期読み込み設定

Webサイトのページは、HTML&CSSという言語で作られており、この言語を使ってページの見た目文字の大きさ背景の色配置(レイアウト)などを指定しています。

ブラウザーはこれらの言語が書かれているHTMLファイルCSSファイルなどを読み込み、Webサイトとして表示します。しかし、全てのファイルを一度に読み込んでしまうと表示されるまでに時間がかかってしまいます

 

あ~、このサイト全然開かへん・・・。違うサイト見よう」ってことになり、訪問者を逃してしまう可能性があります。

 

そこで、サイトを表示する際に、それほど重要ではないCSSファイルを後から読み込ませることで、表示する時間を短縮することができるということです。

 

 

この機能を使いたい場合は、「有効化」を選択します。(デフォルトは「無効」設定)

CSS非同期読込設定

次に、非同期読み込みの設定をするCSSファイルを選択します。

 

メインCSS(style.css)を非同期読み込みにする

メインCSS(style.css)は、その名のとおりサイトのデザインレイアウトなどの情報が入っているファイルです。

 

投稿・固定ページ用CSS(content.css)を非同期読み込みにする

投稿・固定ページ用CSS(contetn.css)は、投稿・固定ページを編集する際に使用する見出しの文字の大きさ段落の位置スタイル(ドロップダウンリスト)に入っているマーカーボックスなどのデザイン情報が入っているファイルです。

 

アイコンフォントCSS(icon.css)を非同期読み込みにする

アイコンフォントとは、簡単にいうと「アイコンを表現出来るWebフォント」です。

Webフォントとは、クラウド上にあげられたフォントデータを読み込むことでホームページに反映させる仕組みを指します。

 

引用元:【アイコンデザインをWebフォントで表現できる「アイコンフォント」の基礎知識を解説】(ferret)

『LION MEDIA』で使われているアイコンフォントは「IcoMoon」というWebフォントが使われています。

IcoMoonのトップページ画像

 

使われているアイコンフォントは16種類。

LION MEDIAで使われているIcoMoonの見本

 

どこかで見たことありますよね。アーカイブ記事などで使われています。

アーカイブ記事のアイコンフォント

 

GoogleフォントCSS(Lato)を非同期読み込みにする

Googleフォント「Lato」はWebフォントなので、PCにインストールされているフォントに依存することなく、クラウド上のファイルを読み込めば表示されるという仕組みです。

しかし、何らかの障害が発生し、Gooleフォントファイルの読み込みが出来なかった場合に備え、『LION MEDIA』では複数のフォントが指定されています。

『LION MEDIA』で指定しているフォントの種類

Lato、游ゴシック体、Yu Gothic、YuGothic、ヒラギノ角ゴシック Pro、Hiragino Kaku Gothic Pro、メイリオ、Meiryo, Osaka、MS Pゴシック、MS PGothic、sans-serif

 

フォントは、スタイルシートに記述されている順番どおりに指定されるので、1番目「Lato」、なければ2番目の「游ゴシック体」というような使われ方をします。

「Lato」には英数と限られた記号しか含まれていないので、『LION MEDIA』を使って、日本語サイトを作った場合は「Lato」と「游ゴシック体」が併用して使われます。もし「游ゴシック体」がインストールされてなければ次のフォントが使われるということです。

 

こはる的には・・・

メインCSS」「投稿・固定ページCSS

チェックを入れるのは、デザインが崩れそうでコワい・・・。

 

アイコンフォントCSS」と「GoogleフォントCSS

ちょっとぐらい読み込みが遅くてもいいかなぁって思います。

 

 

あー、ちょっと難しかったので疲れました。みなさんもお疲れさまでした。

 

次のテーマは、『LION MEDIA』カスタマイズ【SNS・OGP設定】の使い方についてです。

 

広告