bradparks / yoastseo.js

Analyze content on a page and give SEO feedback as well as render a snippet preview.

YoastSEO.js

Text analysis and assessment library in JavaScript. This library can generate interesting metrics about a text and assess these metrics to give you an assessment which can be used to improve the text.

Also included is a preview of the Google search results which can be assessed using the library.

Installation

You can install YoastSEO.js using npm:

npm install https://github.com/Yoast/YoastSEO.js#develop

Usage

If you want the complete experience with UI and everything you can use the App. You need to have a few HTML elements to make this work: A snippet preview container, a focusKeyword input element and a content input field.

var SnippetPreview = require( "yoastseo" ).SnippetPreview;
var App = require( "yoastseo" ).App;

window.onload = function() {
	var focusKeywordField = document.getElementById( "focusKeyword" );
	var contentField = document.getElementById( "content" );

	var snippetPreview = new SnippetPreview({
		targetElement: document.getElementById( "snippet" )
	});

	var app = new App({
		snippetPreview: snippetPreview,
		targets: {
			output: "output"
		},
		callbacks: {
			getData: function() {
				return {
					keyword: focusKeywordField.value,
					text: contentField.value
				};
			}
		}
	});

	app.refresh();

	focusKeywordField.addEventListener( 'change', app.refresh.bind( app ) );
	contentField.addEventListener( 'change', app.refresh.bind( app ) );
};

You can also invoke internal components directly to be able to work with the raw data. To get metrics about the text you can use the Researcher:

var Researcher = require( "yoastseo" ).Researcher;

var researcher = new Researcher( new Paper( "Text that has been written" ) );

console.log( researcher.getResearch( "wordCountInText" ) );

Change log

Please see CHANGELOG for more information what has changed recently.

Documentation

The data that will be analyzed by YoastSEO.js can be modified by plugins. Plugins can also add new research and assessments. To find out how to do this, checkout out the customization documentation.

Testing

npm test

Generate coverage using the --coverage flag.

Code style

To test your code style:

grunt check

Testing with Yoast SEO

In the YoastSEO.js directory, run:

npm link

Then, in the Yoast SEO directory, assuming you have a complete development version, run:

npm link yoastseo
grunt build:js && grunt build:css

From that point on you need to re-do grunt build:js && grunt build:css when you make changes to YoastSEO.js. If you want to unlink, simply do:

npm unlink yoastseo

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email security [at] yoast.com instead of using the issue tracker.

Credits

• Team Yoast
• All Contributors

License

We follow the GPL. Please see License file for more information.