[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-article-how-to-show-a-link-preview-on-any-website":3},{"meta":4,"html":29,"authorName":30,"authorFacebookUrl":31,"authorProfileImage":32,"authorWebsite":33,"authorJobTitle":34,"authorTwitterUrl":35,"wordCount":36,"recommended":37},{"id":5,"slug":6,"type":7,"title":8,"excerpt":9,"metaTitle":8,"metaDescription":10,"canonicalUrl":10,"featureImage":11,"publishedAt":17,"createdAt":18,"updatedAt":17,"featured":19,"readingTime":20,"tags":21,"author":28,"recommendedSlugs":10},"671f386db98706751d677b5f","how-to-show-a-link-preview-on-any-website","post","How To Show A Beautiful Link Preview On Any Website","Easily add link previews to any website using the open-source Previewbox library. Works with any framework, fetching Open Graph data automatically.",null,{"url":12,"alt":13,"caption":14,"width":15,"height":16},"\u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F10\u002F0_dkKw8Q1T3dUhNBo7.jpg","Lake with mountains in background","\u003Cspan style=\"white-space: pre-wrap;\">Photo by \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Funsplash.com\u002F@garrettpsystems?utm_source=medium&utm_medium=referral\" target=\"_blank\" rel=\"photo-creator noopener\">\u003Cspan style=\"white-space: pre-wrap;\">garrett parker\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"white-space: pre-wrap;\"> on \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Funsplash.com?utm_source=medium&utm_medium=referral\" target=\"_blank\" rel=\"photo-source noopener\">\u003Cspan style=\"white-space: pre-wrap;\">Unsplash\u003C\u002Fspan>\u003C\u002Fa>",1600,1067,"2024-10-29T20:25:55.000+00:00","2024-10-28T07:08:29.000+00:00",false,6,[22,25],{"name":23,"slug":24},"Web Development","web-development",{"name":26,"slug":27},"SEO","seo","marius-bongarts","\u003Cp>Recently, I stumbled upon a problem: I wanted to preview a simple URL on my website. \u003C\u002Fp>\n\u003Cp>\n  This turned out to be much harder than I thought, so I built an\n  \u003Ca href=\"https:\u002F\u002Fpreviewbox.link\u002F\" rel=\"noopener\">open-source component library\u003C\u002Fa>\n  that anyone can easily use on their website to preview links.\n\u003C\u002Fp>\n\u003Cp>\n  In this article, I’ll explain how to\n  \u003Cstrong>easily add link previews to any website\u003C\u002Fstrong>\n  , regardless of the framework — be it React, Vue.js, or just plain HTML.\n\u003C\u002Fp>\n\u003Ch4 id=\"tldr\">TL;DR\u003C\u002Fh4>\n\u003Col>\n  \u003Cli>\n    \u003Ca href=\"https:\u002F\u002Fpreviewbox.link\u002Fdocs\u002Fgetting-started\u002Finstallation\" rel=\"noopener\">Install Previewbox script\u003C\u002Fa>\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Ca href=\"https:\u002F\u002Fpreviewbox.link\u002Fdocs\u002Fcomponents\u002Fpreviewbox-link\" rel=\"noopener\">Select component\u003C\u002Fa>\n    and add to your website like this:\n  \u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cfigure class=\"kg-card kg-image-card\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*1cadiTR-wCz8ryMNqlpmaQ.png\"\n    class=\"kg-image\"\n    alt=\"Previewbox link component\"\n    loading=\"lazy\"\n    width=\"2974\"\n    height=\"896\"\n  \u002F>\n\u003C\u002Ffigure>\n\u003Cp>\n  Check out this\n  \u003Ca href=\"https:\u002F\u002Fcodepen.io\u002Fmarius2502\u002Fpen\u002FeYqJMwp\" rel=\"noopener\">CodePen\u003C\u002Fa>\n  for a demo.\n\u003C\u002Fp>\n\u003Ch3 id=\"introduction\">Introduction\u003C\u002Fh3>\n\u003Cp>\n  We all know how simple it can be: you paste a link on social media or in an online editor, and a beautiful preview\n  appears. \n\u003C\u002Fp>\n\u003Cp>\n  For instance, if I just add my website\n  \u003Ca href=\"https:\u002F\u002Fweb-highlights.com\u002F\" rel=\"noopener\">web-highlights.com\u003C\u002Fa>\n  here, it will create a nice preview:\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card\">\n  \u003Ca class=\"kg-bookmark-container\" href=\"https:\u002F\u002Fweb-highlights.com\u002F\">\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">Web Highlights - PDF & Web Highlighter\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">\n        Best highlighter for the web. Just like you do on books, highlight on any web page or PDF, and take notes.\n        Organize with tags and find your research in the app.\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg class=\"kg-bookmark-icon\" src=\"https:\u002F\u002Fstatic.ghost.org\u002Fv5.0.0\u002Fimages\u002Flink-icon.svg\" alt=\"\" \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Web Highlights - PDF & Web Highlighter\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg src=\"https:\u002F\u002Fweb-highlights.com\u002Fimages\u002Fwh-thumbnail.png\" alt=\"\" onerror=\"this.style.display = 'none'\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n\u003C\u002Ffigure>\n\u003Cp>\n  The prerequisite for this is that so-called\n  \u003Cstrong>Open Graph metadata\u003C\u002Fstrong>\n  is set on your website, which is fetched to display the title, description, image, etc. when the preview is created.\n\u003C\u002Fp>\n\u003Ch4 id=\"what-is-open-graph-metadata\">What is Open Graph Metadata?\u003C\u002Fh4>\n\u003Cp>\n  The Open Graph is a protocol created by Facebook to standardize the use of metadata on web pages for describing\n  content. \n\u003C\u002Fp>\n\u003Cp>\n  With Open Graph tags, we can specify which image to use as the preview when sharing our posts on platforms like\n  Twitter, LinkedIn, and Facebook.\n\u003C\u002Fp>\n\u003Cblockquote>\n  To turn your web pages into graph objects, you need to add basic metadata to your page. We’ve based the initial\n  version of the protocol on\n  \u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FRDFa\" rel=\"noopener\">RDFa\u003C\u002Fa>\n  which means that you’ll place additional\n  \u003Ccode><meta>\u003C\u002Fcode>\n  tags in the\n  \u003Ccode><head>\u003C\u002Fcode>\n  of your web page. The four required properties for every page are:\n  \u003Cbr \u002F>\n  \u003Cbr \u002F>\n  \u003Ccode>og:title\u003C\u002Fcode>\n  - The title of your object as it should appear within the graph, e.g., \"The Rock\".\n  \u003Cbr \u002F>\n  \u003Cbr \u002F>\n  \u003Ccode>og:type\u003C\u002Fcode>\n  - The\n  \u003Ca href=\"https:\u002F\u002Fogp.me\u002F#types\" rel=\"noopener\">type\u003C\u002Fa>\n  of your object, e.g., \"video.movie\". Depending on the type you specify, other properties may also be required.\n  \u003Cbr \u002F>\n  \u003Cbr \u002F>\n  \u003Ccode>og:image\u003C\u002Fcode>\n  - An image URL which should represent your object within the graph.\n  \u003Cbr \u002F>\n  \u003Cbr \u002F>\n  \u003Ccode>og:url\u003C\u002Fcode>\n  - The canonical URL of your object that will be used as its permanent ID in the graph, e.g.,\n  \"https:\u002F\u002Fimdb.com\u002Ftitle\u002Ftt0117500\u002F\".\n  \u003Cbr \u002F>\n  \u003Cbr \u002F>\n  \u003Cstrong>Source:\u003C\u002Fstrong>\n  \u003Ca href=\"https:\u002F\u002Fogp.me\u002F\" rel=\"nofollow noopener\">\u003Cstrong>ogp.me\u003C\u002Fstrong>\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>In case your website doesn’t show an image, you should first make sure to set these meta tags.\u003C\u002Fp>\n\u003Cp>\n  You learn more about this in the article\n  \u003Ca href=\"https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fturn-your-website-into-a-beautiful-thumbnail-link-preview\u002F\" rel=\"noopener\">\n    How To Make Your Website Have a Beautiful Thumbnail\n  \u003C\u002Fa>\n  :\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fturn-your-website-into-a-beautiful-thumbnail-link-preview\u002F\"\n  >\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">Make Your Website Have a Beautiful Thumbnail Link Preview\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">\n        A thumbnail image of your website can be essential to attract new users. Understand the Open Graph protocol to\n        have a beautiful preview image for your website.\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg class=\"kg-bookmark-icon\" src=\"https:\u002F\u002Fstatic.ghost.org\u002Fv5.0.0\u002Fimages\u002Flink-icon.svg\" alt=\"\" \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Web Highlights Blog\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg\n        src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1464822759023-fed622ff2c3b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDcwfHxuYXR1cmV8ZW58MHx8fHwxNjYwODg5MjM3&ixlib=rb-1.2.1&q=80&w=2000\"\n        alt=\"\"\n        onerror=\"this.style.display = 'none'\"\n      \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n\u003C\u002Ffigure>\n\u003Ch4 id=\"why-is-it-so-hard-to-preview-a-link\">Why is it so hard to preview a link?\u003C\u002Fh4>\n\u003Cp>In theory, it sounds so simple:\u003C\u002Fp>\n\u003Col>\n  \u003Cli>Fetch Open Graph Metadata\u003C\u002Fli>\n  \u003Cli>Show data in frontend\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>The problem lays in the fact that we can not fetch the Open Graph data from another domain without a server.\u003C\u002Fp>\n\u003Cp>\n  Browsers have strict security rules that limit what JavaScript on a webpage can access. For example, if you try to get\n  data from another domain (like\n  \u003Ca href=\"https:\u002F\u002Fexample.com\u002F\" rel=\"noreferrer noopener\">https:\u002F\u002Fexample.com\u003C\u002Fa>\n  ), the browser will block it due to the Same-Origin Policy. This policy is there to protect users, making sure scripts\n  can only access resources from the same site.\n\u003C\u002Fp>\n\u003Cp>\n  To get around this, you need a server that fetches the data for the URLs you want to preview. The server acts as a\n  middleman, allowing your app to access and show the information without breaking browser security rules.\n\u003C\u002Fp>\n\u003Cblockquote>\n  To show a link preview for another domain, we need a server that provides the metadata we want to display.\n\u003C\u002Fblockquote>\n\u003Cp>Good news: My component library does all that for you!\u003C\u002Fp>\n\u003Ch3 id=\"how-to-add-a-preview-link-on-your-website\">How To Add A Preview Link On Your Website\u003C\u002Fh3>\n\u003Cp>We just learned that we need to fetch the Open Graph data from a website first to display it on our site. \u003C\u002Fp>\n\u003Cp>\n  I wanted to build a solution that enables you to simply create a link preview on any website, even without deploying a\n  server.\n\u003C\u002Fp>\n\u003Cblockquote>Simply pass an URL to the Previewbox components, and everything else happens automatically.\u003C\u002Fblockquote>\n\u003Cp>\n  Simply pass an\n  \u003Ccode>href\u003C\u002Fcode>\n  attribute to the component, and the data gets fetched automatically:\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*1cadiTR-wCz8ryMNqlpmaQ.png\"\n    class=\"kg-image\"\n    alt=\"Previewbox link component\"\n    loading=\"lazy\"\n    width=\"2974\"\n    height=\"896\"\n  \u002F>\n\u003C\u002Ffigure>\n\u003Cp>\n  Previewbox supports different\n  \u003Ca href=\"https:\u002F\u002Fpreviewbox.link\u002Fdocs\u002Fcomponents\u002Fpreviewbox-link\" rel=\"noopener\">components\u003C\u002Fa>\n  :\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"\u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F10\u002Fimage-7.webp\"\n    class=\"kg-image\"\n    alt=\"Previewbox components\"\n    loading=\"lazy\"\n    width=\"2000\"\n    height=\"791\"\n    srcset=\"\n      \u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F10\u002Fimage-7.webp   600w,\n      \u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F10\u002Fimage-7.webp 1000w,\n      \u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F10\u002Fimage-7.webp 1600w,\n      \u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F10\u002Fimage-7.webp            2024w\n    \"\n    sizes=\"(min-width: 720px) 720px\"\n  \u002F>\n  \u003Cfigcaption>\n    \u003Ca href=\"https:\u002F\u002Fpreviewbox.link\u002F\">\u003Cspan style=\"white-space: pre-wrap\">Previewbox\u003C\u002Fspan>\u003C\u002Fa>\n    \u003Cspan style=\"white-space: pre-wrap\">components\u003C\u002Fspan>\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>To use them, we only need to follow two steps:\u003C\u002Fp>\n\u003Ch4 id=\"1-install-previewbox-script\">1. Install Previewbox script\u003C\u002Fh4>\n\u003Cp>\n  The Previewbox components are built with\n  \u003Ca href=\"https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Ftag\u002Fweb-components\u002F\" rel=\"noopener\">Web Components\u003C\u002Fa>\n  , so you can use them on any website.\n\u003C\u002Fp>\n\u003Cblockquote>\n  Web Components are reusable client-side components based on official web standards and supported by all major\n  browsers.\n\u003C\u002Fblockquote>\n\u003Cp>To use our components, you only need to add this script to your website:\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@mariusbongarts\u002Fpreviewbox\u002Fdist\u002Findex.min.js\">\u003C\u002Fscript>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  You can also load our components individually if you only need one. Check out the installation guide in the\n  documentation for more details.\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fwill-web-components-replace-frontend-frameworks-they-are-built-to-solve-different-problems\u002F\"\n  >\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">Will Web Components Replace Frontend Frameworks?\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">\n        Web Components will not replace frontend frameworks but they can enhance those frameworks by replacing their\n        component layer with a native solution.\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg class=\"kg-bookmark-icon\" src=\"https:\u002F\u002Fstatic.ghost.org\u002Fv5.0.0\u002Fimages\u002Flink-icon.svg\" alt=\"\" \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Web Highlights Blog\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg\n        src=\"\u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F10\u002Fwebcomponents.webp\"\n        alt=\"\"\n        onerror=\"this.style.display = 'none'\"\n      \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n\u003C\u002Ffigure>\n\u003Ch4 id=\"2-add-component-to-html\">2. Add component to HTML\u003C\u002Fh4>\n\u003Cp>\n  Web Components are based on\n  \u003Ca href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts\u002Fthe-complete-web-component-guide-part-1-custom-elements-a627af805df8\">\n    custom elements\n  \u003C\u002Fa>\n  , which enable you to define your own HTML elements.\n\u003C\u002Fp>\n\u003Cblockquote>\n  “Custom elements provide a way for authors to build their own fully-featured DOM elements.” — \n  \u003Ca href=\"https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002Fcustom-elements.html\" rel=\"noopener ugc nofollow noopener\">\n    html.spec\n  \u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>Currently, Previewbox supports two components:\u003C\u002Fp>\n\u003Cp>\n  \u003Ca href=\"https:\u002F\u002Fpreviewbox.link\u002Fdocs\u002Fcomponents\u002Fpreviewbox-link\" rel=\"noopener\">\n    \u003Cstrong>\u003Ccode>previewbox-link\u003C\u002Fcode>\u003C\u002Fstrong>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp>\n  The previewbox-link component provides a simple link preview, just like the ones you see in articles. It’s great for\n  placing in the middle of an article’s text or on any website to show a preview of another URL.\n\u003C\u002Fp>\n\u003Cp>\n  Simply add this HTML to your website to use the\n  \u003Ccode>previewbox-link\u003C\u002Fcode>\n  component:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist133654043\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-index-html\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-html  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"index.html content, created by MariusBongarts on 04:27PM on October 27, 2024.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"index.html\">\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>previewbox-link\u003C\u002Fspan> \u003Cspan class=pl-c1>href\u003C\u002Fspan>="\u003Cspan class=pl-s>https:\u002F\u002Fweb-highlights.com\u003C\u002Fspan>"\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>previewbox-link\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fd09e2367bf9228f2d440610989d7ea8d\u002Fraw\u002F3dc0ce3754587c0b63751875d0958e5cc2deb5ee\u002Findex.html\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fd09e2367bf9228f2d440610989d7ea8d#file-index-html\" class=\"Link--inTextBlock\">\n          index.html\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>The data gets automatically fetched and you should see this link preview:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*ug5OHv3OnqQUOzVXchWjRw.png\"\n    class=\"kg-image\"\n    alt=\"Link Preview component\"\n    loading=\"lazy\"\n    width=\"1406\"\n    height=\"332\"\n  \u002F>\n  \u003Cfigcaption>\u003Cspan style=\"white-space: pre-wrap\">Link Preview component\u003C\u002Fspan>\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  \u003Ca href=\"https:\u002F\u002Fpreviewbox.link\u002Fdocs\u002Fcomponents\u002Fpreviewbox-article\" rel=\"noopener\">\n    \u003Cstrong>\u003Ccode>previewbox-article\u003C\u002Fcode>\u003C\u002Fstrong>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp>\n  The previewbox-article component is perfect for showing a preview of an article. Simply pass the URL of the article\n  and we will fetch the data for you.\n\u003C\u002Fp>\n\u003Cp>\n  Simply add this HTML to your website to use the\n  \u003Ccode>previewbox-article\u003C\u002Fcode>\n  component:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist133654108\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-index-html\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-html  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"index.html content, created by MariusBongarts on 04:31PM on October 27, 2024.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"index.html\">\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>previewbox-article\u003C\u002Fspan> \u003Cspan class=pl-c1>href\u003C\u002Fspan>="\u003Cspan class=pl-s>https:\u002F\u002Fweb-highlights.com\u003C\u002Fspan>"\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>previewbox-article\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F49c5a9952cabc27d8e80643015c0fb73\u002Fraw\u002Fbba464e4550c5eac133c3f82b15075ae856bb483\u002Findex.html\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F49c5a9952cabc27d8e80643015c0fb73#file-index-html\" class=\"Link--inTextBlock\">\n          index.html\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*EcQAKoyIO4WtohfAhOwxSQ.png\"\n    class=\"kg-image\"\n    alt=\"Previewbox Article\"\n    loading=\"lazy\"\n    width=\"1718\"\n    height=\"870\"\n  \u002F>\n  \u003Cfigcaption>\u003Cspan style=\"white-space: pre-wrap\">Previewbox Article\u003C\u002Fspan>\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Ch3 id=\"final-thoughts\">Final Thoughts\u003C\u002Fh3>\n\u003Cp>The Previewbox components should make it very easy to add a simple link preview to any website.\u003C\u002Fp>\n\u003Cp>As the components automatically fetch the data, you don’t need a server and you can directly use them.\u003C\u002Fp>\n\u003Cp>\n  For more information, check out the\n  \u003Ca href=\"https:\u002F\u002Fpreviewbox.link\u002Fdocs\u002F\" rel=\"noopener\">official documentation\u003C\u002Fa>\n  .\n\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Cp>Thanks for reading!\u003C\u002Fp>\n\u003Cp>\n  I always appreciate feedback — connect with me on\n  \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fmarius-bongarts\u002F\" rel=\"noopener ugc nofollow noopener\">LinkedIn\u003C\u002Fa>\n  or\n  \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fmariusbongarts\" rel=\"noopener ugc nofollow noopener\">Twitter\u003C\u002Fa>\n  , or drop a comment.\n\u003C\u002Fp>\n\u003Cp>\n  With over 100,000 users and an average rating of 4.8 stars in the Google Chrome Store,\n  \u003Cstrong>Web Highlights\u003C\u002Fstrong>\n  makes digital organization simple. It’s free to use, and no account is required. You can\n  \u003Ca href=\"https:\u002F\u002Ftooltivity.com\u002Fextensions\u002Fweb-highlights\u002Finstall\" rel=\"noopener ugc nofollow noopener\">\n    install it here\n  \u003C\u002Fa>\n  .\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*2oNgnDklsLynueivBEvN7Q.png\"\n    class=\"kg-image\"\n    alt=\"Web Highlights — PDF & Web Highlighter\"\n    loading=\"lazy\"\n    width=\"1560\"\n    height=\"378\"\n  \u002F>\n  \u003Cfigcaption>\n    \u003Ca href=\"https:\u002F\u002Fweb-highlights.com\u002F\" target=\"_blank\" rel=\"noopener\">\n      \u003Cspan style=\"white-space: pre-wrap\">Web Highlights — PDF & Web Highlighter\u003C\u002Fspan>\n    \u003C\u002Fa>\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Ch3 id=\"most-loved-%F0%9F%94%A5\">Most Loved 🔥\u003C\u002Fh3>\n\u003Cfigure class=\"kg-card kg-bookmark-card\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fforget-about-marketing-focus-on-building-an-awesome-product\u002F\"\n  >\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">Forget About Marketing. Focus on Building The Best Product.\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">\n        I completely focused on building the best PDF & Web Highlighter Chrome Extension and stopped marketing for 3\n        months — here is what happened.\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg class=\"kg-bookmark-icon\" src=\"https:\u002F\u002Fstatic.ghost.org\u002Fv5.0.0\u002Fimages\u002Flink-icon.svg\" alt=\"\" \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Web Highlights Blog\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg\n        src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1519904981063-b0cf448d479e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDN8fHBlYWt8ZW58MHx8fHwxNzA5NTEzNjQxfDA&ixlib=rb-4.0.3&q=80&w=2000\"\n        alt=\"\"\n        onerror=\"this.style.display = 'none'\"\n      \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n\u003C\u002Ffigure>\n\u003Cfigure class=\"kg-card kg-bookmark-card\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Fweb-highlights.com\u002Fblog\u002F3-unusually-painful-mistakes-on-my-side-project-journey\u002F\"\n  >\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">3 Unusually Painful Mistakes on My Side Project Journey to 100K Users\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">\n        Discover the three unusually painful mistakes I made on my side project journey and how to avoid them. Get tips\n        for smoother project execution.\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg class=\"kg-bookmark-icon\" src=\"https:\u002F\u002Fstatic.ghost.org\u002Fv5.0.0\u002Fimages\u002Flink-icon.svg\" alt=\"\" \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Web Highlights Blog\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg\n        src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1456406644174-8ddd4cd52a06?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDN8fHNjYXJlZCUyMGxhcHRvcHxlbnwwfHx8fDE3MTQ3MTUwMDh8MA&ixlib=rb-4.0.3&q=80&w=2000\"\n        alt=\"\"\n        onerror=\"this.style.display = 'none'\"\n      \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n\u003C\u002Ffigure>\n\u003Cfigure class=\"kg-card kg-bookmark-card\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Fweb-highlights.com\u002Fblog\u002F3-instant-ways-to-increase-your-google-ranking\u002F\"\n  >\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">3 Instant Ways to Increase Your Google Ranking\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">\n        Anyone can implement these three essential points to make their product visible on Google, Bing, and Co.\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg class=\"kg-bookmark-icon\" src=\"https:\u002F\u002Fstatic.ghost.org\u002Fv5.0.0\u002Fimages\u002Flink-icon.svg\" alt=\"\" \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Web Highlights Blog\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg\n        src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1635944095210-23114a1fb7c0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDF8fGljZWJlcmd8ZW58MHx8fHwxNjY3MDM4MjA0&ixlib=rb-4.0.3&q=80&w=2000\"\n        alt=\"\"\n        onerror=\"this.style.display = 'none'\"\n      \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n\u003C\u002Ffigure>\n","Marius Bongarts","https:\u002F\u002Fwww.facebook.com\u002FMariusBongartsWeb","\u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F08\u002FIMG_7861_Square.jpeg","https:\u002F\u002Fmarius-bongarts.de\u002F","Founder & Software Engineer","https:\u002F\u002Ftwitter.com\u002FMariusBongarts",1321,[38,74,92],{"id":39,"slug":40,"title":41,"description":42,"url":43,"publishedAt":44,"createdAt":45,"updatedAt":46,"featured":19,"readingTime":20,"tags":47,"imageUrl":52,"imageAlt":53,"faviconUrl":54,"publishedAtString":44,"category":55,"readTimeString":73},"688719cf8b4b770aa39407fc","my-simple-strategy-for-3-268-5-star-chrome-extension-reviews","My Simple Strategy for 3,268 5‑Star Chrome Extension Reviews","Get 37x more reviews than Grammarly with this simple strategy. Learn the Win-Ask Method to boost your Chrome extension ratings and user engagement.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fmy-simple-strategy-for-3-268-5-star-chrome-extension-reviews\u002F","2025-07-28T06:48:26.000+00:00","2025-07-28T06:33:51.000+00:00","2025-07-28T07:04:33.000+00:00",[48,49,50,51],"Marketing","Side Projects","Side Hustle","Chrome Extension","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1633613286991-611fe299c4be?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDF8fHJhdGluZ3xlbnwwfHx8fDE3NTM2ODQ0MzR8MA&ixlib=rb-4.1.0&q=80&w=2000","Five yellow star-shaped objects placed diagonally on a pink and blue background.","https:\u002F\u002Fweb-highlights.com\u002Ffavicon.ico",[56,66],{"type":57,"title":58,"shortTitle":59,"icon":60,"description":61,"excerpt":62,"thumbnail":63},"my-journey","Behind the Scenes of Web Highlights","My Journey","rocket","Hey 👋 I am Marius. I started Web Highlights in 2019 as a tool just for myself and have been working on it alone since then. Learn from my mistakes and stories right from the beginning how I grew the Chrome Extension to 250K users without any marketing costs.","These posts are the honest build log of Web Highlights: what worked, what hurt, and what I’d do again. If you care about indie products, Chrome extensions, or SEO-led growth, you’ll find practical lessons alongside the personal story.",{"url":64,"alt":65},"https:\u002F\u002Fweb-highlights.com\u002Fimages\u002Fme.png","Me, Marius Bongarts, in front of sea in Portugal, Algarve",{"type":67,"title":68,"shortTitle":69,"icon":70,"description":71,"excerpt":72},"productivity","Browser Productivity & Chrome Extensions","Productivity","command","Curated extension lists, focus workflows, and tips for getting more from Chrome—always with an eye toward reading, capture, and learning.","Productivity isn’t only task managers. These articles cover the browser layer: extensions that protect focus, comparisons that save you from dead-end tools, and setup tips that keep your reading and capture stack lightweight but powerful.","6 min read",{"id":75,"slug":76,"title":77,"description":78,"url":79,"publishedAt":80,"createdAt":81,"updatedAt":82,"featured":19,"readingTime":83,"tags":84,"imageUrl":86,"imageAlt":87,"faviconUrl":54,"publishedAtString":80,"category":88,"readTimeString":91},"66ed6878e07b961e2f231a8f","lessons-from-a-bamboo-tree-staying-motivated-on-my-side-project","Five Years to 100K Users: The Bamboo Tree Story for Side Project Growth","Discover how a bamboo tree can inspire solopreneurs to stay motivated on side projects. Learn the value of delayed gratification on the journey to success.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Flessons-from-a-bamboo-tree-staying-motivated-on-my-side-project\u002F","2024-09-22T20:17:54.000+00:00","2024-09-20T12:20:08.000+00:00","2024-09-24T07:00:43.000+00:00",7,[59,85,49,50],"Story","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F09\u002F0_JjFAqJ78cyJMViqZ.webp","Tall Bamboo Tree",[89],{"type":57,"title":58,"shortTitle":59,"icon":60,"description":61,"excerpt":62,"thumbnail":90},{"url":64,"alt":65},"7 min read",{"id":93,"slug":94,"title":95,"description":96,"url":97,"publishedAt":98,"createdAt":99,"updatedAt":100,"featured":101,"readingTime":102,"tags":103,"imageUrl":104,"imageAlt":105,"faviconUrl":54,"publishedAtString":98,"category":106,"readTimeString":109},"66711bbfe00bcb071a2ced9b","3-practical-growth-hacks-i-applied-to-scale-my-chrome-extension-to-100k-users-without-any-marketing-budget","How I Grew My Chrome Extension to 100K Users Without Marketing Costs","Learn how I grew my Chrome Extension to 100K users without a budget. Explore growth hacks, SEO tips, user review strategies, and product-building insights.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002F3-practical-growth-hacks-i-applied-to-scale-my-chrome-extension-to-100k-users-without-any-marketing-budget\u002F","2024-06-18T05:33:56.000+00:00","2024-06-18T05:31:43.000+00:00","2024-09-01T19:43:00.000+00:00",true,4,[23,26,50,48,59],"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1636819488524-1f019c4e1c44?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDEyfHxyb2NrZXR8ZW58MHx8fHwxNzE4NjE4NTcxfDA&ixlib=rb-4.0.3&q=80&w=2000","3 Practical Growth Hacks I Applied To Scale My Chrome Extension to 100K Users Without Any Marketing Budget",[107],{"type":57,"title":58,"shortTitle":59,"icon":60,"description":61,"excerpt":62,"thumbnail":108},{"url":64,"alt":65},"4 min read"]