web/here_syndrome の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• web/here_syndrome へ行く。
• web/here_syndrome の差分を削除

#author("2023-12-23T22:55:50+09:00","default:nemusg.pad","nemusg.pad")
* here症候群 [#z4a17cce]
#author("2024-03-28T17:02:39+09:00","default:nemusg.pad","nemusg.pad")
#title(here症候群とは)

リンクが設定された（aタグで囲まれた）テキストをアンカーテキスト（anchor text）と言います。このアンカーテキストは、クローラや一部のブラウザで前後の文章を読まずに解釈されることがあり、アンカーテキストだけで意味の分かる言葉になっていることが望ましいです。アンカーテキストが「こちら」「もっと見る」「詳細」だけになっている状態をhere症候群（ひあしょうこうぐん）と言います。

#code_x{{
<href="#">こちら</>
}}
 
** 直したほうがいいアンカーテキスト [#z4d50bd5]

全ての場合でこれが当てはまるわけではないですが……。→は改善例です。

- here（代表例）
- ダウンロード → xxxx.zip
- こちら → ○○はこちら
- もっと見る → ○○の続きをもっと見る
- 詳細 → ○○の詳細
- 画像のみでalt属性なし（これはhere症候群とはちょっと違いますが）

here症候群になってしまう原因としては「昔からこうしているから」「大手サイトもこうなってるから問題ない」など。あとはテキストを考えるのが面倒というぐらいで、あまりこだわりが無いことがほとんどです。少し意識すれば簡単に改善することができます。


** 直すのが難しい場合 [#ybe66c2b]

デザイン的な都合などで、直すのが難しいケースはあると思います。気休め程度だと思いますがその場合の対応方法など。

*** あえて重複リンクを作る [#n02c1499]

「同じ飛び先リンクの場合、先にマークアップしたほうが重視される」らしいので、1つ目のリンクを望ましいアンカーテキストにする。これができたら2つ目も変更できることが多いので実用性は微妙。


#code_x{{
<href="#1">○○○○</>
<href="#1">Continue reading</>
}}


*** タイトル属性 [#o22162a2]

aタグにタイトル属性「title="○○続きを読む"」を付ける。これでアクセシビリティ的には解決することが多いですが応急処置として考えてほしいです。SEOスパムと言われてしまう可能性もあるかもしれません。

*** nofollow属性 [#z4fd5501]

クロールの優先順位を下げるという意味で、望ましくないアンカーテキストのリンクにnofollow属性を付ける。これもあまり本質的な解決ではない。

- [[rel="nofollow" 属性について（Googleウェブマスターツール ヘルプ）:http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=96569]]

** 参考 [#d107ee48]

- [[aのアンカーとして `ここ` などを使うのは好ましくありません。（Another HTML-lint）:http://openlab.ring.gr.jp/k16/htmllint/explain.html#here-anchor]]
- [[用語「here症候群」について（鳩丸ぐろっさり）:http://bakera.jp/glossary/here%E7%97%87%E5%80%99%E7%BE%A4]]