Easy way to do seo with vue

Overview

vue-seo

Full Documentation

Aim

The aim of this Vue plugin is to help you indexing your Vue powered website using all the greatness of Vue. We also want to give shorthands for common tasks that are usually verbose and reduce the readability of your code.

Showcase

With this plugin you are able to use this kind of syntax in any component (does not need to be in the head):

Complex title management

<seo-title
  v-if="condition"
  v-bind:value="myVariable"
></seo-title>

Describe your company

<seo-organization
  url="company.com"
  logo="http://awsome.image/my.png"
  name="Awsome company name"
></seo-organization>

Merge policies

  <seo-title value="My website"></seo-title>
  <seo-title v-if="notifications > 0" value="{{notifications}} notif."></seo-title>

with a merge policy for title VueSEO.policies.join(' - ') and notifications equal to 3. The title will be:

My website - 3 notif.

note: you can define the two seo-title components at different places wherever you want.

If you want to know more about all the other features just browser the documentation.

Sponsor

The development of this plugin is made possible by Papayapods

Comments
  • Facebook graph api

    Facebook graph api

    facebook graph api cannot load meta

    i'm used mehode to despatch all info about each current page to parent that content all meta compontent of seo

    but if i test that in facebook debug tools i have this issue

    screen shot 2016-07-13 at 18 41 17

    meta tags in my home page is loaded but not detected by facebook screen shot 2016-07-13 at 18 42 00

    opened by darbaoui 5
  • Typekit fonts loading sporadically

    Typekit fonts loading sporadically

    Hey,

    First off, thanks for this - it really saved me a lot of work today! The only thing I'm noticing so far is that when using these components that Typekit fonts seem to load sporadically. I haven't had too much of a chance to check it out yet, just something I noticed. I'll do a bit of digging to see if I can't figure it out, but I figured I'd put this on your radar.

    opened by seanwash 4
  • Add name key to each component for easier viual groking in vue devtools

    Add name key to each component for easier viual groking in vue devtools

    Hey @GuillaumeLeclerc,

    I went through the source and named each component. Previously when using the devtools each of the components are listed as an anonymous component which can make it a little hard to navigate and find what I'm looking for. This change would name each of them in the devtools. Across the board I used a camel case naming system, eg google/langDisplayer is named GoogleLangDisplayer or openGraph/imageDisplayer is named OGImageDisplayer.

    Here's an example of how it would look after this update: http://ds.seanwash.com/XU1TlTZ6u8

    opened by seanwash 1
  • RawGit is shutting down, replace it with jsDelivr

    RawGit is shutting down, replace it with jsDelivr

    RawGit is shutting down. This PR replaces all RawGit links with the recommended alternative - jsDelivr. jsDelivr is a free and fast open source CDN hosting all files from GitHub and npm.

    This is an automated PR which is meant to make the migration process as easy as possible. If something doesn't look right or you have any questions, feel free to ping MartinKolarik or jimaek in this PR. You may also use our online migration tool to convert other RawGit links to jsDelivr links.

    opened by jsdelivrbot 0
  • Fixed console error

    Fixed console error

    fixed the following console error: [Vue warn]: : Using v-if and v-for on the same element is not recommended - consider filtering the source Array instead.

    opened by jasonkellydk 0
  • Is vue-seo Vue 2.0 ready?

    Is vue-seo Vue 2.0 ready?

    I am trying add the vue-seo with the most basic set-up, but I get this error:

    [Vue warn]: Cannot use <slot> as component root element because it may contain multiple nodes:
    <slot></slot> <component v-for="possib in cartesian" :key=possib.key :policy=policyForKey(possib.key) :is=possib.comp></component>
    

    This is my set up in main.js:

    import Vue from 'vue'
    import Mock from './Mock'
    // import App from './App'
    // import router from './router'
    import VueSEO from 'vue-seo'
    
    /* eslint-disable no-new */
    Vue.use(VueSEO)
    
    // Turn true before making builds
    Vue.config.silent = true
    
    new Vue({
    	el: '#app',
    	template: '<Mock/>',
    	components: {Mock}
    })
    

    Apart from getting the above error, the rendered html has no <head> tag at all. Everything works fine without vue-seo. I Will be grateful for a hint here.

    opened by jfcieslak 3
  • WIP: Add twitter card markup

    WIP: Add twitter card markup

    Hey hey,

    This PR adds support for twitter cards, which can be found here https://dev.twitter.com/cards/types/summary-large-image

    Let me know if there's anything I need to do or tighten up!

    opened by seanwash 0
  • Contribution Docs

    Contribution Docs

    Hey again!

    I'd love to help out with a couple more pull requests for #7 and #8 but I'm not exactly sure where to start. When I start the webpack dev server I get a styled directory listing of the files in the project. How have you been going about working/testing the plugin, or do you have a few instructions that would help me get started?

    opened by seanwash 4
Owner
Guillaume Leclerc
Guillaume Leclerc
An easy way to generate readme/GitHub profile readme written in Vue.js/Quasar.

