yoast/yoastseo.js

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

Deprecated repository

This repository will go read-only soon. Relevant issues will be, or have been, moved to their reelevant repositories. Please use the wordpress-seo repository for feature requests or bugreports regarding the content analysis in the Yoast SEO plugin.

If you find an issue in this repository that is still relevant but was not moved, please use the above links to submit a new bugreport in the correct repository. Please include a link to the issue from this repository in your new report.

yoastseo.js's Issues

Tables used for non-tabular data

We shouldn't use tables for non-tabular data. As discussed with @jdevalk earlier today, using a list is semantically probably the best option.

UX improvements for Snippet preview

• Make sure only the slug part of the URL is editable and it updates the slug too
• Show complete text when editing. Only truncate when the input field is not selected.
• Show red text when input is too long.
• Add edit icon behind the snippet preview fields on hover.

page title keyword

url keywords

Create spechelper

We've added some logic to the analyzer to make testing in isolation possible. This should be handled in the tests itself. Use Spec utilities to dry stuff.

images & alt-tags

Add translators comments

We should add translator comments to all translations with placeholders

Highlighting in slugs should accept dashes as spaces

Used content analysis as focus keyword, slug contained content-analysis but didn't highlight.

Score outputter

Localize text analysis

We've received reports that not all current checks may apply to every language/locale.

We received the following example for Hebrew;

almost all prepositions such as "to", "for" etc are attached to the noun itself in Hebrew. This makes them unrecognizable to Yoast SEO, and so it states that the keyword "isn't" there and makes recommendations based on it.

I'm sure there are more differences like this rendering certain checks unnecessary for specific locales or, the contrary, adding the need for specific checks for a specific locale.

This is not an issue that can be fixed easily, as it does require knowledge of (how Google handles) each locale, but it might be a good place for the discussion on if/how we want to do this.

snippet preview prototype

focus keyword doubles

Add glotpress download task

We want to download the translations from glotpress before converting them to json, so add the glotpress download task to do this.

Prerelease Checklist

• Display issues in Firefox #51
• Snippet preview UX improvements #53
• Use a list instead of a table #49
• No newlines in snippet preview #48
• Don't submit the form when hitting enter #47
• Inaccessible bullets (add screenreader-text) #46
• Labels have no for attribute #45
• Error: linking to another page with the focus keyword #44
• Add diacritics #42

Change YoastSEO_preProcessor to something else

In the preprocessor.js there is a variable YoastSEO_preProcessor and YoastSEO_PreProcessor. This is a very bad idea, we should change it.

Add grunt setup

JS uglification and concatenation

Setup CI

analysis scoring prototype

Clientside jasmine testing

Add diacritics to analyzer

empty meta description when text is empty

If no text of excerpt is defined, and you don't have any text the meta description stays empty.

maybe enter the sample text if it stays empty?

Stop words test is broken

Used the copy from my real-time content analysis post as input, and content analysis as the focus keyword.

Got the following "warning":

The focus keyword for this page contains one or more stop words, consider removing them. Found 'is'.

Acronyms and abbreviations aren't calculated correctly in syllablecounter

The syllables in acronyms and abbreviations aren't calculated correctly. Abbreviations with only consonants are counted as 0. Abbreviations with vowels are counted as normal words, thus counted incorrectly.

Analyzer prototype extension

Create analyzer prototype extensions to add functions and scoring to the Analyzer.

Descriptive keyword analysis

Currently, our keyword analysis is mainly directive.

I think it could also be really helpful to have more descriptive keyword analysis.

Maybe some piece of content I've written is actually very good or useful as is. It might be quite optimized for different keywords than the one I've thought of.

As a writer, I would then like to gain insight into what my currently written text is good for.

Based on the content I've written, I can imagine it would be interesting to know:

• Top keywords
• Keyword groups (which keywords often appear in the same sentence)
• Top keywords based only on headers, links and first sentences of paragraphs. That might add some indication about the quality of the main message contained inside the text.

We could also tag a post with its top keywords or we could save it as a postmeta. The data could be used for keyword suggestion or could be sent to GA as a custom dimension.

First paragraph

update for paragraph count

Add N/A option to scoring

currently a score of 0 implies a N/A SEO score. Since the score could become 0 with a valid SEOscore, a N/A option has to be added.

Error: linking to another page with the focus keyword

My focus keyword is 'Yoast' and I'm linking to 'yoast.com'. I'm linking to this page with another word than my focus keyword. Yet I get the following notice:
You're linking to another page with the focus keyword you want this page to rank for, consider changing that if you truly want this page to rank.

Text:
<a href='http://example.com/yoast'>Test</a>

It seems there's a check for the href and title as well as the text we're linking with. In the current analysis there only is a check for the text we're linking with. In the example above, this is with 'Test'.

Display issues in Firefox

The Real-time Content Analysis page has two display issues in Firefox, see the screenshot:

• Missing labels. createLabel() function uses innerText, but it doesn't work in Firefox.
• Text field overlapping with the sidebar. .inputForm textArea { clear: left; } fixes this for me.

Update input fields when inline editing the snippet preview.

Since we've made these values editable through the snippet preview, they should still be saveable to the database. This can be done by binding hidden fields to those values.

The slug should be updated in the corresponding field:

page title characters

Improve initialisation flow

I really want to initialise the analyser like this:

var analyzerApp = new YoastSEO.App({
    contentFunction: contentCallback,
    titleFunction: titleCallback,
    queue: [ "step1", "step2" ]
});
analyzerApp.analyze();

