【ブログ】Twitterへのリンクを貼るコード| ブログ⇔Twitterの相互運用

ブログから自分のツイッターにリンクを貼りたいけど、どうすればいいんだろう?

今回はこんな疑問に答える記事です。

結論を言うと、リンクはhtmlで簡単に作れます。

コピペOKなので、ぜひ活用して下さい。

ブログにTwitterリンクを貼る方法

ども、スーパーブロガーの ユウ(@yousroom123）です。

と、いうブログの典型的な冒頭を作る方法をお教えします。

実は以下のhtmlコードを貼り付けるだけ。

ビジュアルエディターを使っている方は『コードエディター』に切り替えてくださいね。

<a rel="noopener"
href="プロフィール画面のアドレス"
target="_blank" class="aioseop-link">ユーザー名</a>

プロフィール画面のアドレスは、あなたのプロフィール画面のURL『https://twitter.com/ユーザー名（@以下）』をコピペでOK。

ユーザー名もコピペしちゃいましょう。

ただし、上記リンクの作成時は以下の点に注意してください。

順番に説明していきますね。

rel=”noopener”を使うこと

実は外部へのリンクタグ『target=”_blank”』はその脆弱性が指摘されています。

『target=”_blank”』のみで飛ばすと、リンク先のJavaScriptによってあなたのページが操作されてしまう可能性があるのです。

そこで必要になるのが『rel=”noopener”』

『rel=”noopener”』（ノーオープナー）を入れることで、リンク先の記事からあなたのサイトをフィッシングなどの「悪意ある攻撃」から守ることができます。

（Twitterから攻撃されることはないと思いますが、念のため）

実はこれ、Google先生も推奨する方法です。

target=”_blank” にはセキュリティ上の脆弱性もあります。リンク先のページでは window.opener を使用して親ウィンドウのオブジェクトにアクセスしたり、window.opener.location = newURL によって親ページの URL を変更したりできます。（中略）

一般的に、外部リンクを新しいウィンドウまたはタブで開く場合は、必ず rel=”noopener” を追加してください。

Google Developers 『サイトで rel=”noopener” を使用して外部アンカーを開く』より

あなたのサイトを守るためにも、ぜひ気を付けてください。

【追記】新しいエディタGutenberg（グーテンベルク）の場合

2021年末にはClassic Editor（クラシックエディタ）のサポートが終了するため、上記の方法が機能しなくなる可能性があるため、グーテンベルグを使ってブログにTwitterのリンクを埋め込む方法を追記しておきます。超簡単ですよ。

まずは下の画像のように【＋】のタブをクリックし、Twitterのマークを選択します。

するとURL埋め込みの画面が出てくるので、そこにあなたのTwitterプロフィール画面のURL『https://twitter.com/ユーザー名（@以下）』をコピペで貼り付けます。

たったこれだけ、10秒で終わりです。

他人のプロフィールへ飛べるか確認

これはマナーの話。

他人のTwitterへリンクを貼った場合、プレビュー画面でそのURLを開いてみましょう。

ちゃんと開けること、ユーザー名の文字が間違っていないことを確認してから記事を公開してください。

Twitterへのリンクを貼るコード：まとめ

以下の記事をコピペして、Twitterのアドレスとユーザー名（@以下）を入力しましょう。

<a rel="noopener"
href="プロフィール画面のアドレス"
target="_blank" class="aioseop-link">ユーザー名</a>

ブログからTwitterへ、Twitterからブログへ。

読者をうまく誘導し、ブログ×Twitterの両輪で相互運用をしましょう。