SEO with vuetify
هل عند استخدام مكتبة مثل ال vuetify js من اجل التصميم فقط يؤثر علي ال SEO مع العلم انا في داخل التصميم سيوجد meta , titles , ime alt , liks , h1 ولكن لايوجد d...
-
- mohammed shopan
- 2019-03-15 01:52:04
- 1 التعليقات
هل عند استخدام مكتبة مثل ال vuetify js من اجل التصميم فقط يؤثر علي ال SEO
مع العلم انا في داخل التصميم سيوجد meta , titles , ime alt , liks , h1
ولكن لايوجد div element تولد بعد ترجمة المحتوي من قبل المتصفح
<!DOCTYPE html>
<html lang="en">
<head>
<title> First vuetify Project in 2019 </title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="description" content=" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore nesciunt debitis, quibusdam nisi officia animi unde saepe facere vel delectus nulla atque optio ducimus deserunt est explicabo dicta similique reiciendis?">
<meta name="keywords" content="vue vuetify vue.js commponent" >
</head>
<body>
<div id="app">
<v-app>
<v-content >
<v-system-bar status color="red" lights-out>
<v-spacer></v-spacer>
<v-icon>network_wifi</v-icon>
<v-icon>signal_cellular_null</v-icon>
<v-icon>battery_full</v-icon>
<span>12:30</span>
</v-system-bar>
<v-toolbar dark color="primary" >
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title class="white--text">Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
</v-toolbar-items>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
<v-btn icon>
<v-icon>apps</v-icon>
</v-btn>
<v-btn icon>
<v-icon>refresh</v-icon>
</v-btn>
<v-btn icon>
<v-icon>more_vert</v-icon>
</v-btn>
</v-toolbar>
<v-container >
<h1> Hello world </h1>
Hello world <br>
<div class="text-xs-center">
<v-bottom-sheet v-model="sheet">
<template v-slot:activator>
<v-btn
color="purple"
dark
>
Click me
</v-btn>
</template>
<v-list>
<v-subheader>Open in</v-subheader>
<v-list-tile
v-for="tile in tiles"
:key="tile.title"
@click="sheet = false"
>
<v-list-tile-avatar>
<v-avatar size="32px" tile>
<img
:src="`https://cdn.vuetifyjs.com/images/bottom-sheets/${tile.img}`"
:alt="tile.title"
>
</v-avatar>
</v-list-tile-avatar>
<v-list-tile-title>{{ tile.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-bottom-sheet>
</div>
<v-btn icon large>
<v-icon large color="green darken-2" @click="sheet = true">business</v-icon>
</v-btn>
<div class="text-xs-center">
<v-dialog
v-model="dialog"
width="500"
>
<template v-slot:activator="{ on }">
<v-btn
color="red lighten-2"
dark
v-on="on"
>
Click Me
</v-btn>
</template>
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
Privacy Policy
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
flat
@click="dialog = false"
>
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
data :{
start: 'hello mohammed',
dialog: false,
sheet: false,
tiles: [
{ img: 'keep.png', title: 'Keep' },
{ img: 'inbox.png', title: 'Inbox' },
{ img: 'hangouts.png', title: 'Hangouts' },
{ img: 'messenger.png', title: 'Messenger' },
{ img: 'google.png', title: 'Google+' }
]
}
})
</script>
</body>
</html>
الكلام ده حقيقي بس ليه كذا حل
في خدمات بتوفر دعم السيو للابكلشن اللي من النوع ده
بص علي الرابط التالي مفيد جدا
https://medium.com/binarcode/make-your-vue-js-application-seo-friendly-dea3d004a58c