Recent Topics

Using OpenGraph tags to improve SEO - and some requests to improve it

Started by on Mar 23, 2014 – Contents updated: Apr 11, 2014

Mar 23, 2014 23:08    

I've started using OpenGraph tags which work for Facebook and also (partly) now Twitter Card format. This means that when people link to your posts from Twitter and Facebook you get better control of what shows up. OpenGraph is also used in various ways by other sites including LinkedIn and Google+. As b2evo provides lots of post-specific information this is a good way to improve your SEO for social media sites.

I put the code in _html_header_inc.php
Here's an example of some of the code and output:

PHP

<!--opengraph-->  
 
<meta property="og:locale" content="en_GB" />
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php
  request_title( array(
    'auto_pilot' => 'seo_title',
    'title_single_before' => $Blog->get( 'name' ).' - ',
  ) );
?>" />
<meta property="og:url" content="<?php $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; echo($actual_link); ?>"/> 
<meta property="og:description" content="<?php
  request_titlearray(
    'auto_pilot' => 'seo_title',
    'title_single_before' => $Blog->get'name' ).' - ',
  ) );
?>" />
<meta property="og:site_name" content="Matt and Cat's Isle of Wight Eating Out Guide" />
<meta property="article:publisher" content="https://www.facebook.com/mattandcatiw" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@mattandcat"/>
 
<!--/opengraph-->

This produces the following example output as HTML:

HTML

<!−−opengraph−−>  
 
<meta property="og:locale" content="en_GB" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Matt & Cat's Isle of Wight eating out guide - Seafood Corner, Newport" />
<meta property="og:url" content="http://mattandcat.co.uk/reviews/index.php/2014/03/23/seafood-corner-newport"/>
<meta property="og:description" content="Matt & Cat's Isle of Wight eating out guide - Seafood Corner, Newport" />
<meta property="og:site_name" content="Matt and Cat's Isle of Wight Eating Out Guide" />
<meta property="article:publisher" content="https://www.facebook.com/mattandcatiw" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@mattandcat"/>
 
<!−−/opengraph−−>

This works fairly well for both Facebook and Twitter without any further modification.

Note that to use Twitter Card you need to get your domain and Twitter account authenticated here: https://dev.twitter.com/docs/cards/validation/validator

If you don't do that, it will not cause any errors but Twitter won't use the Card for your site.

(Note that I found that using $Item->permanent_url didn't work properly in this context- in fact causing a fatal error. The alternative using $_SERVER variables works in any context.)

However this can be improved quite a bit. Here's my requests for anyone who wants to suggest how this can be done:

1. At the moment the title and description are the same. That isn't very good. Ideally I would have content_teaser in the description but I could not work out how to strip the HTML out of this and limit it to 200 characters.

2. There ought to be an image as well, but you must not have the same image every time. So is there a way to show the URL of the first image in the body of any post?

Using 5.0.6

Apr 11, 2014 19:25

1- For excerpt (og:description) I use the below

PHP

if( !empty($Item) ){
                                   $excerp $Item->excerpt;
                                // "Quotes" creates problems, replace em.
                                  $quotz array('"''\'''\"');
                                  $none array('"''\'''\"');
                                  $excerpt str_replace($quotz""$excerp);
                                add_headline('<meta property="og:description" content="'.$excerpt.'">');
}

2- For og:image I use the attached image.

PHP

if( !empty($Item) )
                {    // Make sure the Item is loaded
                    if( $FileList $Item->get_attachment_FileList(20) )
                    {    // Get 20 attached files (there might be non-images so we try them all)
                        while( $File = & $FileList->get_next() )
                        {    // Loop through attached files
                            if( $File->exists() && $File->is_image() )
                            {    // Got an image
                                //$url = $File->get_url();
                                $url $File->get_thumb_url'fit-852x480' );
                                break;
                            }
                        }
                    }
                }
                
                if( !empty($url) )
                {
                    add_headline('<meta property="og:image" content="'.$url.'">');
                }

Also I'd like to point out that your og:url should not be prettyurl. Otherwise, you will lose your "likes" when the url changes -when you change your title or your permalink structure-. There's no way to redirect / transfer them. So I use the shortlink, such as:

PHP

