I have a "normal" website and I am currently developing a mobile version of the site. Because of the complexity of the shown information, I am using a separate domain (mysite.mobi) and no responsive solution. The site is built as a single-page-app using jQuery mobile.
The main workflow is that I am using a custom parameter attached to my main file (mysite.mobi/index.htm#forecast?location_id=1234). It will then fire an AJAX-request and fetch the content corresponding to the forecast for the location_id 1234. The desktop website URL would be something like mysite.com/forecast/1234.
Now I am thinking about how to get my mobile search results displayed in Google searches. According to their recommendations, I should use a link rel=alternate
tag in the main page and add a link rel=canonical
tag to the mobile site.
There is the problem - as I am using a single page webapp, I only have a single crawlable file on my mobile domain where I could add this tag. However I can not get this tag to reflect the correct location on my main site.
What are the best practices for using a single-page-app and canonical URLs?