An easy way to generate readme/GitHub profile readme written in Vue.js/Quasar.

Mayur Patel 25 Nov 16, 2022
A Vue.js component for creating polls, voting and showing results. It’s easy to implement and easy to customize.

vue-easy-polls A Vue.js component for creating polls, voting and showing results. It’s easy to implement and easy to customize. Demo See live demo her

UPDIVISION 13 Nov 24, 2022
Vue3-easy-swiper - An easy swiper built with vue 3

vue3-easy-swiper 基于 Vue3.0 + ts 开发 轻量、简易,支持无缝轮播 Install npm i vue3-easy-swiper -

油条包麻子 3 Jan 24, 2022
Google-onetap-signin-client-vue - Vue 3 Demo of using the Google One-Tap Signin in a modular way (Client Code)

vue-google-onetap-signin Project setup npm install Compiles and hot-reloads for

Zensynthium 5 Oct 31, 2022
A platform collecting facts --data and evidence-- and presenting them AS IT IS in the useful way. No prejudice!

FactFinder.app @factfinderbot " Only Facts We Trust, No Prejudice! " Live (Release): https://factfinder.app Preview (Dev): https://fact-finder.vercel.

Kao.Geek 10 Aug 30, 2021
Vue Modern Resume is basically a simple (yet easy to setup) resume template based on Vue.js framework and Vuetify UI toolkit.

Vue Modern Resume is basically a simple (yet easy to setup) resume template based on Vue.js framework and Vuetify UI toolkit.

Gabrielle Louis Valencia 1 Sep 5, 2022
Vue-easy-print: This is a vue.js-based printing component

这是一个基于vue 2.0的打印组件 中文文档 English 核心: 使用vue组件的slot插槽进行模板加载。

pcloth 82 Nov 18, 2022
Easy to use Vue chat.

basic-vue-chat Implementation of Vue-based chat. basic-vue-chat Installation npm yarn using repository Dependencies Usage Pushing messages Handling me

Jedrzej Pawel Maczan 69 Nov 24, 2022
🕵️‍♀️🕵️‍♂️ One easy-to-use component for Vue.js to build beautiful responsive timelines.

Documentation You can browse the documentation for Vue Timeline on the website. Installation npm install @growthbunker/vuetimeline # Or if you prefer

Julien Le Coupanec 328 Nov 25, 2022
A Vue 2.x component of easy-to-config page visibility api

vue-page-visibility-awesome A Vue 2.x component of easy-to-config page visibility api Introduction Demo Install $ npm i vue-page-visibility-awesome --

Stefano 11 Jul 30, 2020
Easy @mention, #hashtag and URL highlight for Vue 2.x

vue-highlights Easy @mention, #hashtag and URL highlight for Vue 2.x Installation You can install via npm or yarn: npm install --save vue-highlights y

Pedro G. Galaviz 16 Nov 17, 2022
Vue.js based resume builder for easy resume building

Build your resume with ease - No more struggling with Microsoft Word resumes! Try it out Frontend App build with Vue.js and Bootstrap Build your own r

Katharina Spiecker 3 Nov 23, 2022
An easy-to-use web installer for Android-based operating systems.

Android web installer This is an easy-to-use web installer for Android-based operating systems that runs entirely in the browser. It uses WebUSB, whic

Danny Lin 183 Nov 19, 2022
A minimal start page that is easily customizable and easy to use.

Everything is saved via local storage so you can just visit the website and edit the prefrences of your browser to redirect to that page

null 9 Oct 19, 2022
👔 💼 Build fast 🚀 and easy multiple beautiful resumes and create your best CV ever!

best-resume-ever ?? ?? Build fast ?? and easy multiple beautiful resumes and create your best CV ever! Made with Vue and LESS. Cool Creative Green Pur

Sara Steiert 15.8k Nov 23, 2022
Intuitive and easy-to-use storage box.

Storage Box Intuitive and easy-to-use storage box. Features Intuitive: No need to learn new interfaces. Easy-to-use: Streamlined API reduces user burd

Odroe 27 Nov 26, 2022
Gradientos makes it easy to choose gradients.

Gradientos is a web app which can help you choose gradients by simply showing your selected gradients on a live demo website with some common UI elements. You can quickly see how the gradient actually looks on a website. Play around and create your own gradient or select one from our collection.

null 35 Nov 20, 2022
A starting learning tutorial on Vue 3.0 + TypeScript, suitable for complete Vue novices and Vue 2.0 veterans, incorporating some of my own practical experience on the basis of official documents.

learning-vue3 This is a starting learning tutorial on Vue 3.0 + TypeScript, suitable for complete Vue novices and Vue 2.0 veterans, incorporating some

chengpeiquan 453 Nov 25, 2022
vue-easteregg - Easey add an easteregg to your vue app (default with konami code)

vue-easteregg ADD an easter egg to your vue app ;) <template> <div id="app"> {{ title }} <easteregg @easter="test" :eggs="eggs" duration="50

David Grill 13 Sep 17, 2021