We should define what the bare minimum is that the analyser requires and document this in the README. There should be no object required to pass in the App.

We should document all possible parameters and parameter types in the README.

Cleanup strings in scoring.js

There are strings that don't have a first replacement, %1$s. There is also a string that is missing <code> tags around a non-translatable.

WP integration

Link count analyzer

meta description

Incorrect submit/refresh

When pressing 'Enter' after typing the focus keyword, the page refreshes and loses all of its content.

Browser used: Chrome (OS X)

Make sure only the slug part of the URL is editable and it updates the slug too

SERP snippet showing raw HTML

Noticed this when scoping out the new yoast Drupal module. The SERP snippet simulation is showing raw HTML in the excerpt area. Of course Google never shows HTML tags there so neither should the yoast snippet.

<div id="yoast-snippet"><div id="snippet_preview"><div class="snippet_container" id="title_container"><span contenteditable="true" class="title" id="snippet_title">Well | GLAZED</span></div><div class="snippet_container" id="url_container"><cite class="url urlBase" id="snippet_citeBase">http://localhost/</cite><cite contenteditable="true" class="url" id="snippet_cite"><strong></strong>e<strong></strong>l<strong></strong>e<strong></strong>m<strong></strong>e<strong></strong>n<strong></strong>t<strong></strong>s<strong></strong>/<strong></strong>w<strong></strong>e<strong></strong>l<strong></strong>l<strong></strong></cite></div><div class="snippet_container" id="meta_container"><span contenteditable="true" class="desc" id="snippet_meta">&lt;div id="b16" class="az-element az-section" style="padding-top: 60px; position: relative;" data-az-id="b16" data-</span></div></div></div>

prefix stringHelper with YoastSEO

Bullets not accessible - empty divs

The bullets are empty divs, thus a screenreader will skip them. Adding a span describing the bullet to the div using the screen-reader-text CSS class could solve this problem.
More information on the screen-reader-text CSS class on blog.rrwd.nl.

Example
Current: <div class="wpseo-score-icon bad"></div>
Suggestion: <div class="wpseo-score-icon bad"><span class="screen-reader-text">Bad</span></div>

Note
The screen-reader-text class will have to be added to the CSS to make this work.

Make Image, URL and metacheck compatible w/o keyword.

The checks in the analyzer for images, URLs and metadescriptions should be able to run without relying on the presence of a keyword so the can be used in the no keyword queue.

It can't find words with special characters in the content.

I encounter this error on this post: http://www.scroll.com.tr/8-gb-ramli-kapakli-telefon-geliyor-mu/

The focus keyword is "kapaklı". As you can see it contains a special character (dotless i, Turkish character). Because of dotless i, analyze page shows that there is no focus keyword in the first paragraph but you can see it in the first paragraph.

Here is two screenshots from admin panel. First one is the General tab. It says there is 3 occurences of focus keyword in the content and it's right.

But on Page Analysis tab it says that "The keyword doesn't appear in the first paragraph of the copy, make sure the topic is clear immediately."

If I change the focus keyword from "kapaklı" to "telefon", I get a green score, but without change it's orange.

I hope it's clear enough.

Some data:
WordPress version: 4.3.1 (single site)
Yoast SEO Premium version: 2.3.5
Server operationg system: CentOS
Web servers: Apache, nginx (proxy)
PHP version: 5.3.3

numbers aren't counted in the syllablecounter

Numbers in textstrings are skipped completely in the syllablecounter.

Keyword in URL test doesn't accept dash as a space

URLs generally don't have spaces, but dashes instead, so we should accept dashes where there are spaces in the focus keyword.

Related to #40

Add ability for multiple analyzers on 1 page

Labels don't have a for attribute

The labels describing the text fields and text areas don't have a for-attribute. This makes them not accessible.

Custom fields implementation

Functionality:

As a user of the blog posts section in WordPress, I want to use custom fields in the page analysis tool. The page analysis tool should use the fields in the scanning process to determine the content value.

UI:

The page analysis should be analysed when the user is done with typing in one of the input fields. After that, we should trigger the custom field analysis and "on finish" update the results in the page analysis scoring page.

Integration & Data management:

To resolve this issue, we have a few scenario’s which could be used. After our discussion, we think Scenario 6 is our best case.

Scenario 1:

Load all short codes on page load.

Pros:

• Everything is on the page available when we need it.

Cons:

• The page load time is very slow.

Scenario 2:

Pre-load on page in user memory.

Pros:

• Faster page load then Scenario 1.
• Bottlenecks are traceable
• Everything is loaded when we need it on the page.

Cons:

• Possible client side memory issue.

Scenario 3:

Dynamic fetch (async).

Pros:

• We don't have to preload everything
• There isn't much stored on the client side

Cons:

• Unpredictable
• Timing issues

Scenario 4:

Scenario 2 + reload functionality

Pros:

• We have more up-to-date data

Cons:

• Same as Scenario 2

Scenario 5:

Build our own short code integration.

Pros:

• Other plugin developers don't have to change a lot in their plugins.

Cons:

• We need to centralize all short codes

Scenario 6:

Local storage for all (rendered) short codes. This scenario includes a hash verifier to detect updates.

Pros:

• Very fast storing mechanism for clients

Cons:

• We need to hash the local storage and verify it with our hash to detect updates

New lines shouldn't be allowed in the snippet preview

When the cursor is at the beginning of a line, you're able to put in 'enters'. They're removed when leaving the field, but shouldn't be allowed at all.