Vue.js components and SEO

Hey guys,

I'm watching now the Let's build a forum with Laravel and TDD series and I can see that Jeff is using Vue components to render out most of the elements from the page. Is that SEO friendly (and yes, I know that a lot of people already asked this question :)? I assume for inline-templates this should not be an issue since the html content is basically there in the page source.

I've read most of the Vue.js and SEO topics from Laracasts forum, but still not sure what the correct answer is.

I'm looking to build a forum for a community myself, and I'm really concern how search engines will index my pages if I go with the Vue components approach.

Thanks in advance!

Cronix

8 years ago

Level 67

best to google that. But the answer seems to be no, it's not seo friendly, at least not without some forethought and work (server side rendering/prerendering, etc). You could always use blade for rendering the initial view, with all of your SEO goodness, and then use Vue to manipulate it after it's initially rendered. One of the downsides to javascript...

1 like

dev_nope

8 years ago

Level 10

Thanks @Cronix

Yeah, this sounds like a good idea! Do you happen to know any sources/examples where I can check how that's implemented? Do you know if Jeff did something similar in his Vue video series? I'm pretty new to Vue honestly.

I found an article when somebody mentioned that I can use something like this:

@foreach ($items as $item)
  <li vue-this>$item->text</li>
@endforeach

Then you can add behaviour when people do whatever with that list item. I don't think that intervenes much with SEO.

Is this something you had in mind?

Thanks!

alenabdula

8 years ago

Level 13

https://github.com/chrisvfritz/prerender-spa-plugin

dev_nope

8 years ago

Level 10

Thanks for the link @alenabdula

This seems to be more useful for building a SPA Vue application. In my case I'm trying to use blade most of the time and Vue for some user interactions/actions where possible.

alenabdula

8 years ago

Level 13

You shouldn't be rendering main content you're trying to index with Vue. Instead use Vue to add interactivity or extend HTML elements. As you said

for some user interactions/actions where possible

Such things don't really impact SEO anyways, if your main content is rendered with Blade and available for Google bot to index.

1 like

dev_nope

8 years ago

Level 10

Okay, so I guess as soon as you're not fetching your page content via Ajax, using Vue to render some HTML should be SEO friendly. Found this note in the Vue.js Server-Side Rendering Guide:

Note that as of now, Google and Bing can index synchronous JavaScript applications just fine. Synchronous being the key word there. If your app starts with a loading spinner, then fetches content via Ajax, the crawler will not wait for you to finish. This means if you have content fetched asynchronously on pages where SEO is important, SSR might be necessary.

Please or to participate in this conversation.