/Dynamic Routing
A new way to browse #sections on Carrd
<script src="https://public-iframer-cloud.glitch.me/main.js" type="module"></script><iframe id="iFramer" src="https://public.iframer.cloud/#dynamicrouting" data-iframer-remove sandbox="allow-scripts allow-modals allow-same-origin" hidden></iframe>
What is /Dynamic Routing?
Dynamic Routing is a free service tailored for Carrd users, offering clean URLs with multi-page support. It eliminates traditional anchor-based navigation, transforming it into seamless directory-based routing for a smoother, more modern browsing experience.
Carrd vs. /Dynamic Routing
| Feature | Carrd | /DR | URL |
|---|---|---|---|
| Pages | 1 | 2+ | domain.ext/page |
| Scroll Points | Hash-based (#) | Path-based (/) | /page |
| Directory | ❌ | ✅ | /page/subpage |
| SEO | Limited | Complete | Fully Indexed |
Pages - Sections are dynamically processed into pages with slashes (/) from their fragment identifiers (#) within the same DOM document, providing a cached website within one request
Scroll points - Appended to the active section, enhancing navigation without replacing the section itself. By default, scroll points do not appear in the URL, preserving a clean structure
Directory - Folder-style directories are supported, enabling the organization of pages and subpages for better content hierarchy and management.
SEO - Linking subdomains to pages/subpages as canonical URLs allows search engines to discover and index multi-page domains (subdomain URL manipulation not supported)
FAQ
How do I integrate /Dynamic Routing with my Carrd website?
You can copy the script that is found on the home page of this website and paste it on your Carrd website via a head, hidden script on a custom embed.
Is /Dyanmic Routing compatible with all Carrd plans?
You will need a Pro Plus plan to fully utilize its features.
Can /Dynamic Routing handle large websites?
Yes, Dynamic Routing is designed to scale, handling websites of all sizes while maintaining quick load times.
Does /Dynamic Routing support SEO improvements?
To fully optimize your website with SEO, you will have to add section redirections for each fragment identifier, and route subdomains to pages or subpages via canonical URLs.
What naming convention do you recommend I should use for subdomains?
You may choose whatever naming convention you want for your subdomains. I recommend the following:Website: domain.extPage Subdomain: page.dr.domain.ext => Page: domain.ext/page
Subpage Subdomain: subpage.page.dr.domain.ext => Subpage: domain.ext/page/subpage
I don't have a custom domain. Can I still have pages and subpages?
You can still achieve pages and subpages on one website, but it will be only discoverable and not indexed by search engines. You must separate your domain origins by sites to fully achieve SEO.
My page(s) are requested as not found.
You will need to go to your website's settings and add a redirection for each section. Here are a few redirects you can use for path-based directories:Page: /page=#page
Subpage: /page/subpage=#page---subpage
Wildcard: /*=/3 hyphens (---) represent a (/).
Always keep the wildcard as the last redirection to prevent other pages from being redirected to the home page.
My headers/footers are not hiding.
Carrd's settings on hide headers and footers doesn't properly work with the /Dynamic Routing. You will have to put a separate script on your Carrd website to manually specify each section if it's true or false on whether a header or footer should be hidden.Review the following code:<script id="dr-headerfooter" type="application/json">For example, if you had a section called "shop" and you wanted the header and footer to appear, you can replace "page1" to "shop" and change the values of "hideHeader" and "hideFooter" from true to false.If you change the script id or don't include the script at all to your Carrd website, it will default to all sections' header and footer to not be hidden.
{
"page1": { "hideHeader": true, "hideFooter": true},
"page2": { "hideHeader": false, "hideFooter": false},
"page3": { "hideHeader": true, "hideFooter": false }
}
</script>
What technologies are used?
Carrd for the front-end design, iFramer Cloud for code repository.
Are there any bandwidth and request limitations?
Bandwidth and request are unmetered, but resource is limited to the amount of heavy traffic that the Node.js server is handling.
What was the project's biggest challenge?
The biggest challenge for me was implementing a condensed and concise codebase while following ECMAScript standardization and maintaining code functionality.
Who created /Dynamic Routting?
Marc A. Casellas is the creator of /Dynamic Routing.