読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【検索エンジンを意識したワンランク上のコーディングをしよう】

コーディングテクニック

f:id:wp-lesson:20161016151400j:plain

ブログの新着記事一覧など、リスト(箇条書き)
の意味を持つ部分はHTMLの<li>タグで記述する
ことが多いかと思います。
 
 
しかし、
 
 
”<li>には箇条書きという以上の意味はない”
 
 
ので、
 
 
検索エンジンにはただの文字の羅列にしか見えません。
 
 
そこで、定義リスト(<dl>,<dt>,<dd>タグ)を
使うと、より意味を明確にすることができます。
 
  
例えばこんな場面です。
 
 
2016/10/15 新着情報のタイトル
2016/10/14 新着情報のタイトル
 
 
これを<li>タグで書くと、
 

<li>2016/10/15 新着情報のタイトル</li>
<li>2016/10/14 新着情報のタイトル</li>

 
となりますが、検索エンジンには日付と
タイトルの区別がつきません。
 
 
どちらも「文章の一部分」に見えます。
 
 
一方、定義リストは、
<dt>タグで見出しを表し、
<dd>タグで見出しに対応する内容を表します。
 

<dl>
    <dt>2016/10/15<dt><dd>新着情報です</dd>
    <dt>2016/10/14<dt><dd>新着情報です</dd>
</dl>

 
会社のサイトなら会社概要や沿革のページに、
イベントやお知らせの一覧、リリースノート、
などに使えそうですね。
 
 
ただし、<dt>,<dd>はそのままだと横並びには
なりませんので、CSSで横並びにしてあげる必要があります。
 
 
やや詳しいCSSの知識が必要になりますので、
勉強したい方はお気軽にご相談ください。
 
 
「より意味のあるコード」を意識することで、検索エンジン
あなたのサイトをより正確に認識できるようになります。
 
↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓

【1】CODEMYマンツーマンレッスン

codemy-lesson.office-ing.net
⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン

▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
 

【2】プログラミング講座CODEMY

office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

講師実績

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで1位評価
2016年9月「ホームページ作成のツボとコツがゼッタイにわかる本」出版

講師が執筆した本が発売されました!

『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら!