Hi,
I searched my website in google and I found in some post descriptions css code as text. I checked my website and I found, that Toolset View loads css in this DIV
<div id="views-extra-css" style="display:none;" aria-hidden="true"></div>
or custom template css in this DIV
<div id="ct-extra-css" style="display:none;" aria-hidden="true"></div>
After page is loaded, adds toolset with javascript code CSS from these DIVs in <head></head> with <style></style> wrapper.
JS Code:
var extra_css = $( "#views-extra-css" ) ? $( "#views-extra-css" ).text() : null; if( extra_css ) { $( 'head' ).append( '<style style="text/css" media="screen">' + extra_css + '</style>' );
$( "#views-extra-css" ).remove(); }
$( 'head' ).append( $( "#views-extra-css-ie7" ).html() );
$( "#views-extra-css-ie7" ).remove();});
jQuery( document ).ready( function( $ ) {
$( 'head' ).append( '<style style="text/css" media="screen">' + $( "#ct-extra-css" ).text() + '</style>' );
$( "#ct-extra-css" ).remove();});
but google indexes these DIVs with CSS before Javascript beginns to work, therefore perceive google this CSS code in DIV as text. This is very bad for SEO and I lose my pagerank in google.
Since when loads toolset CSS like this? This was not so 1 year ago.
I hope toolset team can find very fast some fix for this problem.
best regards
Hi, I will reach out to my 2nd tier support team to see if there's anything that can be done to quickly resolve the SEO ranking issue. I'm not sure when the decision was made to include custom CSS using this method, or if there is a way to avoid the problem you are experiencing. Please stand by and I will update you soon.
Hi, yes I have had some discussion with our lead developer and unfortunately there is not a great solution here. Since Toolset must evaluate custom CSS, by the time the head tag has been rendered, Toolset does not know which styles need to be added. Instead, we must add those styles to the body somehow and then move them into the header after page load. Style tags are not allowed in the body element by strict validation rules, in order to pass W3C validation. The drawback is that these items may be indexed. At this time, validation trumps indexes, and this is the direction our team would prefer to maintain.
Hi Christian,
I found a great solution, without many changes:
changes in 1st file: "/wp-content/plugins/wp-views/embedded/inc/wpv.class.php" between lines 3596 and 3637. Code must be like so:
if ( '' != $cssout_item ) {
$cssout_item_title = get_the_title( $view_id );
$cssout .= "/* ========================================= */\n";
if ( $is_wpa ) {
$cssout .= "/* " . sprintf( __( 'WordPress Archive: %s - start', 'wpv-views' ), $cssout_item_title ) . " */\n";
} else {
$cssout .= "/* " . sprintf( __( 'View: %s - start', 'wpv-views' ), $cssout_item_title ) . " */\n";
}
$cssout .= "/* ========================================= */\n";
$cssout .= $cssout_item;
$cssout .= "/* ========================================= */\n";
if ( $is_wpa ) {
$cssout .= "/* " . sprintf( __( 'WordPress Archive: %s - end', 'wpv-views' ), $cssout_item_title ) . " */\n";
} else {
$cssout .= "/* " . sprintf( __( 'View: %s - end', 'wpv-views' ), $cssout_item_title ) . " */\n";
}
$cssout .= "/* ========================================= */\n";
}
}
if ( '' != $cssout ) {
echo "\n<div id=\"views-extra-css\" style=\"display:none;\" aria-hidden=\"true\">\n"."<!--start-css\n".$cssout ." end-css-->\n"."</div>\n";
}
$cssout_compat = "<!--[if IE 7]><style>\n"
. ".wpv-pagination { *zoom: 1; }\n"
. "</style><![endif]-->\n";
echo "\n<div id=\"views-extra-css-ie7\" style=\"display:none;\" aria-hidden=\"true\">\n" . $cssout_compat . "</div>\n";
$js_for_css_out = "jQuery( document ).ready( function( $ ) {\n"
. "\tvar extra_css = $( \"#views-extra-css\" ) ? $( \"#views-extra-css\" ).html() : null;"
. "\tif( extra_css ) {"
. "\t\t$( 'head' ).append( '<style style=\"text/css\" media=\"screen\">' + extra_css.replace(/<!--start-css\\n|end-css-->\\n/gi,\"\") + '</style>' );\n"
. "\t\t$( \"#views-extra-css\" ).remove();"
. "\t}"
. "\n"
. "\t$( 'head' ).append( $( \"#views-extra-css-ie7\" ).html() );\n"
. "\t$( \"#views-extra-css-ie7\" ).remove();"
. "});\n";
echo "\n<script type=\"text/javascript\">\n" . $js_for_css_out . "</script>\n";
}
and also change in the second file "/wp-content/plugins/wp-views/embedded/inc/views-templates/wpv-template.class.php" between lines 1041 and 1065 like so:
if (
isset( $extra_css )
&& '' != $extra_css
) {
$cssout_item_title = get_the_title( $view_template_id );
$cssout .= "/* ========================================= */\n";
$cssout .= "/* " . sprintf( __( 'Content Template: %s - start', 'wpv-views' ), $cssout_item_title ) . " */\n";
$cssout .= "/* ========================================= */\n";
$cssout .= $extra_css . "\n";
$cssout .= "/* ========================================= */\n";
$cssout .= "/* " . sprintf( __( 'Content Template: %s - end', 'wpv-views' ), $cssout_item_title ) . " */\n";
$cssout .= "/* ========================================= */\n";
}
}
if ( '' != $cssout ) {
echo "\n<div id=\"ct-extra-css\" style=\"display:none;\" aria-hidden=\"true\">\n"."<!--start-css\n".$cssout ."end-css-->\n"."</div>\n";
$js_for_css_out = "jQuery( document ).ready( function( $ ) {\n"
. "\t\t$( 'head' ).append( '<style style=\"text/css\" media=\"screen\">' + $( \"#ct-extra-css\" ).html().replace(/<!--start-css\\n|end-css-->\\n/gi,\"\") + '</style>' );\n"
. "\t\t$( \"#ct-extra-css\" ).remove();"
. "});\n";
echo "\n<script type=\"text/javascript\">\n" . $js_for_css_out . "</script>\n";
}
}
Key: Google can index every html elements, if they are display:none or not. But google does not index html comments as keywords or something else. Therefore I comment these CSS code in HTML and with javascript removed only HTML comment Tags and so added in Style. I hope, this can help other also.
Can toolset team add this in the next View update?
best regards
Interesting solution. I will pass this information along to our team as a potential improvement.
Okay. I tested this solution and it does work. Google crawled my pages and there are no more CSS keywords. Resolved.
