WordPress5.3から、アンカーリンク(<a>)のrel属性にugcを追加する機能が加わりました。
WP標準機能のコメントは自動挿入されるので修正は必要ありません。カスタムで付けるときもかんたんです。新しく追加された関数を呼ぶだけ。
また、廃止される関数もあります。これを使わないように注意が必要。
開発者向けの話です。テーマ・プラグインを作っている人は要チェック。
ugcはnofollowの限定版
htmlのaタグには、リンク先の情報を設定する属性があります。rel属性です。
<a href="example.com" rel="noopener noreferrer nofollow" target="_blank">User generated link example</a>
noopener | target="_blank"を使うとき必ずつける。 (セキュリティ上のルール。) |
noreferrer | リンク先にリンク元情報を送らない。 |
nofollow | 検索エンジンのクローラーにリンク先は回らせない。 |
細かい説明は省略しますが、ugcはnofollowの中でもっと限定的に使います。
ugcはユーザー生成コンテンツ(User Generated Content)のことで、TwitterなどのSNS、YouTubeなどの動画サービスなど、プラットフォーム上にユーザーが作成するコンテンツをリンクするのに使います。
Googleが対応することを発表してから間もないので、WordPressの対応は迅速です。
ugc属性の自動挿入
WordPressでのUGCは、ユーザーが書き込めるコメントです。
WordPress5.3では、コメント内のリンクやコメントを書き込んだユーザーのリンクにugc属性が自動挿入されます。
何もする必要はありません。
<a href="example.com" rel="nofollow ugc">User generated link example</a>
関数の廃止と追加
rel属性の関数が追加されました。
wp_rel_ugc() | rel属性に "nofollow ugc" を追加。 |
wp_rel_callback() | wp_rel_**系の内部で使う。 rel属性追加の基本関数。 |
変更された既存関数もあります。
wp_rel_nofollow() | rel属性に "nofollow" を追加。 内部でwp_rel_callback()を使うように変更。 |
wp_rel_nofollow_callback()は廃止されました。内部でwp_rel_callback()を使ってレガシーラッパーになったのでまだ使えますが、『廃止』と言っているので使うのはやめましょう。
新しいrel属性の関数の使い方
rel属性の関数のサンプルです。
$link = '<a class="test" data-test="test" href="example.com">User generated link example</a>';
$nofollow_link = wp_rel_nofollow( $link );
$ugc_link = wp_rel_ugc( $link );
'nofollow link: ' . esc_html(wp_kses_post($nofollow_link)) . PHP_EOL;
'ugc link: ' . esc_html(wp_kses_post($ugc_link)) . PHP_EOL;
nofollow link: <a class="test" data-test="test" href="example.com" rel="nofollow">User generated link example</a>
ugc link: <a class="test" data-test="test" href="example.com" rel="nofollow ugc">User generated link example</a>
HTMLを見せるためにesc_html()でエスケープしてますが、HTMLを出力するときはいらないです。
wp_rel_ugc(), wp_rel_follow()は追記なので既存のrel属性は残ります。
$link = '<a class="test" data-test="test" href="example.com" rel="noopener noreferrer">User generated link example</a>';
$nofollow_link = wp_rel_nofollow( $link );
$ugc_link = wp_rel_ugc( $link );
'nofollow link: ' . esc_html(wp_kses_post($nofollow_link)) . PHP_EOL;
'ugc link: ' . esc_html(wp_kses_post($ugc_link)) . PHP_EOL;
nofollow link: <a class="test" data-test="test" href="example.com" rel="noopener noreferrer nofollow">User generated link example</a>
ugc link: <a class="test" data-test="test" href="example.com" rel="noopener noreferrer nofollow ugc">User generated link example</a>