Jump to content

Recommended Posts

  • Moderators

Search Engine Optimisation - SEO

Over the years I have made quite a few websites with Smart, but eventually stopped doing that.
Reason is that Smart produces single page applications (or multiple if you like) and SEO for these type of apps is essentially impossible.

Search engine crawlers look for html, which is what feeds their indexing effort. This is completely absent in the standard index.html file, so essentially they see an empty page.

Google's googlebot is supposed to be able to execute the js bit during its crawling, but I find the indexing results below par. 

The accepted standard solution is to use serverside rendering. Basically if someone accesses a page in the browser, a piece of server side code is fired up which determines if the user is a webcrawler or a person. In case of a crawler it serves some html code, in case of a user it lets the browser handle the js code.
Sounds like cloaking-101, but amazingly Google is ok with that.

The crux of course is where the 'html code' in the sentence above comes from. The process of constructing that is a bit messy and involves the use of Google or third party products (Puppeteer, headless Chrome, dataflowkit, prerender.io ea)

A more simple way is to pre-render client-side : add the static html bit of all forms in the index.html file.

Something like

<!DOCTYPE html>
<html>
<head>    
... standard tags
</head>

<body>

<div id="Temp1" class="TW3Display" data-okey="OBJ4" style="z-index: 1; visibility: visible; display: inline-block; overflow: hidden; left: 0px; top: 0px;
position: absolute; min-width: 100%; min-height: 100%;"><div id="Component2" class="TW3DisplayView" data-okey="OBJ3" style="z-index: 1; 
visibility: visible; display: inline-block; overflow: hidden; left: 0px; top: 0px; position: absolute; width: 1440px; height: 488px;">
<div id="Component5" class="TW3CustomForm" data-ok ....

... standard body script (document.ontouchmove)

  <script type="text/javascript" src="main.js"></script>

</body></html>

 

and delete this Temp1 element as the first action in the app's project to avoid having it all doubled up

There are some disadvantages associated with this approach too, but at least the crawler will have some html to base its indexing on


It would be nice if somehow this could be incorporated in the build process ...
 

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...