Wdrożenie Open Graph w systemie Joomla

Wdrożenie Open Graph w systemie Joomla

Z artykułu dowiesz się o podstawowej rzeczy dla współczesnej optymalizacji stron, czyli jak szybko i poprawnie wdrożyć Open Graph. Są to dane strukturalne Facebook'a zaprojektowane tak, aby można było włączyć zewnętrzne treści w kontekst Social Graph, czyli sieci danych semantycznych udostępnianych i łączonych w Internecie. Dane strukturalne Open Graph pozwalają oznaczyć jednostkę treści tak, aby była możliwa do prezentacji w sieciach społecznościowych - innymi słowy indeksacji. 

 Od wersji Joomla 3 dane strukturalne są wbudowane w kod źródłowy. W komponencie K2 mamy do czynienia z danymi strukturalnymi od dłuższego czasu. Bywa jednak, że przy wykorzystaniu własnych szablonów nieumiejętnie wycinamy możliwość prezentacji danych semantycznych i odpowiedniej segmentacji treści dla sieci społecznościowych. Ma to niebagatelne znaczenie dla SEO gdzie od 2013 roku (mówić w dużym uproszczeniu) to akcent został postawiony właśnie na sieci społecznościowe i wszystkie dane musiały zostać uzgodnione z nowymi wymogami.

Aby wdrożyć dane strukturalne musisz wkleić poniższy kod w katalogu szablonu /html/com_content/article/default.php ewentualnie w pliku który definiuje dany widok.

// OPEN GRAPH CODE

// URL
$cur_url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
$cur_url = preg_replace('@%[0-9A-Fa-f]{1,2}@mi';, '', htmlspecialchars($cur_url, ENT_QUOTES, 'UTF-8'));

// OpenGraph
$template_config = new JConfig();
$uri = JURI::getInstance();
$article_attribs = json_decode($this->item->attribs, true);

$pin_image = '';
$og_title = $this->escape($this->item->title);
$og_type = 'article';
$og_url = $cur_url;
if (version_compare( JVERSION, '1.8', 'ge' ) && isset($images->image_fulltext) and !empty($images->image_fulltext)) { $og_image = $uri->root() . htmlspecialchars($images->image_fulltext);
$pin_image = $uri->root() . htmlspecialchars($images->image_fulltext);
} else {
$og_image = '';
preg_match('/src="([^"]*)"/', $this->item->text, $matches);

if(isset($matches[0])) {
$pin_image = $uri->root() . substr($matches[0], 5,-1);
}
}


$og_site_name = $template_config->sitename;
$og_desc = '';

if(isset($article_attribs['og:title'])) {
$og_title = ($article_attribs['og:title'] == '') ? $this->escape($this->item->title) : $this->escape($article_attribs['og:title']);
$og_type = $this->escape($article_attribs['og:type']);
$og_url = $cur_url;
$og_image = ($article_attribs['og:image'] == '') ? $og_image : $uri->root() . $article_attribs['og:image'];
$og_site_name = ($article_attribs['og:site_name'] == '') ? $template_config->sitename : $this->escape($article_attribs['og:site_name']);
$og_desc = $this->escape($article_attribs['og:description']);
}

$doc = JFactory::getDocument();
$doc->setMetaData( 'og:title', $og_title );
$doc->setMetaData( 'og:type', $og_type );
$doc->setMetaData( 'og:url', $og_url );
$doc->setMetaData( 'og:image', $og_image );
$doc->setMetaData( 'og:site_name', $og_site_name );
$doc->setMetaData( 'og:description', $og_desc );

$useDefList = (($params->get('show_author')) or ($params->get('show_category')) or ($params->get('show_parent_category'))
or ($params->get('show_create_date')) or ($params->get('show_modify_date')) or ($params->get('show_publish_date'))
or ($params->get('show_hits')));

Aby dane strukturalne pojawiały się poprawnie należy odpowiednio przygotować artykuł Joomla. 

Jak należy przygotować artykuł, aby poprawnie wyświetlał Open Graph?

  • artykuł powinien mieć wpisany DESCRIPTION - meta, który będzie parametrem OG:DESCRIPTION
  • artykuł powinien mieć dodany obrazek ILUSTRACJA WPROWADZENIA i ILUSTRACJA PEŁNEGO TEKSTU - to będzie obrazek OG:IMAGE - warto wspomnieć, że ten obrazek wcale nie musi się pojawiać na stronie i można go wyciąć przez CSS - czyli co innego możemy pokazywać w danych semantycznych dla społecznościówek, a co innego na stronie WWW
  • artykuł powinien mieć TEKST WPROWADZENIA / id="system-readmore"
  • warto zaznaczyć, że OPEN GRAPH to co innego niż SCHEME Google, gdzie dane strukturalne przypisane są do znaczników HTML, natomiast w przypadku OPEN GRAPH dane mamy w nagłówku HTML

W osobnym artykule opiszemy dlaczego pomimo tego, że w nagłówku masz poprawne OG, to na FB nie pojawiają się. Problemem nie jest CACHE po stronie FB, ale GZIP serwera.