posthtml-link-noreferrer
v1.0.10
Published
This plugin add `rel="noopener"` and `rel="noreferrer"` to all links that contain the attribute `target="_blank"`.
Downloads
512
Maintainers
Readme
posthtml-link-noreferrer
This plugin add rel="noopener"
and rel="noreferrer"
to all links that contain the attribute target="_blank"
.
Read more about problem in google blog.
⭐️ Star me on GitHub — it helps!
Before:
<a href="/" target="_blank">External link</a>
<a href="/" target="_blank" rel="nofollow">External link</a>
<a href="/" target="_self">Home</a>
After:
<a href="/" target="_blank" rel="noopener noreferrer">External link</a>
<a href="/" target="_blank" rel="nofollow">External link</a>
<a href="/" target="_self">Home</a>
Demo
Install
npm i posthtml-link-noreferrer --save-dev
Usage
Gulp
npm i gulp-posthtml posthtml-link-noreferrer --save-dev
const gulp = require('gulp');
const postHTML = require('gulp-posthtml');
const postHTMLNoRef = require('posthtml-link-noreferrer');
const config = () => ({
plugins: [
postHTMLNoRef({
attr: ['noopener', 'noreferrer']
}),
],
});
gulp.task('posthtml', () => gulp.src('./build/*.html')
.pipe(postHTML(config))
.pipe(gulp.dest('./build')));
Webpack
npm i html-loader posthtml-loader posthtml-link-noreferrer --save-dev
module: {
rules: [
{
test: /\.html$/,
use: [
'html-loader',
{
loader: 'posthtml-loader',
options: {
plugins: [
require('posthtml-link-noreferrer')({
attr: ['noopener', 'noreferrer']
})
]
}
}
]
}
]
}
Options
| Option | Type | description | Possible subsets | Default value |
| ------ | ------ | ------ | ------ | ------ |
attr | array
| Describes rel attributes. | 'noopener'
, 'noreferrer'
, 'nofollow'
| 'noopener', 'noreferrer'
|
Contributing
See PostHTML Guidelines and contribution guide.