Baccho Log

No Image

Sponsored Link

HTMLの基礎

  • 投稿日:
  • 更新日:
Tags:
CSS HTML
Categories:
プログラミング

head

metaタグ

  • referrer
    <meta name=”referrer” content=”●●”>
    設定値(content)としては、次のものが定められています。

    • none
      そのページからリファラを一切送らない
    • origin
      そのページからは、リファラとしてドメイン名のみのURLを送る(例：「https://example.jp/page.html」からは、リファラとして「https://example.jp/」が送られる)
    • none-when-downgrade
      現在の動作と同じ(HTTPS→HTTPではリファラを送らない、それ以外の場合は元ページの全URLをリファラとして送る)
    • origin-when-crossorigin
      同じドメイン名でHTTP/HTTPSの種類も同じURLへの移動ならば、元ページの全URLをリファラとして送る。そうでなければ、リファラとしてドメイン名のみのURLを送る
    • unsafe-url
      常に全URLをリファラとして送る

      ※以前の仕様には「never」「always」「default」がありましたが、現在は非推奨。
  • author
    運営者の名前を記載する
    <meta name=”author” content=”●●”>

  • description
    検索結果に表示される文章
    <meta name=”description” content=”●●”>

linkタグ

  • canonical
    URLの正規化を行ないます。
    重複しているコンテンツのURLを1つにまとめる為に使用します。
    https://example.jp
    と
    https://www.example.jp/
    が同じページであった場合など、統一するページをhrefに記載すると検索時には記載したURLが表示されます。
    ※但し、100%そうなる訳ではありません。
    また、ソース最上部(<head>の直後)に書いた方が確実なんだそう。
    <link rel=”canonical” href=”https://example.jp”>

  • icon
    ファビコン(アドレスバーなどに表示される小さな画像)を指定する。
    <link rel=”icon” type=”●●” href=”●●”>

    • type:画像のMIMEタイプを指定する
      ICO形式(image/vnd.microsoft.icon)
      GIF形式(image/gif)
      PNG形式(image/png)
    • href:画像ファイルのURL
  • apple-touch-icon
    <link rel=”apple-touch-icon” href=”●●”>
    iPhone、Androidのショートカットアイコン画像を指定する。
    hrefは絶対パスが望ましい。(相対パスだと読み込めない場合もあるらしい)

  • index
    <link rel=”index” href=”●●”>
    WEBサイトのトップページを定義します

  • alternate
    alternateは色々なものに使えます。
    大元に”http://example.com”というサイトがあり、英語版と中国版のサイトもあるとすると、
    下記のように指定をすれば、その人の言語環境に合ったURLへ導線を貼ってくれます。
    <link rel=”alternate” type=”●●” hreflang=”●●” title=”●●” href=”●●”>

<link rel="alternate" hreflang="en" hreflang="http://en.example.com/">
<link rel="alternate" hreflang="zh" hreflang="http://zh.example.com/">

※参考※
▼hreflangに入力されている言語コードの各言語の一覧(「ISO 639-1 形式」を参照)
https://ja.wikipedia.org/wiki/ISO_639-1%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7

<link rel="alternate" media="handheld" href="http://www.example.com/mobile/">

PCサイト以外にモバイル版もある場合は、PC版のサイトに上記のように記載するとモバイルサイトに導線を張ってくれます。

まずはPC用トップページに携帯用トップページを指定。
あとは、PC版の必要なページ(携帯版があるページ)だけに携帯用のURLを指定して行きます。(携帯版が無いPCページには不要。ていうかNG)
※但し、スマホではPC版が表示されてしまうので注意

<!-- RSS -->
<link rel="alternate"  type="application/rss+xml" href="http://○○○/rss.xml">
<!-- Atom -->
<link rel="alternate"  type="application/atom+xml"  href="http://○○○/atom.xml">

「link rel=”alternate”」にtype属性で”RSS”や”Atom”を指定すると、Googleリーダーなどの「フィードリーダー」に見つけてもらえるようになります。

※参考※
link要素の属性と値を良い感じに纏めてくれてるのではないかと
http://honttoni.blog74.fc2.com/blog-entry-116.html#linktable

body内

role属性

要素に役割を持たせる働きをする。
「大見出しの意味を持たせる」「箇条書きのリストの意味を持たせる」という役割を明確にもたせる事が出来ます。

▼参考
http://blog.e-riverstyle.com/2011/01/rolewaiaria.html

a要素

主にはリンクを付ける。

  • rel属性
    a要素のrel属性は、現在のドキュメントとリンク先ドキュメントとの関連性を示すリンクタイプを指定する属性です。
    href属性が設定されていない場合は、rel属性を指定することは出来ません。

    ▼リンクタイプがnofollowの場合
    <a rel=”nofollow” href=”/urllink/”>

    意味合いとしては、検索エンジン(クローラー)が「リンク先ページ」へ遷移することができなくなります。
    クローラーというのは、世界中のWebページを、ページ間のリンクを介して巡り巡っています。
    そして、巡ったページの情報を、検索エンジンの本体へ登録する。といった作業を自動的におこなっています。
    では、何故わざわざ遷移させないように設定をするのでしょうか。

    1. リンク先ページを検索結果に表示させたくない
      「内部リンク」に対して、例えば、Webサイトの管理者のみが見ることのできるページの場合は、検索結果に表示されてしまうとまずいです。
      このような、表示されたらまずいリンク先について、指定をします。
    2. リンク先ページに、ページランク(PR)を与えたくない
      PRはWEBページに対して、検索エンジンからの評価の指標となるものです。PRが高いWEBページほど、検索エンジンからの評価が高くなります。
      そして、PRはリンク先を介して他のページへ分散されます。
      つまり外部リンク(他サイト)をリンク設定していると、そのサイトのPRへも分散してしまい、自分のページへ分散されるPRが減ってしまいます。
      そのため、外部リンクについては”nofollow”を指定します。
    3. 有料広告(リンク)を、自分のWebサイト(ページ)に設置する場合
      Googleは、有料、かつページランクを転送することを目的としたリンクについて、使用を禁じています。
      例えば、自分のWEBサイト上で広告を載せていて、自分の中では「ページランクを転送することを目的としていない」場合でも、
      結果的にはペナルティを受けてしまう可能性があります。有料広告であれば、Googleに認識された時点でペナルティを受けます。
      それを防ぐ為、広告については”nofollow”を指定します。

      ▼参考
      http://viral-community.com/seo/nofollow-2793/

  • target属性
    a要素のtarget属性は、リンク先ドキュメントの開き方を指定する属性です。

    1. _blank
      新規ウィンドウに開く
    2. _selfK
      現在のウィンドウ、現在のフレームに開く
    3. _parent
      親ウィンドウ、親フレームに開く
    4. _top
      ウィンドウ全体に開く。フレームは解除する
    5. ウィンドウ名
      指定したウィンドウ名のウィンドウに開く。
    6. フレーム名
      指定したフレーム名のフレームに開く。

WEB用語

  • リファラ(referrer)
    あるWebページのリンクをクリックして別のページに移動したときの、リンク元のページのこと。
  • フィード(feed)
    ウェブサイト、特にブログやニュースサイトなどのコンテンツの概要もしくはコンテンツ全体を配信用に加工した文書のこと。
    またはそのファイルフォーマットのこと。
  • CMS
    コンテンツマネジメントシステムの略。
    Webコンテンツを構成するテキストや画像、レイアウト情報などを一元的に保存・管理し、サイトを構築したり編集したりするソフトウェアのこと。
    (WordPressとか)
« mysql 基礎CSSの基礎 »

Sponsored Link

コメントする

記事の感想や修正依頼等ありましたら、コメントをお願いいたします