
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
ITコラム
2017.01.26
メタデータ・コンテンツの要素の1つであるlink要素の中で、今回は、rel属性を使って特定のサイトやページ等へ導く方法を紹介します。
HTML 【メタデータ】1 ~ メタデータ・コンテンツの概要とbase要素
HTML 【メタデータ】2 ~ link要素(1)MIMEタイプ一覧と属性一覧
HTML 【メタデータ】2 ~ link要素(2)CSSファイルの読み込み
HTML 【メタデータ】2 ~ link要素(3)media属性
HTML 【メタデータ】2 ~ link要素(4)@importと@media
HTML 【メタデータ】2 ~ link要素(5)rel属性( 本ページ )
HTML 【メタデータ】3 ~ style要素
HTML 【メタデータ】4 ~ meta要素
1.他言語版のページへ導く
2.優先URLを指定する
3.モバイル版へ導く
4.RSSやAtomをフィードする
他言語版のページがある場合は、link要素のrel属性とhreflang属性を「rel=”alternate” hreflang=” “」と指定します。
alternateは、代替物という意味です。
hreflangは、href + langです。hrefは「Hyper Text Reference」の略で、リンク先のURLを示します。langは「language」の略です。
サイトに日本語版だけでなく、英語や中国語など他言語版がある場合、link要素で「rel=”alternate” hreflang=”言語コード”」と指定すれば、検索エンジンなどからサイトを開いた時に、その人の言語環境に合ったURLへ導くことができます。
例えば「http://www.test.com」というサイトがあって、それに英語版の「http://en.test.com」と中国語版の「http://zh.test.com」がある場合はメインの「http://www.test.com」に次のように指定します。
<head> <link rel="alternate" hreflang="en" href="http://en.test.com/" > <link rel="alternate" hreflang="zh" href="http://zh.test.com/" > </head>
「en」と「zh」は言語コードです。
link要素のrel属性を「rel=”canonical”」と指定すると、優先URLを指定することができます。
canonicalは、標準的なという意味です。
検索エンジンは、アクセスの多いページを表示しますが、メインページを優先して表示して欲しい場合は、メインページ以外のページに「rel=”canonical”」として、メインページ(表示して欲しいページ)のURLを指定します。
また、「www.」や「/index.html」の有無によって、同じサイトなのに検索エンジンに別のサイトとして判断されるような場合には、サイト内の全ページに「rel=”canonical”」としてそれぞれのURLを指定すると、検索エンジンに別サイトと判断されるような不具合を回避できます。
link要素は次のように記述します。
<head> <link rel="canonical" href="http://www.test.com/"> </head>
この「link rel=”canonical”」は<head>の直後に書いた方が良いようです。
「rel=”alternate” media=”handheld”」で、検索エンジンなどにモバイルサイトを認識させることができます。
handheldとは、片手で持てる大きさの、という意味で、media属性の”handheld”は携帯電話などの端末を示しています。
サイトにモバイル版もある場合は、この指定をすると、携帯の検索エンジンやソーシャルブックマークなどから、モバイル版にリンクさせることができます。
link要素は次のように記述します。
<head> <link rel="alternate" media="handheld" href="http://www.test.com/mobile/"> </head>
PC用サイトのページの<head>内に、href属性で、そのページのモバイル版のURLを指定します。
「link rel=”alternate”」に type属性で RSSやAtomと指定すると、フィードリーダー(Googleリーダーなど)に見つけてもらえるようになります。
RSSとは、サイトの更新情報を公開するのに使われてる、XMLファイルです。サイトの各ページのタイトル、アドレス、見出し、要約、更新時刻などが書かれています。
AtomもRSSと同じ機能です。
ブログサービスや、MovableTypeなどのCMSを使っていれば、RSSやAtomを書き出す機能があるので、自動的に配信されています。そのURLや拡張子は、ご利用のサービス先で確認してください。
RSSを指定する場合、link要素は次のように記述します。
<head> <link rel="alternate" type="application/rss+xml" href="http://○○○/rss.xml" > </head>
type属性で、RSSファイルのMIMEタイプを指定しています。このtype属性は重要で、省略できません。
href属性で、RSSファイルのURLを書いていますが、ここでの拡張子は「.xml」でも「.rdf」でもOKです。
MIMEタイプについてはHTML 【メタデータ】2 ~ link要素(1)MIMEタイプ一覧と属性一覧 1.MIMEタイプ一覧をご参照下さい。
Atomを指定する場合、link要素は次のように記述します。
<head> <link rel="alternate" type="application/atom+xml" href="http://○○○/atom.xml" > </head>
RSSの時と違うのは、type属性で指定したMIMEタイプだけです。
このほかに、title属性で「title=”○○○blog feed”」などとタイトルを付けることもできます。
link要素には、他にもたくさんの属性があっていろんな事ができます。
属性 | 概要 | 値 | |
---|---|---|---|
rel | HTMLと外部ファイルの関係(relation)を示す | (値) | (値の概要) |
stylesheet | スタイルシート (alternateとの併用で代替スタイルシートを示す) |
||
alternate | 代替え文書 (hreflang属性との併用で翻訳版を、media属性との併用で別メディア版を示す) |
||
icon | ショートカットアイコン | ||
search | 検索ページ | ||
help | ヘルプ | ||
prev | 前へ | ||
next | 次へ | ||
prefetch | リンクを事前に読み込む | ||
license | 著作権 | ||
author | 作者 | ||
href | 外部ファイルのURLを示す | 外部ファイルのURL | |
type | 外部ファイルのMIMEタイプを示す | text/css(CSS)、text/html(HTML)、application/pdf(PDF)など | |
media | 外部ファイルが対象とするメディア(出力機)を示す | all | すべての機器 |
screen | パソコンのディスプレイ | ||
tv | テレビ画面 | ||
handheld | 携帯電話などの端末 | ||
プリンタ | |||
projection | プロジェクタ | ||
tty | 文字幅が固定された機器(テレタイプなど) | ||
speech (以前のaural) |
音声出力機 | ||
braille | 点字ディスプレイなど | ||
embossed | 点字プリンタ | ||
aural | 音声出力機器 | ||
hreflang | 外部ファイルの言語コードを示す | ja (日本語)、en (英語)、es (スペイン語)、fr (フランス語)、ko (韓国語)、zh (中国語) など | |
sizes | 「rel=”icon”」の場合のアイコンのサイズを示す | 数字で「sizes=”16×16″」 または「sizes=”any”」 アイコンの普通サイズは16×16 他の数字を使う場合、先頭に0を付けないこと |
|
title | 外部ファイルのタイトルを示す | グローバル属性の title と違って、これを書かなくても、親要素のtitleは継承されない | |
外部CSSのグループ化を示す | リンクがCSSの場合、titleをつけるとCSSのグループ化ができ読込み優先度が変わる また「rel=”alternate stylesheet”」とすることで、代替えCSSのグループ名になる |
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.