React757 / react757.github.io

Making react "news site" with (Custom news articles filtered by team of Numbers )
https://react757.github.io
MIT License
0 stars 5 forks source link

How to make React757 website SEO-friendly #1

Open Pandimadhubabu opened 3 years ago

Pandimadhubabu commented 3 years ago

Pre-rendering Pre-rendering is a common approach to make both single- and multi-page web apps SEO-friendly.

Pre-rendering is used when search bots can’t render your pages correctly. In these cases, you can use pre-renderers: special programs that intercept requests to your website and, if the request is from a bot, pre-renders send a cached static HTML version of your website. If the request is from a user, the usual page is loaded.

This approach to make your website SEO-friendly has the following advantages:

Pre-rendering programs are able to execute all types of modern JavaScript and transform it into static HTML. Pre-renderers support all the latest web novelties. This approach requires minimal codebase modifications or no modifications at all. It’s simple to implement. However, there are also some drawbacks to this approach:

It isn’t suitable for pages that display frequently changing data. Pre-rendering can take too long if the website is large and contains a lot of pages. Pre-rendering services aren’t free. You need to rebuild your pre-rendered page every time you change its content.

brinyemp4 commented 3 years ago

I got invitation to my another github account, please invite me on this one and share some more detail.

Pandimadhubabu commented 3 years ago

I got invitation to my another github account, please invite me on this one and share some more detail.

Example og tags

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />

Twitter Cards

<meta property="twitter:title" content="The Rock" />
<meta property="twitter:card" content="video.movie" />
<meta property="twitter:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="twitter:image" content="https://ia.media-imdb.com/images/rock.jpg" />