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 を設定しました。
特に注釈がない限り、すべて泪雪ブログのオリジナル記事であり、いかなる形式の転載も禁止されています。