9.3 Metadata & Social Rich Cards

Every application deserves to be promoted the proper way. This framework provides you with out-of-the-box features that can help you define proper Metadata for your application that can be automatically turned into rich cards when shared on social platforms such as Facebook, LinkedIn, Pinterest or Twitter.

Creating Rich Cards with Caligrafy

In this video, we show how we can create Rich Cards that give search engines, social media networks and collaboration tools the ability to have more information about your site, application or product from the URL alone.

Metadata Definition

This framework provides you with a core helper method that can help you define the metadata properties properly. The metadata() core method can be used in the context of a Controller or a View.

metadata(array(
   'site_name' => 'Your Site Name',
   'google-site-verification' => 'google-search-verification',
   'site_url' => 'http://your-app-url',
   'title' => 'Title',
   'description' => 'this is a description',
   'creator' => 'Your name',
   'image' => 'http://url-to-the-site-banner',
   'amount' => '0.00',
   'priceValidUntil' => "2024-12-25",
   'currency' => 'USD',
   'shipping_cost' => '0.00',
   'availability' => 'in stock',
   'ratingValue' => 5,
   'reviewCount' => 1  
));

Activating Metadata in the View

This framework provides several out-of-the-box views to help you get started quickly. These views are mainly for putting a place a structural foundation for your application that involves layouts and other modules that can be included within each view. All these pug templates can be found in /views/default.

In order to have metadata information in these templates, the metadata needs to be defined and that was done in the previous step. However, the metadata information needs to be passed on to the template for it to render in the final HTML code. In order to do that the metadata information that created in the previous step can be passed on to the view by passing it as an argument. The code will look like this:

use Caligrafy\Controller;

class CardController extends Controller {
   public function index()
   {
       // metadata created in the previous step
       metadata(array(
            'site_name' => 'Your Site Name',
            'google-site-verification' => 'google-search-verification',
            'site_url' => 'http://your-app-url',
            'title' => 'Title',
            'description' => 'this is a description',
            'creator' => 'Your name',
            'image' => 'http://url-to-the-site-banner',
            'amount' => '0.00',
            'priceValidUntil' => "2024-12-25",
            'currency' => 'USD',
            'shipping_cost' => '0.00',
            'availability' => 'in stock',
            'ratingValue' => 5,
            'reviewCount' => 1  
       ));

      // pass the metadata to the view
      return view('/default/index', array('metadata' => metadata())); 
      // the metadata() is a core helper method that returns all the metadata content defined previously

   }

}

Note that the second argument of the view method is an array of all the values that need to be passed on to the view. the key given to each pair in this array represent the name of the variable that the view uses. For the metadata to be activated, the key must be called metadata.

Activating Social Sharing

Most applications today give the ability for users to share the application to social networks directly from the application. This is a neat way for promoting the application to your friends and fans on social media. This framework comes prepackage with a view module that gets injected into the provided default template. This module can be found in /application/views/default/modules/social.pug.

In order to activate the Social Share buttons in the default template, all you need to do is pass the boolean variable $social to the view. The previous return statement will now look like this:

return view('/default/index', array('metadata' => metadata(), 'social' => true)); 

Provided you created the appropriate route to point to this controller that we created, you will be able to test out the page in your browser and you will see the social sharing buttons at the bottom center of the page.

Testing Sharing and Rich Cards

Social Sharing can be tested directly by clicking on any of the social buttons that got added in the previous steps. Upon sharing, if the metadata that was defined is accurate, you would be able to see a rich card with all the descriptive information that you provided. In order for this to work, your machine needs to be publicly accessible which means that it cannot be tested with the localhost. It needs to be on either a production server with a registered host name or the machine IP needs to be public.

If you would like to make your localhost publicly accessible, we recommend using ngrok.com.

You could also test out the rich cards on each social network using their debuggers. For that, your machine also needs to be publicly accessible.

• facebook: facebook debugger
• google: google rich results test
• twitter: twitter card validator
• linkedin: linkedin post inspector
• pinterest: pinterest url debugger

Next Section: Learn about Search Referencing and Analytics