unjs / unhead

Unhead is the any-framework document head manager built for performance and delightful developer experience.
https://unhead.unjs.io
MIT License
643 stars 41 forks source link

Request to add <meta name="keywords"> methodologies #304

Closed EITSxiaozhai closed 10 months ago

EITSxiaozhai commented 10 months ago

Describe the feature

First of all many thanks to the contributors to this project, I checked from the documentation that I could set <meta name="Description" content=" and it worked fine. I was recently pushing my blog to Google search. I need to make specific SEO optimizations. So I would like to ask if it is possible to add ,if any. Can you send me the link to the document. Thank you very much and salute!

Additional information

"dependencies": {
    "@unhead/vue": "^1.8.9",
    "@vitejs/plugin-vue": "^4.3.4",
    "axios": "^1.5.0",
    "core-js": "^3.8.3",
    "element-plus": "^2.3.14",
    "fingerprintjs2": "^2.1.4",
    "grecaptcha": "^1.0.3",
    "jsonwebtoken": "^9.0.2",
    "markdown-it": "^13.0.1",
    "os": "^0.1.2",
    "typeit": "^8.7.1",
    "undraw-ui": "^1.0.2",
    "unplugin-auto-import": "^0.16.6",
    "unplugin-vue-components": "^0.25.2",
    "vite": "^4.4.9",
    "vue": "^3.2.25",
    "vue-jwt-decode": "^0.1.0",
    "vue-meta": "^3.0.0-alpha.8",
    "vue-recaptcha": "^3.0.0-alpha.2",
    "vue-router": "^4.0.13",
    "vue3-recaptcha2": "^1.8.0",
    "vuex": "^4.0.0",
    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "typescript": "~4.5.5"
  }
}
<script setup>
import { ref } from 'vue';
import { useHead } from '@unhead/vue';

const myPage = ref({ description: 'Exploit的博客。分享Linux服务器搭建运维,学习Python技术,vue3,利用Fastapi,Django,mysql的技术搭建个人网站。记录一下自己的学习成果'})
const title = ref('title')
const metakeywords = ref( {keywords: 'Linux,Python,Vue,运维,云服务,Seo,计算机教学,计算机基础'})

useHead({
  meta: [{ name: 'description', content: () => myPage.value.description },
           { name: 'keywords',content: () => metakeywords.value.keywords}],
})
</script>

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: rgb(233, 233, 235);
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  height: 100%; /* 使#app占满全屏高度 */
}
</style>

Here's my vue code. It's keywords don't quite work. Is there a problem with my code?

harlan-zw commented 10 months ago

Are you able to provide a reproduction? You can use this as a starter https://stackblitz.com/edit/vitejs-vite-uijgqa?file=package.json

Also FWIW the keywords meta isn't useful for SEO, no search engines are known to use it.

EITSxiaozhai commented 10 months ago

Thank you so much for your help. I understand. Have a nice day.