It is an unexpected and unwelcome drawback for JavaScript-based template engines that they are not friendly to search engines. In other words, search engines are unable to extract plain contents from JavaScript as well as from pure HTML.
Though search engines grows powerful as fast as the speed of Moore’s Law, we still put search engine optimization (SEO) under consideration when making design and development of Hanjst language and engine.
The goal will soon be reached as we start towards from the two ends that search engines are getting smarter and smarter so they are read and extract correct data from JavaScript and Hanjst is getting better and better to act like it is a purl HTML.
Usually, a page’s title, description and keyword (TDK) are variables generated from server-side and passed into client-side by being wrapped into a JSON data. Unfortunately, search engines are unable to read correct title, description and keyword from the JSON data. Hanjst has some placeholders to meet this requirements. That is to say, Hanjst leave pre-defined placeholders for a page’s title, description and keyword.
These TDK will be replaces in server-side just like what happened to HANJST_JSON_DATA described in last section Hanjst Ready to go.
Here is an example to show the TDK in a template file. (eg08131528)
<html>
<head>
<title>Serv_Page_Title</title>
<meta name="description" content="Serv_Page_Desc"/>
<meta name="keywords" content="Serv_Page_Keyword"/>
</head>
<body>
....
</body>
</html>
When the template is read in server-side the placeholders for TDK will be replaces with actual values.
//- resp data container
$respData = array();
$tdkArr = array(
"Hanjst is so powerful.",
"Hanjst is a JavaScript-based template language and engine. It is very powerful and has a few of exciting features as back-end tempalte engines.",
"Hanjst, 汉吉斯特, template engine, JavaScript"
); // keys are optional
$respData['tdkArr'] = $tdkArr;
//- template contents processing
$tplFile = "news.html";
$jsonDataPlaceHolder = "HANJST_JSON_DATA";
$tplContent = file_get_contents($tplFile);
$tplContent = str_replace($jsonDataPlaceHolder , $jsonDataStr, $tplContent);
//- tdk replacements
$tdkPlaceHolders = array("Serv_Page_Title", "Serv_Page_Desc",
"Serv_Page_Keyword");
$tplContent = str_replace($tdkPlaceHolders, $respData['tdkArr'],
$tplContent);
So that template contents have been merged with actual values in server-side and its contents looks exactly like a pure HTML which is welcome to search engines.
The template file (eg08131528) looks like as below from the view of a search engine.
<html>
<head>
<title>Hanjst is so powerful.</title>
<meta name="description" content="Hanjst is a JavaScript-based template language and engine. It is very powerful and has a few of exciting features as back-end tempalte engines."/>
<meta name="keywords" content="Hanjst, 汉吉斯特, template engine, JavaScript"/>
</head>
<body>
....
</body>
</html>
SEO is not a problem any more for Hanjst. By doing so, we have already enhance the page with desirable title, description and keyword.
Linkage is another SEO issue of JavaScript-based template engine due to that contents are generated by client-side and search engines cannot understand who points to whom with what URLs.
The first kind of groups URLs look like below. (eg08131545)
...
<a href="{$url}&mod=news&act=detail&id={$newId}">{$newsTitle}</a>
<a href="{$url}&mod=news&act=list&page=2">Next Page</a>
...
The second kind of groups URLs are links that loaded via inner templates. Those links have no clues in current host page and they comes from JSON data and will be appended to current host page via Hanjst.
In order to address this kind of issues, Hanjst suggests to generate redundancy links and put them inside a hidden DIV at the end of page. By this means, (eg08131545) will be appended more links.
...
<a href="{$url}&mod=news&act=detail&id={$newId}">{$newsTitle}</a>
<a href="{$url}&mod=news&act=list&page=2">Next Page</a>
...
...
<!-- for SEO only -->
<div style="display:none; z-index:-99;">
<a href="/?&mod=news&act=detail&id=1234">Powerful Hanjst is coming.</a>
<a href="/?&mod=news&act=list&page=2">Next Page</a>
</div>
And it can be even better with pseudo static links as below by introducing an .htaccess file in server-side, which in charge of translating those links into actual dynamic content pages.
i.e., in .htaccess file or HTTPD conf file,
RewriteRule “^{$url}&(.*)” “/?$1&ref=Hanjstless” [R=301,L]
...
<a href="{$url}&mod=news&act=detail&id={$newId}">{$newsTitle}</a>
<a href="{$url}&mod=news&act=list&page=2">Next Page</a>
...
...
<!-- for seo only -->
<div style="display:none; z-index:-99;">
<a href="/news-detail-1234">Powerful Hanjst is coming.</a>
<a href="/news-list-2">Next Page</a>
</div>
It is the same issue that plain contents in Hanjst-based pages are not welcome to search engine. So the resolution is the same one: try to print more plain contents and mimic as a pure HTML.
All other measures are welcome to be appended and talked about here.