Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SEO friendly URLs #78

Open
MartinMuzatko opened this issue Apr 16, 2018 · 16 comments
Open

SEO friendly URLs #78

MartinMuzatko opened this issue Apr 16, 2018 · 16 comments
Labels
type: enhancement Request to enhance an existing feature type: question or discussion Question or discussion

Comments

@MartinMuzatko
Copy link
Contributor

MartinMuzatko commented Apr 16, 2018

Right now, the only workaround is to create README.md files in folders, which are generated as index.html.

Since this is a static site generator to be deployed to almost all platforms (apache, node, nginx) this might be a bit more trickier to set up.

A start would be to have more fine-grained control about which file is used as an index.html (README.md is a bit github centric, which is fine for the start)

I don't know if the workaround should be entirely on the rendered output side. But maybe an alternative to providing a .htaccess file or node server with routes based on output, is to create folders for subpages and create subpage/index.html instead.

This is also related to the Blog support roadmap (#36)

@rafalolszewski94
Copy link

Wouldn't it be good idea to make reflecting names ?

For example:
index.md would output index.html ?

@ulivz
Copy link
Member

ulivz commented Apr 16, 2018

@MartinMuzatko

Don't know if it's what you want, assume you has following structure:

├── guide.md
├── help.md
└── README.md

The setting with .htaccess would be like this:

guide.md: '/guide/'
help.md: '/help/'

And if want to refer a anchor link e. g. #title from guide.md, At README.md, you can use /guide#title, That looks good.

@mdaffin
Copy link
Contributor

mdaffin commented Apr 16, 2018

Every static web server I have seen will serve index.html by default when you go to a directory with the URL. So generating slug/index.html should be enough for all major web servers to work with clean URLs (ie /slug/). Currently, you have to create slug/README.md which makes raw posts look a bit weird and makes managing them a little harder. It would be nicer if you could configure it so all slug.md files produced a slug/index.html instead of slug.html.

Note that with the current rules both README.md and index.md create index.html in a directory but if you have both then README.md takes precedence. Personally, I prefer to use index.md.

Note that not many web static servers support .htaccess files, notably Github pages and Gitlab pages and Netlify do not which I suspect will be a popular deployment platform for sites generated with vuepress. It is only Apache that supports .htaccess which makes it a terrible work around.

@yyx990803 yyx990803 added type: feature request Request to add a new feature type: enhancement Request to enhance an existing feature and removed type: feature request Request to add a new feature labels Apr 16, 2018
@mdaffin
Copy link
Contributor

mdaffin commented Apr 17, 2018

Small note: Although it looks like slug/index.md and slug/README.md both generate slug/index.html resolving links to /slug/ only looks for /slug/README.md and creates a warning if that does not exist:

File for relative link "/blog/archlinux-repo-in-a-git-repo/" does not exist.
(Resolved file: /home/mdaffin/projects/personal/disconnected.systems/site/blog/archlinux-repo-in-a-git-repo/README.md)

 @ ./node_modules/vuepress/lib/app/.temp/routes.js 36:8-113
 @ ./node_modules/vuepress/lib/app/app.js
 @ ./node_modules/vuepress/lib/app/clientEntry.js
 @ multi ./node_modules/vuepress/lib/app/clientEntry.js

@MartinMuzatko
Copy link
Contributor Author

MartinMuzatko commented Apr 18, 2018

Will go for a folder + index.md for each and every page I write. This way, I can also encapsulate the required assets on that page.

A major concern left, is to make netlify redirect url/articles/building-a-blog-with-vuepress to url/articles/building-a-blog-with-vuepress/ in order for index.html to work.

Vuepress already does that, as it looks like on their website. https://vuepress.vuejs.org/guide redirects to https://vuepress.vuejs.org/guide/

May I ask how that was realized @yyx990803 ? I wonder if that is something vuepress has to be concerned with or that netlify or other deployment platforms can take care of.
Netlify takes care about the proper redirect. Wow!

@MartinMuzatko
Copy link
Contributor Author

MartinMuzatko commented Apr 18, 2018

By the way: relative links in markdown are checked by vuepress.
I get a warning for this: [Articles](/articles/) but not for [Articles](/articles/index.md). In order to use SEO friendly URLs, I should be able to either link to /articles/ or have it turned into /articles/ when I reference /articles/index.md

@yyx990803
Copy link
Member

Relative check for index.md has been fixed in 52d6672

@TomPichaud
Copy link

TomPichaud commented Apr 24, 2018

It would also help to support NetlifyCMS if VuePress could generate a clean URL for any MD file. Instead of needing to generate a folder + an index.md

@ulivz
Copy link
Member

ulivz commented May 14, 2018

We're closing this issue as stale as it's more than 20 days without activity, and without an associated Pull Request. Please feel free to continue discussion. We'll reopen this issue if anything actionable is posted.

@ulivz ulivz closed this as completed May 14, 2018
@andreasvirkus
Copy link

Would this be ok as the default behaviour @ulivz? Can't really think of a downside for this.
I'd like to take a crack at it if that's alright. Just to make sure, this'd be the expected outcome then, right?

index.md
about.md
contact.md
blog/
  post.md
  another.md

# post-build ↓
index.html
about/
  index.html
contact/
  index.html
blog/
  post/
    index.html
  another/
    index.html

@awulkan
Copy link

awulkan commented Jun 10, 2018

@andreasvirkus Looks good to me. It would be really nice to get some SEO friendly URLs, since Vuepress even lists SEO as a benefit over other Vue based generators.

@MartinMuzatko
Copy link
Contributor Author

MartinMuzatko commented Jun 11, 2018

@andreasvirkus How will you handle about/index.md and about/readme.md clashes? Is there an order of files?

@andreasvirkus
Copy link

Well the clash exists currently as well, correct (they both generate about/index.html)? So that's either a separate issue to fix or an intended behaviour and something that the user simply shouldn't do.

@awulkan
Copy link

awulkan commented Jun 19, 2018

@andreasvirkus Hey, just wondering if you've made any progress so far, or if you've even gotten started for that matter. :)

Just really eager to get rid of these ugly and bad html extensions on the URL.

@dcastil
Copy link
Contributor

dcastil commented Sep 28, 2018

Why not do it like Nuxt does it? https://nuxtjs.org/guide#static-generated-pre-rendering-

Then a file like docs/article.md would be rendered to docs/article/index.html.

@futagoza
Copy link

Is there any progress on this?

@kefranabg kefranabg reopened this Oct 2, 2019
@kefranabg kefranabg added the type: question or discussion Question or discussion label Oct 2, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: enhancement Request to enhance an existing feature type: question or discussion Question or discussion
Projects
None yet
Development

No branches or pull requests