webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

サイト制作その後 1

  • 制作課題のサイトを本サーバーにアップロードを済ませました。
  • ここで終わるのではなく、なるべく多くの人に見てもらえるようにします。
  • さらに自分の作ったページがどのように閲覧されているのか知ることは、今後のデザインに生きてくるはずです。

google page rank

  • google page rank ランクが高いページからのリンクが大切、ということ。
  • だったが、google page rankというはいったん表舞台から消えたみたいです。
  • ページランクを調べることができる外部サイトも現在は機能していません。
  • どうやらランキングは、完全にブラックボックスの中にしまわれたようです。
  • とはいえ、内部的に存在していることは間違いないようです。

f:id:ohta-felica:20160731145153p:plain

サイトからのリンクについて考える

  •  先生のブログに、課題サイトのリンクを付けてもらうと上位表示するのはどういった理由なのか自分なりに考えてみる。
  • まず先生のページをよく見てみます。

<p>タブで先生のサイトにリンクをつけてみます。

http://web-master.hatenablog.com/entry/2016/07/28/%E5%8D%B0%E5%88%B7_%E3%83%8E%E3%83%99%E3%83%AB%E3%83%86%E3%82%A3%E3%83%BC%E8%A3%BD%E4%BD%9C_%7C_%E4%B8%AD%E9%87%8E_CLOGO

f:id:ohta-felica:20160731153447p:plain

  • 記事部分の1行目は、リンクを張っている「HPのタイトル」と同じになっている。しかもそのページヘのリンクとなっている。この箇所は<p>ではなく<h4>なのでブログ本文中の見出しなのかもしれない。
  • その下には、HPのmeta descriptionを箇条書きで3行並べている。ここは<li>
  • <li><a>ではなく、<p><a>つまり<p>タグの中にある<a>が最強、らしい。
  • <p>の中の<a>こそ、価値がある。
  • hatenaの「無料サービス」はブログの本文中にある単語にリンクが自動で付けられる、ことがある。このことは、上に書いた<p>の中の<a>を作っていること、に相当する。

アップロード前にやるべきこと

  • meta keywordというのをheadに記述したけれども、むしろ良くない効果が出ることがあるそうなので、これは削除する。
  • titleとmetadescriptionとh1と最初のpの内容を共通化する。
  • metadescriptionは3文節。

どのようなキーワードで検索されているのか?

  • http://markestyle.com/keywords_incidence_tools
  • http://seo.fc2.com/keywordrate/
  • 「中野」「印刷」「ノベルティー」この3つのキーワードそれに会社の名前で検索してほしい。
  • 社名の表記を英字にしてあるのは、マイナスだろうと自分は考えている。実際に日本人が検索する場面を想定すればわかるはず。クライアントの要望とはいえ、これは修正を前提にしたい。
  • 実際はどのように検索されているのか?
  • 「印刷」と会社名は問題ない。
  • 「中野」での検索がない。
  • ノベルティー」が「ノベル」と「ティー」に分散されている。これはどうしたものか?
  • キーワード出現率は、5%を超えることを目指す。
  • 現状、どれも5%以下なので、非常に分散している。

f:id:ohta-felica:20160731152225p:plain 

  •  「中野」「印刷」でgoogle検索結果、5ページ目だった。
  • 自分のブロクにリンクを付けた。
  • サイトを紹介してくれた、先生のブログのリンクを自分のブログにつけた。
  • meta keywordを削除した。
  • 会社名の英語表記をカタカナ表記にした。併せて、metaタグ、タイトル、h1、最初のpの表記もカタカナ表記にした。
  • そしてすぐ検索。なんと、4番目になっています!

f:id:ohta-felica:20160731161319p:plain