Есть ли рекомендуемый способ иметь все предварительно загруженные для SEO цели, используя VueJS, без использования SSR?

Question

Как следует из названия, мне нужен надежный SEO, и поэтому мне нужно, чтобы весь загруженный на моем сайте HTML был загружен на начальной загрузке. Однако, поскольку бэкэнд написан на PHP, и потому что было бы больше работать над написанием компонентов Vue с учетом сервера, я не хочу использовать серверную визуализацию (SSR).

Это оставляет мне возможность отправлять HTML-код через провод, путь «старой школы». То, что я собираюсь сделать, это писать HTML-страницы каждой страницы, как обычно, но сделать один из элементов html root элементом Vue, чтобы «обновить» его. Таким образом, начальная загрузка загружает завершенный HTML-код, все данные (таблицы, списки и т. Д. Уже заполнены), но после загрузки всех скриптов javascript может взять на себя все, чтобы упростить работу и дать лучший интерфейс. Тем не менее, возникает несколько вопросов:

• Я ограничен одним компонентом, корень? Было бы неплохо иметь еще много субкомпонентов, каждый из которых имеет собственное состояние. Может быть, встроенные шаблоны можно каким-то образом использовать?
• Шаблоны Vue имеют собственную систему шаблонов, например, фигурные скобки для отображения переменных {{ myVar }}. Смогу ли я их использовать? Единственный способ, которым я могу думать, - создать шаблон Vue (который может быть загружен из внешнего скрипта), который идентичен той части HTML, которую он «берет на себя». Недостатком является то, что мне придется поддерживать этот компонент как в исходном HTML, так и в шаблоне vue.

Есть ли хорошие примеры того, что я пытаюсь выполнить здесь?

Редактировать: Я хочу уточнить, что я знаю, что могу размещать различные компоненты здесь и там на всей странице. Это все еще ставит вопрос о том, как сделать эти компоненты уже запущенными. Еще лучше было бы превратить всю страницу в Vue, как SPA.

Answer 1

Недавно я разработал приложение многостраничный с помощью Vue, вот как я пытался решить SEO (Может быть, это может помочь вам):

1. HTMLs из верхнего и нижнего колонтитула (и другие основные общие компоненты) упакованы в page.html (например: home.html, search.html).
2. Сценарий и стиль верхнего и нижнего колонтитула импортированы в page.js (например: home.js, search.js).

3. div.seo-zone Добавить в page.html «ы div#app, который включает в себя основные данные SEO (с помощью некоторых h1, h2, P, DIV и так далее), а также добавить

   .seo-зона { дисплей: нет; }

в вашем css. 4. Убедитесь, что элемент корневого компонента вашего приложения является «#app» (основным содержимым каждой страницы может быть приложение Vue).

5. Разработка приложения, как обычно.

После Вьют вынесенный div.seo-zone будет заменен компонентами Vue (хотя он не может быть виден)

Answer 2

мне нужна твердый SEO и, таким образом, мне нужно иметь все HTML загружено на моем сайте на начальной нагрузке.

Это не совсем так. Google (80% поискового трафика) легко разбирает SPA, поэтому SSR для SEO больше не требуется.

Но, чтобы ответить на ваш вопрос в целом, вы должны проверить номер Laracast's Vue.js. Они подробно рассказывают о том, как использовать PHP с Vue.js (включая шаблоны и переменные).

Я бы спросил, чего вы хотите достичь с помощью Javascript/Vue.js на своей странице. Если все уже сделано в PHP, Vue обеспечивает простое расширение UX или берет на себя большую часть тяжелой работы (навигация и т. Д.)? Если у вас нет реактивных данных и вы хотите, чтобы Vue просто был контроллером для визуализированных компонентов, тогда выбивайте себя, хотя он может приближаться к сценарию «overkill».

Answer 3

Вы изучили плагин Prerender SPA (https://github.com/chrisvfritz/prerender-spa-plugin)?

Предлагается в документации Вью в качестве жизнеспособной альтернативы на стороне сервера визуализации (https://vuejs.org/v2/guide/ssr.html#SSR-vs-Prerendering)