Hiding styles from Facebook

0 Views

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

Post Views: 0

Related posts

Leave a Reply

2 comments

  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( "rn", ' ' , 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";

  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.