SEO対策とは?

SEOはSearch Engine Optimizationの略で日本語で、「検索エンジン最適化」という意味を持ちます。 Yahoo! やGoogleなどの検索エンジンからアクセスを集めるための手法のことです。 SEO対策をしっかり行うことで、検索結果の上位に表示させることができます。 また、検索結果の順位を上げることは、Web集客に大きく影響します。

SEOのメリット

・広告費用を抑えることができる
・CVにつながる集客が見込める
・検索上位に表示させることでブランディングを高めることができる
・品質の高いWebサイトは資産になる

SEO対策において大切なこと

1.タイトルとタグ・テキストの設定
2.検索キーワードに対応したページ設計
3.部リンクを最適な場所に設定
4.コンテンツの品質や信頼性を明示する
5.表示速度を上げる

SEO対策の事前準備

SEOを行っている人のほとんどが「Google Analytics」にサイトを紐づけて登録しています。

Googleアナリティクを導入することで、

「訪問者数や訪問者のデータ」
「検索流入」
「閲覧デバイスは何か?」

など、細かな項目ごとにユーザー像を詳しく分析して、 マーケティングやコンテンツへの理解を深めることができます。

ターゲットキーワード設定

ユーザーがどのようなキーワードで検索しているかを考えて選定するキーワードの事。 ターゲットユーザーにとって良質なコンテンツとなるよう、サイトを構築していきます。

タイトル設定

サイトの表示タイトルにより、検索ユーザーがページをクリックして、アクセスする確率が変わってきますので、 タイトルタグはページの表示結果に大きく影響します。

SEO対策に強いホームページ制作なら!

ロフティーデザインでは、SEOに強いサイトの制作に加えて、保守サポート業務も行っています。 お客様の希望デザインのご希望に沿いつつ、SEOをしっかり考慮したサイト構築・保守で集客につながるサイト制作が可能です。

 

SSL化(https化)とは?

SSL(Secure Sockets Layer)とは、インターネット上で、
ブラウザとサーバー間の通信を暗号化してデータをやりとりする仕組みのことです。

逆に、非SSLのサイトは暗号化さていないため、情報が流出したり、データの改ざんなどの被害に遭う危険性があります。
httpsは、httpよりも安全な通信を実現し、暗号化された安全な通信方式をWEBサイトに導入することです。

現在では、https化していないとサイトに警告文が表示されるなど、閲覧者にマイナスの印象を与えてるだけでなく、 GoogleでのSEOの評価も下がり、検索順位に影響します。

https化の見分け方

・https化されて通信内容が暗号化されたサイト➡【https】[s]がついている。
・https化されていないサイト➡【http】[s]がついていない。

https化のメリット

<セキュリティーが強化される>
通信内容を暗号化することで改ざんや盗聴を防ぐことができる。
・Webサイトのなりすまし防止
・Cookie情報が漏えい防止

<SEOで評価される>
Googleは、SSL化を推奨しているため、検索順位を左右します。

<分析時に有効>
SSL化によってサイトの分析結果にリファラ情報が送ることができるので、 流入元の計測にも役立ちます。

<表示速度が上がる>
次世代プロトコルの使用によって、WEBサイトの高速化することができます。

https化の方法

・契約中のレンタルサーバーにてSSL化、(SSL証明書発行)の手続きを行う。
※各サーバーによって手順が異なりますので、契約中のサーバーごとにご確認ください。

SSL化されていないサイトをリニューアルするなら!

ロフティーデザインでは、多数のHTTPS化されたサイトを制作してきました。 SSL化されていない古いサイトからリニューアルしたい企業様、お気軽にお問合せください!

 

レスポンシブデザインとは?メリットと作り方

レスポンシブデザインとは

PC、タブレット、スマホなど、異なる画面サイズに合わせて端末ごとに見やすいように最適化されたサイトのことです。 Googleでは「モバイルフレンドリー」としてWebサイトのレスポンシブ化を推奨しているため、レスポンシブ化されたサイトは、SEO評価が高くなります。

レスポンシブデザインのメリット

・1つのHTMLファイルなので、保守管理がしやすい
・「モバイルフレンドリー」としてSEO評価が高くなる。
・URLが統一できるので、ユーザビリティを高められる。

レスポンシブデザインの作り方

①ヘッダーにmeta viewportタグを入れる
HTMLファイルのhead内に、【viewport】タグを記述します。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
②各デバイスごとのCSS指定を記述する

■PC表示用CSS
@media screen and (min-width: 767px) { /*ウィンドウ幅が767px以上の場合に適用*/
#haikei {ここにPC表示に適用させるCSSを記述
}
}
■タブレット表示用CSS
@media screen and (max-width: 767px) { /*ウィンドウ幅が最大767pxまでの場合に適用*/
#haikei {
ここにタブレット表示に適用させるCSSを記述
}
}
■スマホ表示用CSS
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
#haikei {
ここにスマホ表示に適用させるCSSを記述
}
}

レシポンシブ化のポイント

画像の横幅サイズを100%にする
@media screen and (max-width: 480px) {
img {

width: 100% ;

}
}
部分的に非表示にする
@media screen and (max-width: 480px) {

img {

display:none ;

}
}
右側に余白ができてしまった時
・ラッパー要素の #container に「overflow: hidden;」を指定してみる。