HPB19 | HPB18 コンテンツ一覧
ホーム > HPB19 > HTML ページ間の関係を明確にする
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

HTML ページ間の関係を明確にする


ページネーション(ページ分割)を明示する  ( link rel="prev" / link rel="next" )



先頭ページのヘッダー部
<link rel="next" href="https://~サイトURL~/後のページ.html">
中間ページのヘッダー部
<link rel="prev" href="https://~サイトURL~/前のページ.html">
<link rel="next" href="https://~サイトURL~/後のページ.html">
最終ページのヘッダー部
<link rel="prev" href="https://~サイトURL~/前のページ.html">

※XHTMLで記述するときは、最後を「 ~" />」で終了します






ページ間の関係を明確にすることの意義



サイト内の各ページの関係性を明確にすることは、Google 等検索サイトの解析を容易にし、結果、サイト、ページの正当な評価を得ることにつながり、SEO対策として重量なことです

< meta > タグのSEOに対する効力が低下した今、< link > タグの活用は重要です




他のページとの関係性を示す < link > タグ 構文は、下記の様になります



<link rel= / rev="リンクタイプ" href="対象URL" type="指定タイプ">


帆のページとの関係は、ヘッダー内に記述する、< link > タグを使用します
属性値として、「 rel = 」 と 「 rev = 」 を用いて、「リンクタイプ」(関係性)を記述します

「 rel = 」 は、それを記述したページから見た相手ページの関係性
「 rev = 」 は、逆に、相手ページから見た時の、当タグ記述ページの位置づけです
「 href= 」 は、対象となるページURLを指定します
「 type= 」 は、MIMEタイプを指定するもので、必要に応じて付与します
「 title= 」 は、リンク先のタイトルを示すもので、必要に応じて付与します




使用例として、下記の様に記述します



一連の記事の中での、3ページ目の記述例です

<head>

<link rel="contents" href="index.html">
<link rel="start" href="Page1.html">
<link rel="prev" href="Page2.html">
<link rel="next" href="Page4.html">
<link rel="help" href="Help.html">
<link rel="copyright" href="CopyRight.html">

</head>




「リンクタイプ」は、下記が定義されています



リンクタイプ 意味 記述例
stylesheet スタイルシート <link rel="stylesheet" href="CSSファイル名" type="text/css">
start 複数ページに渡る場合の最初のページ <link rel="start" href="ページURL" title="タイトル">
next 次のページ <link rel="next" href="Page2.htm">
prev 前のページ <link rel="prev" href="Page1.htm">
index サイトのトップページ <link rel="index" href="/index.html">
contents サイトマップ ( SiteMap ) 、目次ページ <link rel="contents" href="ページURL">
search 検索ページ <link rel="search" href="検索ページURL">
glossary 用語集のページ <link rel="search" href="用語集ページURL">
help ヘルプ、お問い合わせのページ <link rel="help" href="ページURL">
copyright 著作権表示のページ <link rel="search" href="著作権表示ページURL">
alternate RSSページの記述のlink要素 <link rel="alternate" href="RSSファイル.xml">
made メールアドレスの記述(恐らくスパムメールを大量に頂くことになるので、使用してはいけない) <link rev="made" href="mailto:メールアドレス" />
bookmark ブックマーク (文書内アンカーへのリンクのことです) <link rel="bookmark" href="ページURL">
chapter <link rel="chapter" href="ページURL">
section <link rel="section" href="ページURL">
subsection <link rel="subsection" href="ページURL">
appendix 付属 <link rel="appendix" href="ページURL">
canonical 正規ページ (「 rel = 」 指定で使うと、そのページは相手ページのコピー版であるという意味になります) <link rel="canonical" href="正規ページURL">
alternate 「 alternate 」 とは、代替という意味です
「 stylesheet 」 と併用で、代替スタイルシート
「 hreflang 」 属性と併用で、 翻訳版
「 media 」 属性と併用で、別メディア向け
翻訳版(en = 英語版)
<link rel="alternate" href="英語版ページURL" hreflang="en">
別メディア版(print = 印刷用)
<link rel="alternate" href="印刷用ページURL" media="print">
shortcut icon
( icon )
ファビコン(Favicon)を指定
ファビコンとは、ブラウザのアドレスバーに表示される小さなアイコンの事です
IEの場合、URLの先頭に、IEのマークが表示されています
ホームページビルダー19 ブラウザーのアドレスバー のホームページビルダー19 ブラウザーのアドレスバーのファビコン(Favicon)の事
<link rel="shortcut icon" href="画像ファイル名"  type="image/vnd.microsoft.icon">

type=には、MIMEタイプを指定するのですが、IEがアイコン形式しか対応していない為、実質、上記例のみとなります

リンクタイプは、矛盾がなければ、半角スペースで区切って、複数同時に指定することもできます
下記の例は、ページネーションした際の最初のページであることを示します

<link rel="start prev" href="page1.html">




「MIMEタイプ」は、下記が定義されています



ファイル形式 拡張子 MIMEタイプ
Text .txt text/plain
HTML .html .htm text/html
XML .xml text/xml
XHTML .xhtml application/xhtml+xml
CSS .css text/css
JavaScript .js text/javascript
VBScript .vbs text/vbscript
CGI .cgi application/x-httpd-cgi
GIF .gif image/gif
JPEG .jpg .jpeg image/jpeg
PNG .png image/png
Icon .ico image/vnd.microsoft.icon
Flash .swf application/x-shockwave-flash
MPEG .mpg .mpeg video/mpeg
QuickTime .mov .qt video/quicktime
AVI .avi video/x-msvideo
MP3 .mp3 audio/mpeg
MIDI .mid .midi audio/midi
RealAudio .ra audio/vnd.rn-realaudio
WAVE .wav audio/wav
PDF .pdf application/pdf
Word .doc application/msword
Excel .xls application/msexcel





(ご参考) SEO対策の詳細は、「 SEO対策 SEO(検索エンジン最適化)とは 」をご参照下さい

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > HTML ページ間の関係を明確にする
   

© 2014 abhp.net All Rights Reserved.
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP