Page View Source is not Readable

vue-cli
webpack
vue-core

#1

Hi all,
I am using Vue js with laravel. The website is almost completed. The structure made is tree based components. Sending data from top to bottom. The website is running smooth with no issues. The only issue i have, with the SEO team. They are saying that the Page View Source is not readable.
And as i am using components. The html inside the component is not displaying in View Source. As a result They can not see Seo stuff in the page View Source.
Any Help will be appreciated.
Thanks
With kind Regards
Amjad Khan


#2

By ‘Page View Source’ do you mean e.g. in Chrome 'View Page Source (Ctrl + U)?

I don’t think you can see result HTML (generated by modern JS frameworks like Vue, React) in page source.

Why do your Search Engine Optimization (SEO) team need page source?

I would rather check out Chrome Dev Tools --> Audit -> SEO results and optimize the site from that info.


#3

@andris.vilde yes, they want an organized html of the page when they type (Ctrl + U) in chrome or any other browser. I already told them that its impossible in modern js frameworks. But they want to see H1, H2, H3,a tags etc, Because they are saying we would not rank. If these things were not found in the View Source of the source. Is it Correct.
My website Link is Http://elanat.com.
Can You audit please for few seconds. It would be great. I will really appreciate your help.
Thanks once again


#4

Quick test shows that your SEO is fine.

Let them read this:
https://www.elephate.com/blog/javascript-seo-experiment/


#5

Thanks @andris.vilde,
But does google crawler see the h1, h2 …etc tags for ranking ?


#6

Never analyzed that. I think you should google something like that :slight_smile:


#7

thanks @andris.vilde.
Almost searching from two days


#8

thanks @andris.vilde.
Almost searching from last two days


#9

Take a look at Twitter page source:
view-source:https://mobile.twitter.com/home (copy in URL bar)

Does this mean they also have SEO problems :wink: ?


#10

:smile: :wink: opened my eyes on another website also.
But if i tell them this they will say “twitter has almost a good domain authority.”. Seriously i am tired from SEO.


#11

@LinusBorg any suggestions ?


#12

According to Google, in theory the google bots read pages just like a browser. Meaning any JavaScript generated content that shows up in the browser is readable by the bots. That also means that anything hidden by JavaScript won’t be readable.

This leaves you two options.

  1. If the site is static with the dynamically generated content not being crucial to anything SEO related. You can use a preprocessor like the Prerender SPA Plugin to build your pages with all the JavaScript generated content and pull the dynamic content in via an API.
  2. You’ll have to setup server side rendering if the content needs rendered on the fly. Server Side Rendering

Other than that you’ll just have to hope the google bots properly index the site.

Another thing you could do is to only use Vue for what you need it for. Hard code any content wherever you can. That would be the only real way you can guarantee the bots will index the content without the above solutions.

The best way to test it is to launch the site and see what gets index then adjust the site’s content from there. SEO isn’t a one-shot thing anyway, it’s something that should be refined over time.


#13

Just use Nuxt.js for SSR. It,'s on VueJS. You just need to read a docs and learn few changes, but its not so hard. You can simply use your vue components and most of plugins on there as well.


#14

Your SEO team really needs to update their views ! Search engines bots support javascript for many years, even before the JS apps era. How could Google heavily finance and promote Angular (that works just like Vue on this matter) if it wasn’t SEO compliant ? :man_facepalming:


#15

My thoughts exactly! Just because the content doesn’t exist when you view source through the browser doesn’t mean search engines can’t see it. That said, not every crawler is the same. Google has this sorted out pretty well, but try Facebook debugger; it sees nothing.

As other have said, you should be fine for the most part, but you can use a SSR or pre-rendering to ensure you get the most coverage. There are services out there such as https://prerender.io/ if you don’t want to go through setting it up yourself.