Good morning to everyone.
I’m completing my project and I’ve almost finished it. For days, however, I’ve been facing the problem of how my multimedia presentation can be intercepted by search engines. If I make a web page I know where to place descriptions and more information about the elements that are on the page but on Hype, where do I insert this information?
I know that you can edit HEAD and then put a lot of things in that place but how are the individual elements or individual images rattled? For example, will the naming of an element within Hype be identifiable when the whole thing is exported to HTML5?
For example, if I insert an image and it represents the character of Superman flying over New York, will renaming it within Hype as “Superman over New York while flying” correspond to a google search once the multimedia presentation is exported?
The plain answer. The regular search engine just looks at the HTML present when fetching your page and doesn’t execute JS to see what the outcome of that would be … and Hype is rendered at runtime on the client side. So you must provide it as hidden content in the HTML. Hype can export your used phrases and words in it’s export but they are pretty unstructured. If you want to reduce redundancy you can also fetch your data from external DIV’s that you put in your page an replace them in your Hype file on runtime. But that’s more then you asked for
Mhhh...the idea could be to insert a HTML WIDGET and insert some information. Peraphs that I insert in HTML WIDGET could be intercepted by search engines. But if this can be a solution...another question go next: the search engine wll point to that page? And if that page doesn't actually exist because Hype creates pages that are created on the fly at that moment, where will the pointing end up?
Yes, using an HTML-Widget is not the best solution.
This are the solutions I can come up with from the top of my head:
Hidden Content
Just use the a hidden section on you page and insert all the information. Hype provides the words used in your Animation on export in your HTML. Apart of that you can also just enter the word you want to be found like so:
<div style="display:none;">
<h1>My headline</h1>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui.</p>
<h2>Sub headline</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui.</div>
<a href="some link">some link</a>
...
</div>
This is only to illustrate hand written structured content for the search engine
Fetching data from within Hype from external content (page context)
<div style="display:none;">
<h1 id="myHeadLine1">My headline</h1>
<div id="myContent1">Nullam quis risus eget urna mollis ornare vel eu leo</p>
...
</div>
Inside of Hype you can the fetch the data with Javascript and replace it in your animation using
/**
* hypeDocument.setInnerHtmlByClass 1.0
* @param {String} class name to overwrite (don't include dot)
* @param {String} content or HTML used to overwrite class
*/
hypeDocument.setInnerHtmlByClass = function(cl, content) {
var hypeDiv = document.getElementById(this.documentId());
var hypeElm = hypeDiv.getElementsByClassName(cl);
for(var i=0; i<hypeElm.length; i++){
hypeElm[i].innerHTML=content;
}
}
Array('myHeadLine1', 'myContent1').forEach(function(key) {
var content = document.getElementById(key);
if (content) {
hypeDocument.setInnerHtmlByClass (key, content.innerHTML);
}
});
This code was written in the post and not tested in Hype but should work
In Hype everywhere you want the content set you assign the ID form your hidden content node as a classname. So you reduce redundancy.
Using this technic has the problem that you can't preview it properly in Hype as Hype doesn't offer editing or adding to the HTML-Body (I still don't understand why they don't offer it). There is a work around for previewing:
Either solution requires to edit the HTML on publication for SEO...
