Some of my pages/posts have very short custom stylesheets at the beginning of them. I know this isn't great practice, but it's worked very well thus far. The problem, however, is linking on Facebook: Facebook auto-generates a preview of the page, and it includes a picture, the page title, and a snippet from the beginning of the post content. The post content snippet is only showing the stylesheet that I have directly inside the post--Facebook isn't ignoring the fact that it's HTML. What can I do on WordPress's end to really hide that code? Do I need to put all of those styles in my custom CSS then give everything the proper class? (To clarify, the <style>
tag doesn't show, just the content of the stylesheet itself. It doesn't show on the page in WordPress, only in the Facebook snippet. This is a self-hosted blog.)
2 Answers
You can use Open Graph Protocol to define the data Facebook fetches from your site:
http://developers.facebook.com/docs/opengraphprotocol/
The metatag for the description has this form:
<meta property="og:description" content="my custom description for single post" />
You can use plugins, like
http://wordpress.org/extend/plugins/wp-facebook-open-graph-protocol/
to do it for you.
You can then debug your page here:
http://developers.facebook.com/tools/debug
to see how Facebook is fetching your page.
ps:
If you like code examples, I extracted the following code snippet from the above plugin (WP Facebook Open Graph protocol) that handles the og:description
part and injects it into the header via the wp_head
hook:
// do descriptions
if ( is_singular() ) {
if ( has_excerpt( $post->ID ) ) {
$wpfbogp_description = strip_tags( get_the_excerpt( $post->ID ) );
} else {
$wpfbogp_description = str_replace( "\r\n", ' ' , substr( strip_tags( strip_shortcodes( $post->post_content ) ), 0, 160 ) );
}
} else {
$wpfbogp_description = get_bloginfo( 'description' );
}
echo '<meta property="og:description" content="' . esc_attr( apply_filters( 'wpfbogp_description', $wpfbogp_description ) ) . '"/>' . "\n";
-
Awesome information, thank you! I've never really delved into the Facebook side of things; I didn't even realize Open Graph was a thing. Added that with the proper settings, but it now gives me the error
The object at '<URL>' previously had type 'article' and cannot be changed to an object of type 'website' to avoid data corruption of existing actions.
, but I'm guessing that's just for data integrity and I'll have to live with it until all of these links are gone.... Thank you!– vaindilFeb 15, 2013 at 3:17 -
(Sorry for the double edit.) The plugin didn't actually fix the error--I found a page that didn't generate the above error, and the CSS is still displayed in the description on the debugger.– vaindilFeb 15, 2013 at 3:21
-
The data Facebook fetches is cached for up to 24 hours (I think), so using the Facebook developer clears the cache for that page you view. I use this plugin on several Wordpress installs. Can you maybe share the url, if you are still having this problem?– birgireFeb 15, 2013 at 9:07
Using Open Graph should solve this for you. When you use Open Graph, you are essentially telling the social networks what Title, Description, Image, etc to use.
I use WordPress SEO by Yoast, and it works wonders because you can also include the extra Open Graph tags needed for Twitter cards.
I hope that helps.
-
I ended up using this plugin, as the one recommended by birgire did not actually work. This is exactly what I needed, thank you!– vaindilFeb 15, 2013 at 3:29