Microdata Injection

Summary: Generate extra <meta> tags useful for Facebook, Twitter, Google...

Version:

Prerequisites:

Status: working - evolving

Maintainer:

Categories: Publishing

Users: (view / edit)

Discussion: MicrodataInjection-Talk

Questions answered by this recipe

In order to make sure that social services (Facebook, Twitter,...) and search engines (Google,...) can crawl, distill, share and/or index web pages the best way (the way we want them to, that is), it is useful to provide them all with some relevant, specific informations (page title, cover image, abstract,...), usually in the form of <meta> tags.

While this has traditionally been accomplished in its most basic form by the (:title:) and (:description:) markup, new and more refined ways are evolving on the internet, which have been adopted by many and which might enable better control over web pages presentation when shared or searched.

Actually, there is no real point in trying to be visible in search results (and/or trying to be socially shared), but then show a very poor or clueless page title, page image and abstract there. This is why one might want/need to take better care of page meta tags.

This recipe helps publishing rich wiki pages' abstracts into social networks and search engines results.

Description

This recipe allows new directives, generating extra meta tags in the html

Usage

Place this code into config.php

Markup('fbgpmeta',
      'directives',
      '/\\(:fbgpmeta\\s(.*?):\\)/ei',
      "FbGpMeta(PSS('$1'))");

function FbGpMeta($a){
global $HTMLHeaderFmt;

 $o = ParseArgs($a);

 if($o['image']){
  $o['image'] = PUE($o['image']);
  $im = "\n<meta property=\"og:image\" content=\"".$o['image']."\"/>\n"
        ."<meta itemprop=\"image\" content=\"".$o['image']."\" />\n";
 }

 if($o['title']){
  $title = htmlspecialchars(  $o['title'], ENT_QUOTES);
  $tm = "\n<meta itemprop=\"name\" content=\"".$title."\" />\n"
        ."<meta property=\"og:title\" content=\"".$title."\"/>\n";
 }

 if($o['description']){
  $description =  htmlspecialchars(  $o['description'], ENT_QUOTES);
  $dm = "\n<meta itemprop=\"description\" content=\"".$description."\" />\n"
        ."<meta property=\"og:description\" content=\"".$description."\"/>\n";
 }

 $HTMLHeaderFmt['fbgpmeta'] = $im.$tm.$dm;
}

Then you can define your data per page this way:

  (:fbgpmeta title="Title goes here" description="Some text" image="http://example.com/image.jpg" :)

Your html will be populated by a new set of meta tags.

Notes

The most primitive, though working, way to automatically populate <meta> tags with given data from pages could be:

1 - Define non-standard variables (i.e. Image) in config.php this way:

      $Image=PageVar($pagename,'$:Image');

2 - Place something like the following into the skin template, into the html head section:

      <html itemscope itemtype="http://schema.org/Article">
      <meta itemprop="name" content="{$Title}" />
      <meta itemprop="description" content="{$Description}" />
      <meta itemprop="image" content="{$PageName}$Image" />
      <meta property="og:title" content="{$Title}"/>
      <meta itemprop="image" content="{$PageName}$Image" />
      <meta property="og:description" content="{$Description}"/>

You can of course adapt it to your needs.

3 - Place (and fill) something the like into every page

      (:title This is the title of the page:)
      (:Description Some text:)
      (:Image:http://www.example.com/image.jpg:)

Even if working (and documented here because it could still be a reference in some cases) the real PHP recipe provided above by CarlosAB is the best way to go.

Contributors

This page evolved out of a simple mailing list thread posted by Luigi and mainly taken care of by CarlosAB, with key contributions by many others.

Comments

See discussion at MicrodataInjection-Talk