Set Metadata Per Page Without Server Side Rendering Using react-snap
ฝัง
- เผยแพร่เมื่อ 9 ก.ย. 2024
- In this video series, I work on my new personal website built using React.
Website: www.celikk.me
GitHub: github.com/cel...
Playlist: • Personal Website with ...
Twitch: / celikkoseoglu
You should watch the react-helmet video before this one: • Set Page Title and Des...
This is a continuation of my previous work using React Helmet. We've set the metadata for Google's web crawlers. Plus, users can see the correct titles when they browse our site. However, when they share the website using a slack message (or facebook, linkedin etc.), they will not get the correct tags.
This is where react-snap comes into play. It crawls through your website at build time and generates all html files with the correct headers so when you share your website online, you will get the correct metadata per page.
This is super useful because it eliminates the need for Server Side Rendering for my use case. Decreases complexity by a lot.
![POLYCAT - ข้อความรูปยิ้ม :) [Music Video]](http://i.ytimg.com/vi/lBhIgPGCgbI/mqdefault.jpg)
This man deserves a lot more than 300 subs guys ! the content is awesome and the knowledge is legit
Solid +1
Thankyou so much...I was stuck hopelessly trying to convert Create react app to SSR for days!!!.... Thankyou!!!!!
Çelik bey tekrardan merhaba, pakette şunu fark ettim ben apilerimde sayfalama kullanıyorum bu yüzden sadece 1. sayfadaki verilerin html renderini yapıyor bunun için tüm sayfaları tek tek gitmesi için bir özelliği mevcut mu acaba api de kendi oto page arttırarak çekeceği bir yöntem ?
I got an error:
"UnhandledPromiseRejectionWarning Error: Execution context was destroyed, most likely because of a navigation."
"error Command failed with exit code 1"
when react-snap is running.
Could you give me some advices ?
In my case I need to generate dynamic meta info for links which are also dynamically generated based on url given by user. Any solution for this?
hey, did you got solution?
@@gogaiosebashvili9487 I completely moved my user-facing code to nextjs to utilize SSG and dynamic pages
@@ViVaManukonda bro me too
Bad… though I cloud find a solution with react too 😢need a dynamic og for a react 16
Çelik merhaba videon için teşekkür ederim, işime çok yaradı ancak bir sorum olucak sana; ben kullanıcıların içerik üretebildiği bir proje geliştirdim ve ortalama günlük örnek veriyorum 30 içerik paylaşımı yapılıyor ve hepsinin dinamik title oluşturuluyor. Projede build işlemi yapmadan yeni eklenen içeriklerin title yazıları gelmiyor, her seferinde build mi yapmamız gerekiyor ya da bunu otomatik şekilde yapmamı sağlayacak bir yol var mı ? Cevabın için şimdiden teşekkür ederim.
Boyle bir seyi server side rendering olmadan yapmak mumkun degil malesef. Degismeyen icerigi onceden pre-renderlayip kullaniciya sunabiliriz ama degisen icerigi pre-renderlamak mumkun degil.
Next.js gibi kutuphanelere bakmani oneririm. Umarim en uygun cozumu bulursun. Iyi calismalar.
how about the problem with: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Anybody know how to fix ?
I get this error that says 'TyperError: Object.fromEntries is not a function'. Does anyone know what might be going on here? (Yes, nodejs is up-to-date.)
second time npm run build dont create page static. help me
I do not understand where react-snap store those static HTML pages when it runs after build. Is it in some folder? And how it force react engine to replace the default index.html with those static pages?
I really wonder that you are frequently making videos from past 9 months and most of your content is really good and perfect for intermediate to advanced users but why there's isn't a lot of traffic and subscription on your channel.
You should make your video search friendly and simple title along with catchy thumbnail
I'm working on that. It probably takes some time for TH-cam proritise this video over all other react tutorials though. Also as you said, these videos are intended for intermediate+ levels. Many of those people know what they are doing and don't require tutorials. I mostly do this as a hobby at this point. Thanks a lot for your feedback.
@@celikkoseoglu keep doing what you like ♥️
Man, you are pure gold!
Man, you too. Give the repo a star here and spread the word: github.com/celikkoseoglu/celikk-personal-website
@@celikkoseoglu Yes I will do definitely on the discord group! Can you tell me what do you think about my portfolio, please?
aleksamitic.com
Excelent man thanks!
on initial load, the components are all over the place. Not working right.
postbuild: `react-snap` - I am getting this error after postbuild in package.json file
How if the data (title, description, image) must call an API? I mean dynamic meta tag.
Yes I have facing same issue
Does this affect the css when build files are serve?
i am not able to update meta-tags from child components. ( whatever props passed to helmet component from app.js file are getting overridden) could you help me out to solve this.
Thanks in advance :)
any update ?
thanks !
Thanks for this
Great videos. I was wondering if there is an alternative to react-snap? This package was last maintained 2 years ago. I can see lot of issues and open PRs on github. Also this doesn’t support typescript.
I was looking to see if there was an alternative too. Haven't been able to find a solid replacement so far. Let me know if you find something and I can make a video about that too!
@@celikkoseoglu all roads promise it's possible but eventually lead to NextJS 😭😭😭
Thanks a lot bro, it worked!!!!
Cok guzel bir video olmus. Gayet egitici ve ogretici. Title ve diger Meta tag lari dinamik olarak degistirmek icin ne tarz bir paket kullaniyorsun? Vanilla JS mi yoksa Helmet tarzi bir paket mi?
Helmet. Bundan bir onceki videomda onu acikliyorum.
Çelik Köseoğlu tesekkurler. Videolarin icerik olarak izledigim bir cok tutorialden cok daha iyi. Umarim daha cok kisiye ulasmanin bir yolunu bulursun. Kolay gelsin
@@ibrahimfrat8591 eninde sonunda olucak (:
Çelik Köseoğlu TH-cam senin videolarini kullanicilarin video feedlerinde gostermeye baslamis (en azindan benimkinde 😅). Bu sekilde yararli icerikler urettigin surece dedigin gibi eninde sonunda olacak :)
is it working on react 18?
no
Hey thanks for the video. I have implemented react-snap but it is only crawling my first page. I thought that this was caused by my use of onClick events over href attributes for changing pages but that isn't the case. I even inserted some raw tags in my first page and I'm still seeing the same problem. Only one page crawled at "/". Any ideas as to why this is?
use route dude instead of anchor tag
I used route but still facing the same issue. Can anyone help!
Cok guzel my friend
Is it possible to set dynamic meta tags using redux and redux-persist?
no
Hello sir in this video you told at 03:40 that you will fix those warning in your future videos but you have not uploaded any video regarding solving of that warning which is coming from firebase. Sir please upload new video for solving that warning please.
Thanks a lot
bro there is an error while build
how can i use react-snap in nextjs
NextJS comes with SSR and static rendering. No need for this if you're using NextJS
i need help
Please zoom in your screen that we can see your code
"npm ERR! missing script: build"
Increase font size
Hello, after the integrating react-snap into the website. React-snap adds '/' to the URL. I realized that you had the same problem (05:02 '/blog/airpodsPro' becomes '/blog/airpodsPro/'). I checked your website. It seems you solved this problem. Could you please share the solution? Thanks for the video.
Why is having / at the end of the URL a problem?
By the way, I've migrated my website to NextJS a month ago and I've been working on this for the last several months. The reason why you don't see a / anymore on my current website is because it's running on s completely different architecture
@@celikkoseoglu aaaahgh. I came here to get away from next