竜さんのGatsby記事に書いてあったのを真似して、外部サイトのリンクがMarkdown内にあったら別タブで開く設定を入れた。

自分を含め、閲覧者がCmd押したり右クリック系の操作をする手間が省けるので入れておこうという判断。

プラグイン gatsby-remark-external-links を入れて設定すれば、内部リンクはそのままに外部リンクだけ別タブで開くようにできる。重要なのはnoopener noreferrer の理解や、別タブで開くアイコン表示。

{
  resolve: "gatsby-transformer-remark",
  options: {
    plugins: [
      {
        resolve: "gatsby-remark-external-links",
        options: {
          rel: "noopener noreferrer"
        }
      }
    ]
  }
}

• gatsby-remark-external-links | GatsbyJS

noopenerとnoreferrer

オプションに noopener noreferrer を入れるのは別タブで開いた先のサイトからJSでの操作を防ぐため。

• リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io

基本的には noopener 書いておけばいいのだけど、対応していないブラウザのために noreferrer も書く。ただ、この情報も結構前の話なので、もうとっくにブラウザも追いついてると思いCan I useを見た。

• Can I use... rel=noopener

Edge...モダンブラウザで君だけ対応していない。ちなみに、IEはそもそも別タブの操作がデフォルト設定ではできないようになっているらしいので無視。

noreferrer はアフィリエイトで必要な参照元情報ゲットができなくなるので、サイトやリンクによっては避ける。

別タブで開くアイコン表示

表記なしに別タブで開くと操作された感が生まれてしまうので、アイコンを使って明示しておく。このブログは他と合わせFontAwesomeを使用。

.is-external-link-area a[target="_blank"] {
  padding-right: 0.375em;
  &:after {
    content: "";
    display: inline-block;
    position: relative;
    top: 0.1125em;
    left: 0.2em;
    width: 1em;
    height: 1em;
    background-image: url("../images/external-link-alt-solid.svg");
    background-size: 1em 1em;
  }
}