SEOER とユーザーエクスペリエンスの熱心な追求者として、常に改善や簡素化の余地を見つけることができます。昨日、記事「WordPress 自動で現在の記事のタグをキーワード内リンクとして追加する」を共有する際に、記事内リンクの再定義について考えていました。内部リンクは自動的に追加できるので、外部リンクはどうでしょうか？
多くの場合、またはほとんどの人は記事に外部リンクを追加しないため、他のウェブサイトを共有する必要がある場合でもテキストリンクのみを使用します。つまり、リンクのように見えますが、実際には直接クリックすることはできず、ブラウザのアドレスバーにコピーしてアクセスする必要があります。これは、ウェブサイトの最適化に詳しい友人なら、重要な権限を外部に漏洩させないためです。これは私も理解できますし、記事を編集する際に他の URL にリンクを付けるのは好ましくありません。
ウェブマスターや編集者の立場からは理解できますが、ユーザーとしては非常に不便です。そして、今日はこの問題を解決するためにやってきました。問題を解決するためには、その原因を知る必要があります。ウェブサイト自体が外部リンクを漏洩しないために、編集者はテキスト URL を使用します。したがって、検索エンジンが記事をクロールする際に、このテキスト URL は検索エンジンによってアクセスされません。したがって、ユーザーが直接クリックしてアクセスできない問題を解決するためには、JavaScript や jQuery を使用してこれらのテキスト URL に自動的にハイパーリンクを追加する必要があります。なぜなら、検索エンジン自体は JavaScript を実行しないため、ユーザーがアクセスするときにのみ JavaScript のレンダリング機能が使用されるためです。これにより、検索エンジンが取得する記事の内容はハイパーリンクのないテキスト URL であり、ユーザーがアクセスするときにはクリック可能なハイパーリンク URL になります。
// jQueryによるテキストURLへのクリック可能なハイパーリンクの自動追加
var urlRegex = /(https?://)?([da-z.-]+).([a-z.]{2,6})([/?w.-=#%]*)*/g; // 多様なURLに対応する正規表現
$(".your-class-name *").not("a").addBack().contents().each(function() { //.your-class-nameは記事を囲む要素のクラス名です
if(this.nodeType === 3 && this.textContent.trim().length > 0) { // 空でないテキストノード
if ($(this).parents('a').length == 0) {// 現在のテキストノードがリンク要素内にあるかどうかをチェック
var newText = this.textContent.replace(urlRegex, function(match) {
var url = match.startsWith('http') ? match : 'http://' + match; // URLにhttpプロトコルの接頭辞が含まれているかどうかを判断
return '<a href="' + url + '" target="_blank" rel="nofollow noopener">' + match + '</a>'; // テキストURLをハイパーリンクに変換
});
$(this).replaceWith(newText);
}
}
});
このコードの中心は、urlRegex と jQuery ステートメントです。それぞれ URL を一致させ、DOM 要素を反復処理するために使用されます。
正規表現「/(https?://)?([da-z.-]+).([a-z.]{2,6})([/?w.-=#%])/g」は、テキスト内のさまざまな形式の URL に一致するために使用されます。私はさまざまなスタイルの URL をテストしましたが、できるだけ多くの URL に対応できるようにしました。この式はhttp:// または https:// で始まる URL に一致し、これらのプレフィックスがない URL にも一致します。http:// または https:// のプレフィックスがない URL の場合、自動的に http:// のプレフィックスが追加されます。
次に、jQuery の $(“.your-class-name *”).not (“a”).addBack ().contents ().each () ステートメントを使用して、指定されたクラス名「your-class-name」のすべての子ノードを反復処理します。各ノードがテキストノードであるかどうか（nodeType === 3）および空のテキストノードでないかをチェックし、.not (“a”) ですでにハイパーリンクである子ノードを除外します。これらの条件を満たす場合、replace メソッドを使用してテキスト内の URL を置換し、replaceWith メソッドを使用して元のテキストノードを更新します。
replace メソッドでは、一致した URL に対して新しいハイパーリンクタグを生成します。URL にhttp:// または https:// のプレフィックスがない場合、自動的に http:// のプレフィックスが追加されます。生成されたハイパーリンクタグは target=”_blank” 属性を使用して、新しいブラウザタブでリンクを開きます。もちろん、検索エンジンがページをレンダリングした場合でも、自動的に検索エンジンのクロールを禁止するために、rel 属性に nofollow を設定しました。
特に注釈がない限り、すべて泪雪ブログのオリジナル記事であり、いかなる形式でも転載を禁止します。
この記事へのリンク：https://zhangzifan.com/jquery-add-text-url-link.html