Hiding styles from Facebook

Question

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.)

Answer 1

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";

Answer 2

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.