de
  • About
  • Services
  • Tech-Stack
  • Projects
  • Contact & Prices
  • Blog

Basic SEO - Vue/Nuxt

Search engine optimization with tips for Vue and Nuxt

31.03.2025

seo
backgroundgoogle-logosearch

In this article, I want to outline the fundamental SEO practices that every website should apply to achieve strong results in Google Search. I’ll also share tips on how to implement these practices in Vue and Nuxt.

SEO differentiates between technical measures and content-focused improvements.

Technical SEO Measures

Sitemap

A sitemap file lists every page on the website. Search engines read this file and use it as a guide for the crawler that indexes the site. The sitemap usually has the file name sitemap.xml and lives in the website’s root directory. For Vue and Nuxt you can use the @nuxtjs/sitemap module. You can find the sitemap, for example, at https://foxwebcraft.com/sitemap.xml.

Robots.txt

The file robots.txt is a text file that specifies which pages search engine bots are allowed to index. This file is stored in the website’s root directory. You can also define which pages should be excluded from indexing. Here’s an example of a standard robots.txt file:

User-agent: *
Allow: /
Sitemap: https://foxwebcraft.com/sitemap.xml

For Nuxt you can use the @nuxtjs/robots module. It offers additional features to modify the robots.txt file. Here’s a useful article on the topic: Controlling Web Crawlers in Vue & Nuxt

Page Structure

Most websites don’t pay enough attention to a proper page structure. For search engines, the hierarchy of headings provides crucial hints about the content and the importance of individual sections. A solid page structure includes one H1 heading and any number of H2, H3, and H4 headings. Make sure the order is correct—an H2 should follow an H1 (not an H4).

Images

Another important area that’s often neglected is the imagery on the site. Keep these points in mind for SEO:

  • File names: The file name should describe the image, e.g. watch-casio-CS-1000.webp.
  • Alt text: Provides the search engine with a hint about what’s visible in the image, e.g. silver Casio watch on wrist.
  • Image format: Convert images to the WebP format. WebP offers better compression than JPG and PNG.
  • Logos: SVG is a good choice for logos.
  • Image size: Strike the right balance between image quality and file size. Large files slow down load times; smaller files speed up loading, improve user experience, and reduce bounce rates.
  • Use the XnConvert tool to convert images to different formats and sizes. XnConvert
  • In Vue and Nuxt you can use the <NuxtImg> or <NuxtPicture> tags to generate responsive images automatically.

Meta Tags

Meta tags control which information appears in Google search results and help Google understand the page. The most important meta tags are:

For Google and other search engines

  • title: The page title shown as the headline in Google search.
  • description: The meta description shown in Google search. Include the page’s key keywords and a brief summary of the content.
  • image: The image that appears in Google search results.

For social media via Open Graph

  • ogTitle: Displayed as the headline. It can match the title.
  • ogDescription: The page description. It can match the description.
  • ogImage: The image shown when the page is shared on social media. It can match the image.
  • ogType: The page type, e.g. website or article.
  • ogSiteName: The website name, e.g. FoxWebcraft.

Specific to X in addition to Open Graph

  • twitter:card: The card format, e.g. summary_large_image.

For Vue and Nuxt you can use the useSeoMeta composable. Here’s an example implementation:

useSeoMeta({
  title: 'Basic SEO',
  ogTitle: 'Basic SEO',
  description: 'Search engine optimization with tips for Vue/Nuxt',
  ogDescription: 'Search engine optimization with tips for Vue/Nuxt',
  image: 'https://foxwebcraft.com/images/blog/seo-image.webp',
  ogImage: 'https://foxwebcraft.com/images/blog/seo-image.webp',
  ogType: "article",
  ogSiteName: "FoxWebcraft",
  twitterCard: "summary_large_image",
});

This configuration results in the following HTML:

<head>
  <title>Basic SEO</title>
  <meta property="og:title" content="Basic SEO">
  <meta name="description" content="Search engine optimization with tips for Vue/Nuxt">
  <meta property="og:description" content="Search engine optimization with tips for Vue/Nuxt">
  <meta name="image" content="https://foxwebcraft.com/images/blog/seo-image.webp">
  <meta property="og:image" content="https://foxwebcraft.com/images/blog/seo-image.webp">
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="FoxWebcraft">
  <meta name="twitter:card" content="summary_large_image">
</head>

Page Speed

Page speed is a major factor in SEO. Keep these tips in mind:

  • Optimize images (see above).
  • Provide fonts in TTF format.
  • Avoid loading unnecessary libraries.

Responsive Design

Ensure the page content is easily readable on every device.

Content Optimization

So far we’ve covered the technical measures. Now let’s look at the content improvements. Effective SEO is built on high-quality, user-focused content. Here are some tips:

  • Keyword research: Identify relevant search terms with suitable search volume and competitive difficulty. Tools such as Google Keyword Planner or Ubersuggest are helpful.
  • Optimized headings: Use H1 for the main title with the primary keyword, and structure subtopics with H2, H3, etc.
  • High-quality content: Create informative, unique content with sufficient depth (typically 1,000+ words for comprehensive topics).
  • User-friendly structure: Use short paragraphs, bullet points, subheadings, and highlights to improve readability.
  • Natural keyword placement: Integrate keywords organically in the text, title, meta description, URL, and image alt text. Avoid keyword stuffing.
  • Internal linking: Interlink related content across the website.
  • Multimedia elements: Enhance text with images, videos, or infographics to improve user experience and dwell time.
  • Freshness: Update critical content regularly to maintain relevance.
  • E-A-T principle: Demonstrate expertise, authority, and trustworthiness with well-researched content and sources.
  • Respect user intent: Understand whether users want information, to make a purchase, or to find a solution.

Google Search Console

Google Search Console lets you ensure Google indexes all your pages. It also highlights discoverability issues so you can fix them.

Google Search Console

Google Analytics

Google Analytics enables you to analyze the website’s traffic.

Google Analytics

Testing

I use Seobility to test SEO measures. It lets you run five free requests per day, which is usually enough to validate the optimizations and identify improvements.

Seobility

Conclusion

If you implement all the measures listed here, nothing stands in the way of great Google Search results. It can take some time for the changes to show up in search rankings, but they always lead to a better user experience—and that alone justifies the effort that goes into SEO.

show all posts