DEV Community

Cover image for SEO Tips and Tricks with Single Page Application Angular React Vue
Kiran Mali
Kiran Mali

Posted on • Edited on

SEO Tips and Tricks with Single Page Application Angular React Vue

Before starting work on Blog or any content site. You should have to do some research on whether your technology stack supports SEO things or not.

For example: I am using Angular Scully which is an angular static site generator. The problem which I faced with the only angular is not enough because as other SPA Technology, it is render HTML after page load so Whenever crawler scrap your website. It failed to find out the meta tags.

The solution is you have to use Server Side Rendering or Static Site Generator or rendertron. There are many options available for every SPA(Angular, Vue, and React).

If you have already developed SPA application and you don't want to add server-side rendering then you can use rendertron which is pretty much good design for this purpose.

SEO(Search Engine Optimazation) Tips and Tricks ๐Ÿคฉ

1. Register your domain to google search console

Search Console tools and reports help you measure your site's Search traffic and performance, fix issues, and make your site shine in Google Search results.

2. SEO Tips to Choose the Best title for your Blog

Ubersuggest tool which use to check trend and volume search about the topic. You can easily install the extension and just search on google. It will show you details on the right side of the page.

Update your <title></title> tag with your title which is really important. The title should not be the same across whole the website.

This is the best SEO Tips and Tricks which helps you to find out the correct title for your content or blog.

For example:

Just type in google search `SEO Tips`. it will show you the number of times search these words in google search engine.

Also Update Title. 
<title>SEO Tips and Tricks with SPA | kdhttps.com</title>
Enter fullscreen mode Exit fullscreen mode

3. Blog link should contain the title

For example:

https://kdhttps.com/blog/seo%20tips%20and%20tricks%20with%20spa
Enter fullscreen mode Exit fullscreen mode

You can see the link has a blog title that just helps Google to improve SEO.

4. Blog heading should contain your title for Good SEO

Blog heading means the heading tags(h1, h2, ...., h6). It should contain your title with some description. Like just take on of my blog example.

5. Metatags

This is the most important part. The metatags which should be on your page. These are the tags that are generally scrapping by the crawler(google, twitter crawler).

og:image and twitter:image should have a full path of the image, otherwise the crawler will fail to show the image on your social site.

For example:

<meta property="og:type" content="website">
<meta name="description" content="The Idea behind Technology Stack for Blog site with Netlify and Heroku free deployment and free domain linking">
<meta property="og:image" content="https://raw.githubusercontent.com/kdhttps/generator/master/assets/blog-1-tech-stack.png">
<meta property="og:title" content="The Idea summary behind Netlify and Heroku Free Deployment and Domain linking">
<meta property="og:url" content="https://kdhttps.com">
<meta property="og:description" content="The Idea behind Technology Stack for Blog site with Netlify and Heroku free deployment and free domain linking">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://raw.githubusercontent.com/kdhttps/generator/master/assets/blog-1-tech-stack.png">
<meta name="twitter:title" content="The Idea summary behind Netlify and Heroku Free Deployment and Domain linking">
<meta name="twitter:url" content="https://kdhttps.com">
<meta name="twitter:description" content="The Idea behind Technology Stack for Blog site with Netlify and Heroku free deployment and free domain linking">
<meta name="twitter:site" content="@kdhttps">
<meta name="twitter:creator" content="@kdhttps">
Enter fullscreen mode Exit fullscreen mode

6. Image

You should have to add at least one image in your blog and don't forgot to add alt attribute with values. Sometimes we search only for images and users may click on images and google will redirect users to your website.

For Example:

<img src="blog-1-tech-stack.png" alt="SEO Tips and Tricks with SPA" />
Enter fullscreen mode Exit fullscreen mode

7. Repeat your title in your content

At least repeat 2-3 times your title in your blogs. It is best google directly highlight this content. But make sure it is looks and sound goods otherwise users may not like it.

For example:

Point 2. SEO Tips to Choose the Best title for your Blog.

You can see, I've repeated `SEO`, `Tips`, and `Tricks` words in a whole blog.
Enter fullscreen mode Exit fullscreen mode

This is my first blog on Dev.to so suggestions are welcome about anything change in the blog. I hope it will help someone.

Originally published on my own site https://kdhttps.com

thank you

Top comments (1)

Collapse
 
kdhttps profile image
Kiran Mali

If you have already developed SPA application and you don't want to add server side rendering then you can use rendertron which is pretty much good design for this purpose. npmjs.com/package/rendertron