Improve store SEO with these tools.
By default, Ecwid URLs address store pages in a hash part of the URL (after the # sign). Example:
Search engines nowadays index such pages well. However, the general SEO recommendation is to keep URLs as simple as possible and address the site pages in the path part of the url, i.e. in the part before ’?’ or ’#’ signs.
Ecwid allows to change the store URLs accordingly, so that they look like this:
Follow the steps below to enable SEO-friendly URLs in an Ecwid store.
How to enable SEO-friendly URLs
Step 1. Configure your server: add URL rewrite rules
In the SEO friendly URL scheme, Ecwid places a page title right after the store page path in the URL, so that it looks like a subdirectory:
On the other hand, this is just a page on your server, not a directory. So if the server will try to find something inside the store page, it will fail and return 404 errors. To make your server properly process these URLs, you will need to configure URL rewrite rules.
The general rule is to map everything after slash on the store page to the store page itself, i.e.:
Specific configuration depends on your server:
- In Apache, you will need to enable mod_rewrite and specify rewrite urls in
.htaccessfile See https://httpd.apache.org/docs/2.4/rewrite/remapping.html
- In Nginx, you will need to add rewrite instruction to the config file. See https://www.nginx.com/blog/creating-nginx-rewrite-rules/
See examples codes
When server configuration can’t be changed
The enabling of the SEO-friendly URLs involves modification of the server settings and some website owners simply can’t access it sometimes. The query-based clean URLs is a workaround for this situation – all you need to enable them is to modify the Ecwid integration code (ignoring the Step 1 and 2 of SEO-friendly URLs)
Query-based clean URLs for Ecwid allow to change the store URLs so that they look like this:
https://www.example.com/shop?store-page=Apple-p123 thus imrpoving the SEO standings of the store pages, but without any changes to the server configuration.
How to enable query-based clean URLs
baseUrl is specified, Ecwid will use this as a base for the query-based URLs. It is an optional field that is helpful when you want to have a permanent query parameter when a customer browses the store. In other cases, we suggest not using it in your code.
Step 2. Adjust Ecwid integration code: enable the SEO URLs
Make sure to replace the “/store” dummy value in the last line with the actual store page path. Ecwid will use this as a base for the clean URLs. E.g. if you specify this URL as your base URL:
/subfolder/shop and your site is on
Ecwid will address store pages like this:
Please see the example codes on this page
Q: Will the regular hash-bang URLs continue working if I enable the new SEO URLs?
Yes, the old URLs will be supported, so if someone clicks the old link anywhere on the web, they will get to the corresponding store page. Upon opening the page, Ecwid will automatically replace the hash part so that the visitor will see the new URLs in the browser address bar.
Q: Can I get SEO-friendly URLs in Ecwid REST API?
Yes, when getting information about products and categories in an Ecwid store, you can choose the URL format you wish to receive in response. For more details, see the links below:
Q: How can I imrpove SEO if I can’t change the server settings?
SEO-friendly URLs require changes on the server to enable them. If you don’t have access to those settings, please see the Query-based clean URLs above.
Static snapshots of store pages
The stores load from Ecwid servers and dynamically change the page to display the storefront functionality. In some cases it takes much time.
Static store page endpoints allow you to generate an HTML snapshot of Ecwid store home page or specific category/product pages.
You can use that snapshot to display a lightweight starting page for the site visitors, while loading a full-functioning Ecwid store in background. This significantly speeds up store loading.
How to use static snapshots
- When a visitor opens your store page, request a prerendered version of the home page from storefront.ecwid.com endpoint.
- In response, you will get a link to the CSS file and the HTML code of the rendered store home page
- Display the prerendered version right away so that the visitor can see your store Home page and featured products
- Start loading Ecwid product browser in a hidden div on the same page, so you will have two blocks: static sotrefront and dynamic storefront
- Include JS file that will handle all clicks and replace the HTML snapshot with a regular storefront when needed
See it in action and see source code here: https://d35z3p2poghz10.cloudfront.net/apps/ecwid-static-pages/examples/static-page-demo.htm
Hints and best practices
Preload the store home page HTML snapshot in advance.
For example, when a visitor opens the site home page (before they navigate to the store page). This way, the store home page will apear instantly.
See Increase widget loading speed for more info.
Public applications and customizations may not work on the snapshot version of store pages. For heavily customized stores it make sense to disable prerendering and always display regular Ecwid storefront.
The examples above should be considered as alpha version. We will make the JS code cleaner in the future so it will be easier to handle snapshot/storefront switch in real usecases.