Don't you see fancy pictures and descriptions like this when you paste your website link somewhere?
Today we are learning how to get a fancy link card like this. And preview while you build it.
In this example, I will integrate the Twitter card to the nextJs project.
Let's get start!
1. Add Twitter card to nextJs project
Basically, we are adding the meta tag into the HEAD element. But unlike CRA(Create React App), we don't have any file name with the public directory while working with nextJs, so we can't edit index.html directly in it.
For this previous reason, we will use the _document.js file under the pages directory. If you don't have this file you can create it like this.
## pages/_document.js
import Document, { Head, Main, NextScript } from "next/document";
export default class MyDocument extends Document {
render() {
return (
<html lang="en">
<Head>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@YOUR_TWITTER_USERNAME" />
<meta name="twitter:title" content="TITLE_FOR_YOUR_PAGE" />
<meta name="twitter:description" content="DESCRIPTION_FOR_YOUR_PAGE" />
<meta name="twitter:image" content="URL_FOR_YOUR_IMAGE" />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
After adding this file, your Twitter card will appear but you might want to see a live render while you are working on it.
You can provide it in several ways but now we will choose the ngrok.
2. Deploy via ngrok
What is ngrok?
https://ngrok.com/
https://www.npmjs.com/package/ngrokNgrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels.
You can share your development workspace on the internet with one click.
npm install -g ngrok
2023 Update
You need to sign in to
ngrokfirst to able to publish your site to the whole world.Then paste your auth token into your terminal.
ngrok config add-authtoken token
Then you can serve your preview port. For example, I used 3000 port for this project and I serve 3000 port with ngrok.
ngrok http 3000
And voilà! 🎉
Now I can reach my website from this link.
Okay now I have a live preview that I have shared to the whole internet so I can test my Twitter card from twitter.com/validator
2023 Update
This service is no longer supported by Twitter. You can use this site instead of.
Okay, that's it. You can add a Twitter card and manipulate live like that. I hope that was helpful for you.
If you like this article please like and if you want to follow my content you can follow from dev.to account or Twitter account.
Have a nice day. Happy coding :)
Top comments (4)
Hi Hasan. The twitter card validator link you shared in the article does not work.
You can use this link instead. 🎉
This link not worked for me I used this one instead of this bannerbear.com/tools/twitter-card-...
But thanks for heads up :thanks:
How do I pass dynamic values in meta content?
I don't know how you managed to make this work with ngrok. This is not working for me. It seems ngrok is blocking access