Get Image Previews When Your React Website is Shared - MetaTags
HTML-код
- Опубликовано: 12 июн 2020
- In this video series, I work on my new personal website built using React.
Website: www.celikk.me
GitHub: github.com/celikkoseoglu/celi...
Playlist: • Personal Website with ...
Twitch: / celikkoseoglu
In this video, I add the correct metatags required to get image previews when my website is shared on social media or slack. Up next is adding the same functionality for blog posts. 
Наука
I can see the image link in meta tag when I open chrome inspector tool. But I tested with different meta tag preview and the thumbnail images just won't show
Would this be a problem if you load your images using base64 ?
Merhaba Çelik. Dinamik blog pageimde link preview için gerekli metaları Helmetle yazmışım ama link paylaşıldığında ön izleme çıkmıyor. Reactte bu mümken değilmi ? Yani mutlaka next.js mi yazmalıyım ?
And I am a new subscriber.
Nice articles. Just happened to need this. Thanks for sharing... One challenge: it's hard to see the code as it's not large enough. Thanks.
Thank you for your feedback.
dynamically og tags will not work in react js because react is client side rendering helmet cants give you dynamically meta tags might be its show in develoepr toold but if you share through watsapp it wont see image title and etc...
Agree
the video seems to be very explicative, however, as myself, if someone did now watch your previous videos from this series, we get a bit lost and is hard to understand what is happening with the other files on the project.
I have a question. is your website static or ssr??? Cause my website is static but doesn't works. Thanks
Same, I did exactly what he did but it doesn't work, did you figure it out?
Is there a paid software service that can do this for you? Seems like a lot of unnecessary work.
dont work for me ;( dont load the og:image, only title, description ... but, nice job man, thanks for share it
check your image size and format. Make sure you can see the correct image link under the header in chrome inspector tools after your website renders.
for the test of image you can do something like this content="mywebsite.com/myimage.jpg"
Facebook and Instagram No Longer Generate Link Previews… Only In Europe
the text size of your editor is too small
So I edit these out from my programming streams and I want to feel comfortable navigating the code on my screen. Giant text makes it very bad for me.
I've been thinking about doing the stream first and then filming the RUclips video second. Haven't got around to it yet. It's on my mind though. Thanks for your feedback!