$id $Item->ID;
        add_headline('<meta property="og:url" content="' $baseurl .'index.php?p='.$id.'&blog='.$blog.'&redir=no">');

Plesae note that
1- These codes go to _skin.class.php ( I placed them inside my display_init() function )
2- You need to call the globals

PHP

global $blog$disp$Item$baseurl$skins_url;

3- You might wanna wrap your code with a conditional to display og tags only on single display to avoid confusion with a

PHP

if($disp == 'single')

4- This works with 4.x. With 5.x the og:image thing doesnt work since get_attachment_FileList() seems to have moved to another class

Apr 11, 2014 23:27

Speaking of which; does anyone know the best way to get the first attached image url of the post ?

I used to get it with the above code in 4.x

PHP

// Make sure the Item is loaded
                        if( $FileList $Item->get_attachment_FileList(20) )
                        {    // Get 20 attached files (there might be non-images so we try them all)
                            while( $File = & $FileList->get_next() )
                            {    // Loop through attached files
                                if( $File->exists() && $File->is_image() )
                                {    // Got an image
                                    //$url = $File->get_url();
                                    $url $File->get_thumb_url'fit-852x480' );

In 5.x all I could do was getting the Images and preg_matching.

PHP

$post_images $Item->get_images$params,'raw');
preg_match('/(src)=("[^"]*")/',$post_images$img_parts);
$postimgurl str_replace(array('src="','"'),array('',''),$img_parts[0]);

This part seemed interesting and usable in _item.class.php but could not get it to work:

PHP

// Get list of attached files
        $LinkOnwer = new LinkItem$this );
        if( ! $FileList $LinkOnwer->get_attachment_FileList$params['limit'], $params['restrict_to_image_position'] ) )
        {
            return '';
        }
 
        $galleries array();
 
        /**
         * @var File
         */
        $File NULL;
 
        while( $File = & $FileList->get_next() )
        {
            $params['File'] = $File;
if( ! $File->is_image() )
            {
 
// GET THE IMAGE URL HERE $File->get_attachment_url or something ?

Apr 11, 2014 23:59

For 5.x, here is what I used for og:tags in _skin.class.php

PHP

function display_init()
    {
        global $blog$disp$Item$baseurl$skins_url$Chapter$ReqURI;    
        // call parent:
        parent::display_init();
            $og_uri $_SERVER['HTTP_HOST'].$ReqURI;
            if( isset($Item) && ! empty($Item) ) {
                $og_uri $baseurl .'index.php?p='.$id.'&blog='.$blog.'&redir=no';
                $og_desc $Item->excerpt;
                $og_title $Item->title;    
                    $post_images $Item->get_imagesarray(
                        'before'              => '',
                        'before_image'        => '',
                        'before_image_legend' => '',
                        'after_image_legend'  => '',
                        'after_image'         => '',
                        'after'               => '',
                        'limit'               => 1,
                        'image_link_to'       => 'original',
                        'before_gallery'      => '',
                        'after_gallery'       => '',
                        // Optionally restrict to files/images linked to specific position: 'teaser'|'aftermore'
                        'restrict_to_image_position' => 'teaser',
                    ),'raw' );
    
                if( ! empty ($post_images) ) {
 
                    preg_match('/(src)=("[^"]*")/',$post_images$img_parts);
                    $postpic str_replace(array('src="','"'),array('',''),$img_parts[0]);
                }
            }
            else if ( isset($Chapter) && ! empty($Chapter) ) {
                //if we are on category 
                $og_desc $Chapter->description;
                $og_title $Chapter->name;
            }
            else {
                // Just in case, for everything else.    
                $og_desc $Blog->description;
                $og_title $Blog->name;
            }
        $id $Item->ID;
        add_headline('<meta property="og:type" content="article">');
        add_headline('<meta property="og:description" content="'.$og_desc.'">');
        add_headline('<meta property="og:url" content="'$og_uri '">');
        add_headline('<meta property="og:title" content="'.$og_title.'">');
        if ( isset($postpic) && ! empty($postpic) ) {
            add_headline('<meta property="og:image" content="'.$postpic.'">');
        }


Form is loading...

powered by b2evolution – This forum is powered by b2evolution CMS, a complete engine for your website.