Arturo Arturo - 18 days ago 6
HTML Question

Facebook scraper doesn't load dynamic meta-tags

I am creating the HTML meta-tags dynamically using the function below (GWT). It takes 1 second to have this on the DOM. It is working fine except for Facebook. When I share a link from my web, the scraper gets the meta-tags that are in the HTML: none. How can I fix this?

/**
* Include the HTML attributes: title, description and keywords (meta tags)
*/
private void createHTMLheader(MyClass thing) {

String title=thing.getTitle();
String description=thing.getDescription();

Document.get().setTitle(title);

MetaElement metaDesc = Document.get().createMetaElement();
metaDesc.setName("description");
metaDesc.setContent(description);
NodeList<Element> nodes = Document.get().getElementsByTagName("head");
nodes.getItem(0).appendChild(metaDesc);
}


This is the resulting HEAD on the DOM. The title
aaaa
and meta-description has been loaded dynamically. (Thanks CBroe for the tip). In the "view source" functionality, these dynamic tags are not displayed (only on developer tools - view dom).

<head>
<title>aaaa</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta name="description" content="My description">

<script language="javascript" type="text/javascript" src="dialective/dialective.nocache.js"></script><script defer="defer">dialective.onInjectionDone('dialective')</script>

</head>


The original HTML doesn't have a TITLE or META-DESCRIPTION tags.

Answer

The Facebook scraper can only see <meta> tags included in the original HTML response from the server. It's not "smart enough" to run any JavaScript code, Flash plugins, Java applets, or anything else that a full-fledged browser might run.

You'll need to generate these <meta> tags on the server using a server side framework.

Also, Facebook provides a handy testing tool to make sure your page exposes the appropriate meta tags. You might need to add OpenGraph tags as well, such as og:title and og:description.