LinMinquan's Blog

Experience technology to change life

Hugo add meta for Facebook and Twitter share link preview

After analyze a example link that can preview in Facebook & Twitter and search Google, I found it just need to add some meta on blog post’s html header. 

One guy give an example code below.

His blog post about this solution: 
https://vietlq.github.io/2017/04/30/access-hugo-page-variables/

His github gist about this code:
 https://gist.github.com/vietlq/d1c7ecfb20ce7beac4a7f4df746c797c

Reference: 
<a rel=“noreferrer noopener” aria-label=“Reference:  https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary.html https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup.html

 (opens in a new tab)” href=“https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary.html" target="_blank”>https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary.html
<a rel=“noreferrer noopener” aria-label=“Reference:  https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary.html https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup.html

 (opens in a new tab)” href=“https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup.html" target="_blank”>https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup.html
<a href=“https://cards-dev.twitter.com/validator" target="_blank” rel=“noreferrer noopener” aria-label=“Reference:  https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary.html https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup.html https://cards-dev.twitter.com/validator

 (opens in a new tab)">https://cards-dev.twitter.com/validator


Share