Linking to individual forms

Anvil Q&A
#1

I may be missing something obvious, but by default Anvil doesn’t give distinct URLs to individual forms. That makes sense, it’s basically a single page app. But, for search engine purposes, I’d want individual URLs for things like product pages, etc, that I want indexed and able to be bookmarked, shared, etc.

I’ve seen how you can use the part after the hash symbol to route to specific forms, but as far as I can find that won’t allow search engines to index those as separate pages.

My end goal is to allow content pages to be defined by admins of an app to represent products, and for those dynamically generated product descriptions to be picked up by search engines. How are other people handling this?

#2

I’m curious the same thing and if pages/forms could be created from say db objects that’s something I’m looking at doing myself

#3

Google has a magic syntax for this! If your location hash begins with a !, it will index that page. For example foo.anvil.app#!store

#4

That’s a link from 2014. From what I can find from more recent sources, while search engines do still support indexing #! urls, the recommendations from Google are to stop using them and move to standard URLs with either query parameters or extra information in the URL itself (e.g. mysite.com/products?id=34 or mysite.com/products/34).

Either of those options is easy to do in other web app frameworks. I’m surprised to not find something in Anvil for form specific URLs to jump straight to a particular form, and utility methods for grabbing and parsing the URL.

While I can certainly build something using #!, I’d far prefer to have plain URLs with state information encoded in them, e.g. mysite.com/products/34, and to have Anvil handle the routing.

1 Like
#5

That sort of routing is on our roadmap and it’s definitely something we want to get to soon.

Shameless plug: if you’d really like to see a particular feature implemented, consider taking out a support plan. Drop us an email on support@anvil.com to discuss further.

4 Likes
#6

Thanks, Shaun, glad it’s on the roadmap. Unfortunately, the hobby plan is a stretch for me, so sponsoring new work isn’t in my budget.

I’m surprised more people aren’t clamoring for fully crawlable Anvil sites that support SEO, though. For all the app ideas I have, that’d be a big plus.

2 Likes
#7

I want it for this app I’m currently building :slight_smile:

#8

Is there any option to do something like this yet? I want to allow certain pages and things to have a actual URL I can reference and link to but I so far cannot find a easy way to do this since its treating the whole site like a singe page app.

For now I’ve just been using the url has to get around it.

Thanks

#9

Dear @jshaffstall, @shaun, Anvil developers & community. Is there any news about this feature?

In my current project we need to use standard routing or at least be able to redirect standard URLs to whatever Anvil supports but only if SEO will not suffer from this. If the feature is not yet implemented, is there any plan? Are there any known workarounds? Thx

Meanwhile I have found few other forum questions similar to this. Unfortunately, no definitive answers there either:

I am aware of the possibility to make Hashbang (#!) URLs with GitHub - s-cork/HashRouting: HashRouting - a dependancy for anvil.works that allows navigation in apps but there is no clear answer as to how to manage meta data for such pages and whether SEO is not suffering.

I am also aware of the Dynamic Menu Construction from GitHub - anvilistas/anvil-extras but from the demo it only looks like what HashRouting provides wrapped in a menu. I did not get how the “classic” type of routing was supposed to work.

In our app we need millions of SEO indexed pages, think about an app like stackoverflow (Do not worry, we are not building new Stack, just the usecase is similar :slight_smile: ) and each of the pages needs its own url, needs to be indexed and needs to have its own metadata.

I think this topic deserves an entry in the official documentation. And if it is not solved, the documentation should have some “Limitations” section where new users can straight from the beginning see which standard “web features” are not possible to achieve in Anvil.

UPDATE: I have also found this Quora answer which strongly discourages people to use hash routing. Despite the fact the Google Ajax Crawling Scheme is long deprecated, the other arguments still seem to make sense.

1 Like
#11

It’s not currently possible to use non-hash routing to individual forms. As the previous posts says, it’s on the roadmap. But it’s been on the roadmap for a few years now, so it’s hard to say when or if it’ll be supported.

Individual metadata for forms can be done with custom HTML pages. Obviously some work would need done to inject that info from data tables into the HTML.

You could provide a sitemap through an HTTP endpoint.

The lack of non-hash URLs is the biggest limitation of Anvil for creating the sort of web app you want to create, where search engines index content using plain URLs.

1 Like
#12

Thank you for your reply.

Do you have a bit more info or a link to the documentation which would describe how to deal with the custom HTML pages? Is this some functionality in Anvil which allows for injecting the data from tables in the HTML? If it is some work, that is not a problem, Anvil saves a lot of work elsewhere. The main aim is such that it works :slight_smile: If it is not part of Anvil, how exactly did you envision it? I was thinking of using a separate Flask app for routing and building such custom HTML pages, but connecting it with Anvil gave me a headache :slight_smile:

Thanks.

#13

I haven’t done anything with metadata, so am just reporting what might be possible. You can find information on custom HTML forms in the Anvil docs. Since you can put any HTML you want into those forms, metadata should certainly be possible. How it gets parsed by search engines is something you’d need to experiment with.

#14

I have just tried it. In my editor I added a new Form based on Custom HTML. In the properties menu on the right side I have clicked Edit next to the HTML which opened an HTML editor. There I added:

<head>
  <meta name="og:title" content="Does this custom title work?">
</head>
Foo Bar

After running the app I see Foo Bar on my page and after inspecting the rendered html code, my custom <head> ... </head> was inserted somewhere into the <div class="content"> ... </div> which actually makes sense from the Anvil perspective.

So this seems not to be a way of actually adjusting the meta data of a custom HTML page. Even if it was possible, I do not think filling it with data from the database would be an easy thing.

Was this the idea you had @jshaffstall or did you envision it differently? Thanks

Later I tried changing the metadata with javascript. So I have added this code exactly where I was previously trying to add the <head> tag.

<script>
  document.title = "This is the new page title.";
  document.getElementsByTagName('meta')["og:title"].content = "This is the new og title";
  $('head').append('<meta name="twitter:description" content="This is a Twitter description."/>');
</script>

This actually worked and changed/added the metadata. Cool. But in this forum question Javascript not working in Custom HTML Form @meredydd specifically says javascript should go into Native Libraries and not into the custom HTML code because it can cause troubles. Also I have no clue how to actually fill the js with data from the db in this case.

I also tried to parse the page with Facebook Debugger just to see whether they are able to parse the correct updated metadata, but I got this error from them:

“We can’t review this website because the content doesn’t meet our Community Standards. If you think this is a mistake, please let us know.”

So I did let them know. But currently I am unable to check whether it works. Also Google’s URL Inspector works only on domains which I have added in my Search Console as a property which is weird to do on a private development link from Anvil.

I also tried to parse the page with Twitter URL Validator, unfortunately, that tool seems not to see the updated meta.

#15

That would have been my first try, too.

You can access Javascript directly from Python now, so there might be better ways of appending your metadata to the head element. See here: Anvil Docs | Accessing Javascript

I’d think you could use those techniques in the form’s init to see if that creates metadata in the right spot.

#16

Thank you, I will try it, but I doubt it will make a difference for Twitter for example. Basically every crawler which does not run javascript will get just the default app meta.