Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 61b2505

Browse files
committed
Added OpenGraph and Twitter Card meta tags - updated README.md & homepage
1 parent 29ef6db commit 61b2505

File tree

3 files changed

+40
-2
lines changed

3 files changed

+40
-2
lines changed

‎README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ This is a basic starter project for a prerendered [Vue.js](https://vuejs.org/) +
1212
- Pre-rendered dynamic pages using a sample `Item` datatype
1313
- Integrates with [HotJar](https://hotjar.com"), [Mailchimp](https://mailchimp.com"), and [Google Analytics](https://analytics.google.com/analytics/web/#/)
1414
- Includes [JSON-LD Structured Data](https://developers.google.com/search/docs/guides/intro-structured-data) for outstanding SEO
15+
- Pre-configured with [OpenGraph](http://ogp.me/) and [Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html) meta tags for beautiful [unfurls](https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254) when sharing on social media
1516
- Customizable UI using [Bootstrap](https://getbootstrap.com) & [SASS](https://sass-lang.com) variables
1617

1718
**NOTE:** this project can only be deployed via Netlify with [continuous deployment](https://www.netlify.com/docs/continuous-deployment/) enabled.
@@ -29,6 +30,8 @@ $ yarn run dev
2930
$ yarn run build
3031
```
3132

33+
Note that [Prettier]() will automatically clean up your code when you save. You can adjust this behavior in the `build` section at line `127` in `nuxt.config.js`.
34+
3235
### Pre-rendered Dynamic Pages
3336

3437
This project includes a series of pre-rendered pages using a generic `Item` datatype. The data for these pages is maintained in `assets/content/items.json` and they're generated with a custom `generate` field in `nuxt.config.js`:
@@ -63,6 +66,10 @@ These variables can be configured in a variety of ways - please consult the [Net
6366

6467
The [JSON-LD Structured Data](https://developers.google.com/search/docs/guides/intro-structured-data) can be updated by modifying the `jsonld()` function in the `layouts/default.vue` file. This feature shouldn't be used anywhere else - one `JSON-LD` snippet should describe the entire site.
6568

69+
### OpenGraph and Twitter Card Meta Tags
70+
71+
The `<meta>` tags for [OpenGraph](http://ogp.me/) and [Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html) are located in the `head` section of `nuxt.config.js`. **You should change these from their default values**. You can validate your changes using the [Twitter Card Validator](https://cards-dev.twitter.com/validator) and the [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/sharing).
72+
6673
### Bootstrap + SASS Configuration
6774

6875
You can modify the `assets/sass/main.sass` file to optionally include Bootstrap component styles as-needed. **PROTIP** - only include the Bootstrap components your app depends on - this will keep your CSS bundle nice and slim :)

‎nuxt.config.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,21 @@ export default {
1212
meta: [
1313
{ charset: 'utf-8' },
1414
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
15-
{ hid: 'description', name: 'description', content: pkg.description }
15+
{ hid: 'description', name: 'description', content: pkg.description },
16+
17+
// Twitter Card Meta
18+
// Doc: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html
19+
{ property: 'twitter:card', content: 'summary' },
20+
{ property: 'twitter:site', value: '@codotype' },
21+
{ property: 'twitter:creator', value: '@aeksco' },
22+
23+
// OpenGraph Meta
24+
// Doc: http://ogp.me/
25+
{ property: 'og:url', content: 'https://nuxt-netlify-lambda-starter.netlify.com' },
26+
{ property: 'og:type', content: 'website' },
27+
{ property: 'og:title', content: 'Nuxt Netlify Lambda Starter' },
28+
{ property: 'og:description', content: 'SEO-friendly website starter backed by Netlify lambda functions' },
29+
{ property: 'og:image', content: 'https://nuxtjs.org/meta_640.png' }
1630
],
1731
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
1832
},
@@ -116,7 +130,10 @@ export default {
116130
enforce: 'pre',
117131
test: /\.(js|vue)$/,
118132
loader: 'eslint-loader',
119-
exclude: /(node_modules)/
133+
exclude: /(node_modules)/,
134+
options: {
135+
fix: true // NOTE - this is set to `true` so prettier automatically cleans up the file on save
136+
}
120137
})
121138
}
122139
}

‎pages/index.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,20 @@
8080
</a>
8181
snippet for fantastic SEO
8282
</li>
83+
<li>
84+
Pre-configured with
85+
<a href="http://ogp.me/" target="_blank">
86+
OpenGraph
87+
</a>
88+
and
89+
<a
90+
href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html"
91+
target="_blank"
92+
>
93+
Twitter Card
94+
</a>
95+
meta tags
96+
</li>
8397
<li>
8498
Bundled with
8599
<a

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /