Edit: There is a workaround to fix the problem described in this post which is discussed in more detail throughout the thread.
When you export from Webflow, files are created with .html extensions. This is unavoidable. It therefore means that any links within your menus, pages, etc., also include .html extension.
If you then wish to use a .htaccess file to strip the .html file extension from the url, beware that it may break the css for things like active elements.
For example, if you use the following code in your .htaccess file, you will have two URLs; /example.html and /example:
#example.com/page will display the contents of example.com/page.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.+)$ $1.html [L,QSA]
For SEO reasons, you do not want to have two versions of the same page, so you need to redirect /example.html to /example. You can do this using the following code in your .htaccess file:
#301 from example.com/page.html to example.com/page
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /.*\.html\ HTTP/
RewriteRule ^(.*)\.html$ /$1 [R=301,L]
The only problem that this leaves is that when the html code is looking for which page is active (for css), it’s looking for the original /example.html page. Because /example is now loading instead, the styling for active elements is broken.
The only solutions as far as I can tell are:
Just keep .html extensions on the end of pages after an export
Don’t use the ::active element
Edit your html files after export to remove the .html extensions
Search engines don’t know which version(s) to include/exclude from their indices
Search engines don’t know whether to direct the link metrics (trust, authority, anchor text, link juice, etc.) to one page, or keep it separated between multiple versions
Search engines don’t know which version(s) to rank for query results
When duplicate content is present, site owners suffer rankings and traffic losses, and search engines provide less relevant results.
Exactly. Vincent’s points above cover it nicely. It’s also bad for user experience, e.g if you have a comment form, comments will be spread across the duplicates rather than consolidated on one page.
Essentially if you’re exporting your webflow site, it’s not worth trying to strip the .html extension. You should however redirect non www to www (or vice versa) and redirect /index.html to the homepage, otherwise duplicate content problems occur. I’m not sure if webflow hosted sites automatically redirect index.html to the homepage, but it is best practice to for SEO.
There’s a post here from @bartekkustra with some good advice for .htaccess optimisations
Hi guys, I was having this problem early on with my webflow projects to. The best way, I have found, to fix this problem is to make custom hyper links in Webflow, using the external website link option (i can’t remember what it is actually called).
This only works for exported sites and requries you to plan out your site structure before you create your navigation (which is a good thing).
Note : your navigation will not work inside of Webflow, it will only work when you put the site onto your server.
To start decide how your site will be structured; sub-directories and files.
For this example you would select your home button in you navigation and select the external url option then simply type your url in this case example.com. for your article navigation select the external url option and write “/articles/” in the url field do not include example.com.
now say you want to link to an article. Assuming you are storing your article html files inside the articles sub-directory. select your navigation element or any text you are making into a link. Select the external url option and write “/articles/article-title”.
The “/articles/” link created above targets the article sub-directory on your server and will show the index.html file inside the folder. When you export your code simply take the articles.html file that is produced place it into your articles sub-directory folder an rename it to index.html. Do not leave off the / on the end on the link. The / tells the browser it is looking for a directory and its associated index.html file.
the “/articles/article-title” link is targeting and html file inside the articles sub-directory with that name. Do not put a / on the end of this link because it is a file and not a directory.
When you say the ::current element you are talking about the CSS that makes a Navigation element look different when you are on the page that it links too?
If that is the case I haven’t experiences the CSS breaking when creating links like this. I am currently working on a large site for a client where I am testing this process.
The pages I have tested maintain the current style that I set in the Webflow editor.
This is how I do it.
When designing the style for the Navigation create your set of elements and apply a class name to them. Then link one of the elements to an internal page on the site. Go to that page and style the current style that appears. Remove the internal link from that element and create your external path. Now every navigation element that has that base class should have the current class associated with it. So when you navigate to those pages on the server the current style should be activate, assuming the extension you created in Webflow are exact to where they are on the server.
@Davidn This doesn’t seem to work for me. If I change the external link to /example, webflow still exports it as /example.html. If I use an absolute url for the external link, it breaks the ::current attribute, even in the webflow editor. I think this may be because in the html it displays the link as http://www.exmple.com, whereas the url is actually resolving to www.example.com
Would you mind taking a quick look at this screencast and tell me if this is the technique that you are talking about?
Hey, I think I figured out what the problem is. If you have created a page called templates and then try and create a link “/templates” on export webflow understands the conection and puts the .html extention for you. This hasn’t been a problem for me because I rename most of my files to index.html after export and place them in directories “/directory-example/” style links. A work around that I can think of right now is to rename your pages with placeholder names like “wedding templates 1” or somthing like that. After you export change the file name back so the link path will work. This shouldn’t take to long on sites that have 10 pages or less. I will test out other options in the next couple of days to see if there is a better fix.
Just a side not. make sure that if your link path is all lowercase letters that all of your files and directories use lower case letter. Some servers are case sensitive and wont map properly if your cases are inconsistent.
