SEO indexing

[Mati365]

Hi, all your examples such as this:

<template hibiki>
  <hibiki-data>
    {"color": "blue", "name": "Mike"}
  </hibiki-data>
  <p>
    {{ $.name }}'s favorite color is 
    <span style="font-weight: bold; color: *$.color">{{ $.color }}</span>
  </p>
</template>

affects SEO. Google bots index content inside template tags and indexed pages will contain trashy data such as "{{ $.color }}". Is there any offical way to bypass this issue (maybe hidding template tags in bundled script)?

[sawka]

Sorry about the delay in answering your question, did not see it when it was initially posted.

I didn't realize that Google indexes content inside of template tags (surprised!).

One option is to load the Hibiki HTML content remotely. You can do that in the 'init' handler and have the remote AJAX call return a hibiki 'html' action (which will set the html content, just like the static content in the template tag). So that response would look something like: {"hibikiactions": [{"actiontype": "html", "html": "... the HTML to render ..."}]} Note that you can also return the initial data for the script in that call as well.

The second option, which I will implement for the next release (v0.3.3) will be to use a script tag with the type set to 'text/hibiki-html' in place of the template tag. That should definitely protect it from the google crawl. e.g.:

<script type="text/hibiki-html">
... your hibiki code goes here...
</script>

[sawka]

Just released v0.3.3 (https://github.com/dashborg/hibiki/releases/tag/v0.3.3). Basically I've added three new options for how to embed the Hibiki code into your HTML which should address your SEO concerns:

<!-- standard way with template tag -->
<template hibiki> ... Hibiki HTML code here </template>

<!-- load inline code, but protected from crawlers -->
<script type="text/hibiki-html"> ... Hibiki HTML code here ... </script>

<!-- load code from remote URL -->
<script type="text/hibiki-html" src="/url/to/hibiki/src.html"></script>

<!-- load code from remote URL, and load initial data from a different URL (data must be type 'application/json') -->
<script type="text/hibiki-html" src="/url/to/hibiki/src.html" datasrc="/url/to/data.json"></script>

<!-- uses fetch so data URLs will work -->
<script type="text/hibiki-html" src="data:text/plain;base64,PGgxPnRlc3Q8L2gxPg=="></script>