参考 URL として URL だけ貼ってあるのって参考にならなくない？
2020-01-17技術的なことを検索して出てくるサイトやブログ記事の中で参考 URL が記されている場合があります。その URL が本当に URL だけのときって全然参考にならないよなー、リンクにはタイトル付与してほしいなー っていう話です。
何を言っているのか
ちょっと何言ってるかわかんないです by サンドウィッチマン 富澤
ということで、簡単に説明すると、たとえば下記のような参考 URL の表記はパッと見でどんなページを参考にしているかわかるでしょうか？
参考 URL
1 つ目は、 URL のパスからなんとなく推測できそうな気がします。
2 つ目は、 2015 年の 2 月に書かれたブログかなというくらいはわかりますが、何のサイトでどんな内容なのかまではわかりません。
3 つ目は、 Qiita の記事であることはわかりますが、内容は全くわかりません。
つまり、実際にそのリンクを踏んで見ないとどんな内容のページを参考にしたのかがわかりません。
何かを調べて、さらにそこで参考にしているページまでチェックしようとしている人にとって、この表記だと不親切です。
では、下記のような表記だとどうでしょうか。
参考 URL
パッと見でどんなページかわかります。
わざわざリンクを踏んで内容を確認しに行くまでもなく、タイトルから参考になるかどうかをある程度判断することができるので、時間の節約にもなり親切です。
リンクにタイトルを付ける
何を今更っていう感じですが、リンクにタイトルを付けるには下記のように記述します。
-
HTML の場合
<a href="https://aws.amazon.com/jp/ec2/pricing/">料金 - Amazon EC2 | AWS</a> -
Markdown の場合
[料金 - Amazon EC2 | AWS](https://aws.amazon.com/jp/ec2/pricing/)
でもこれめんどくさい
ただ、ブログを書いているときにこれらの表記を本文に書くのって結構めんどくさいです。
WordPress とか はてなブログ とかの WYSIWYG でリンク作成したり、独自でスニペット作ってたり、毎回手で入力してる場合もあるかと思います。
URL はアドレスバーをコピーすればいいですが、記事のタイトルに関してはそれぞれのページのタイトル部分を確認する必要があります。
リンクとして URL だけを書いているのは、おそらくそういった操作が面倒だからだと思います。
ワンクリックでコードを取得するブックマークレット
ということで作ったので、下記のブックマークレットです。
これをブックマークレットとして適当な名前で保存して、ブラウザのブックマークバーにでも置いておけば、あとはリンクを生成したいページを開いてそこをクリックするだけです。
Markdown 用のリンクコードがクリップボードにコピーされます。
実態としては下記の JavaScript を実行しています。
const titleTag = document.getElementsByTagName("title"), pageUrl = location.href;
let pageTitle = pageUrl;
titleTag.length > 0 && titleTag[0].innerHTML !== "" && (pageTitle = titleTag[0].innerHTML);
const md = `[${pageTitle}](${pageUrl})`;
navigator.clipboard && navigator.clipboard.writeText(md);
タイトルタグが見つからない、または空文字の場合は、仕方なく URL のリンクを生成しています。が、まあ、そんなページはこのご時世ほぼ無いでしょう。(無いと信じたい)
まとめ
リンクにはタイトル付与してほしいなー っていう話でした。
Qiita とか個人のブログとかを Markdown で書いている方は、このブックマークレットを使って訪問者に優しいリンクを作りましょう。
comments powered by Disqus