SEO

On today's chopping block, Search Engine Optimization, the easy way ! Set Project Global defaults or page specific descriptions to optimize your targets bookmarks!

SETTING PROJECT META DATA:#

Providing accurate meta-data per page follows this hierarchical overwriting  setup: By default all pages score 100% on Google Lighthouse Meta.

💡

Currently it requires the Global and App Level Meta data to be set to have a full SEO Project coverage. In the near future we will work for this to be fully set from the Project Config.

1. Global Level

( Project Default SEO Meta Data )

2. App Level

( Currently contains the Twitter Meta Data )

3. Layout Level

( Website, Application, Ecommerce, Community )

4. Page Level

( Page Specific )

5. Component Level

( Example is a Product Component )

1. The Global Level#

• Nuxt Config This project makes use of Kevin Marrec's Nuxt Pwa Module a Nuxt3 version of the Nuxt2 PWA module, until official and upstream monitored closely. The Module uses most of the same documentation as the Nuxt V2 Module.

    pwa: {
        meta: {
            title: "Flamewerk: Nuxt3 Startup Theme ",
            name: "Flamewerk",
            description:
            "🔥 Build Modern Webapps for Free Forever with one easy.",
        ogImage: {
          path: "https://flamewerk.com/Thumbnail.png",
          width: 1200,
          height: 627,
          type: "image/png",
        },
        twitterSite: "https://twitter.com/flamewerk",
        twitterCard: "summary_large_image",
        twitterCreator: "@flamewerk",
        ogUrl: "https://flamewerk.com/",
      },
    },

[

Meta Module

Meta easily adds common meta tags into your project with zero-config needed

Nuxt PWA

](https://pwa.nuxtjs.org/meta)

2. The App Level#

• App.vue

    meta: [
    { property: "twitter:title", content: "Flamewerk: Startup Theme"},
    { property: "twitter:image", content: "/Thumbnail.png" },
    { property: "twitter:description",
      content: "Build Modern Webapps for Free Forever with one easy config."},
    ],

It is very important to note that the Thumbnail picture should have at least dimensions of ( 1200 x 1200 px ) and not exceed 250kb !

3. The Layout Level#

    useHead({
      meta: [
        { title: "New Layout Title." },
        { description: "Build Modern Webapps for Free." },
        { property: "twitter:title", content: "Flamewerk: Theme" },
        { property: "twitter:image", content: "/Thumbnail.png" },
        { property: "twitter:description",
          content:
          "Build Modern Webapps for Free Forever with one easy config.",
        },
      ],
    });

4. The Page Level#

    ---
    layout: post
    title: Blogging Like a Hacker
    desciption: Metadata page
    ---

Note that YAML front matter is not parsed by the Markdown parser, but is removed prior to parsing by Jekyll (or whatever tool you're using) and could actually be used to request a different parser than the default Markdown parser for that page (I don't recall if Jekyll does that, but I have seen some tools which do).

It is also possible to define custom meta data using a page route by using vuehead. Example: layout & component level.

5. The Component Level#

Dynamic component rendering: Examples: Product list or blogposts

    useHead({
      meta: [
        { title: ContstantTitle },
        { description: ConstantName },
      ],
    });