I've recently learned that for SEO there is usually a sweet spot under 60 characters f

Would it be appropriate to have a warning on <title> character limits? about svelte-seo HOT 14 CLOSED

artiebits commented on May 21, 2024 2

Would it be appropriate to have a warning on character limits?<p>from svelte-seo.</p></section> </section> </article> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7917632214101949" data-ad-slot="6627871389" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <article> <h2 class="h2">Comments (14)</h2> <section class="issue-comment"> <section id="1025217003" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/63173187?v=4" alt="lubiah avatar" /> <a class="issue-username" href="/lubiah">lubiah</a> <span class="issue-time"> commented on May 21, 2024 </span> <span class="issue-vote"> <i class="icon-vote"></i>3 </span> </section> <section class="markdown markdown-js p-5"><blockquote> <p dir="auto">Seems to be a good idea. Would you like to work on it?</p> </blockquote> <p dir="auto">You can assign it to me, will be glad to work on it😊</p><p>from svelte-seo.</p></section> </section> <section class="issue-comment"> <section id="1025424151" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/29281882?v=4" alt="artiebits avatar" /> <a class="issue-username" href="/artiebits">artiebits</a> <span class="issue-time"> commented on May 21, 2024 </span> <span class="issue-vote"> <i class="icon-vote"></i>1 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">@kudadam thanks a lot!</p><p>from svelte-seo.</p></section> </section> <section class="issue-comment"> <section id="1025780295" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/451461?s=30&v=4" alt="Glench avatar" /> <a class="issue-username" href="/Glench">Glench</a> <span class="issue-time"> commented on May 21, 2024 </span> <span class="issue-vote"> <i class="icon-vote"></i>1 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">If it's possible, a warning at compile time would be even better!</p><p>from svelte-seo.</p></section> </section> <section class="issue-comment"> <section id="1025829055" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/451461?s=30&v=4" alt="Glench avatar" /> <a class="issue-username" href="/Glench">Glench</a> <span class="issue-time"> commented on May 21, 2024 </span> <span class="issue-vote"> <i class="icon-vote"></i>1 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Both, since both dev and build require compiling. That appears to be what the current warnings do in SvelteKit. And outside of SvelteKit compile-time warnings would be useful in other frameworks. No idea if it's possible to raise compile-time warnings from a component though.</p><p>from svelte-seo.</p></section> </section> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7917632214101949" data-ad-slot="6627871389" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <section class="issue-comment"> <section id="1045963657" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/63173187?v=4" alt="lubiah avatar" /> <a class="issue-username" href="/lubiah">lubiah</a> <span class="issue-time"> commented on May 21, 2024 </span> <span class="issue-vote"> <i class="icon-vote"></i>1 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">A fixed has been provided so the isssue can now be closed</p><p>from svelte-seo.</p></section> </section> <section class="issue-comment"> <section id="1024858653" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/63173187?v=4" alt="lubiah avatar" /> <a class="issue-username" href="/lubiah">lubiah</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Well, the idea seems cool</p><p>from svelte-seo.</p></section> </section> <section class="issue-comment"> <section id="1025105812" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/29281882?v=4" alt="artiebits avatar" /> <a class="issue-username" href="/artiebits">artiebits</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Seems to be a good idea. Would you like to work on it?</p><p>from svelte-seo.</p></section> </section> <section class="issue-comment"> <section id="1025182408" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/451461?s=30&v=4" alt="Glench avatar" /> <a class="issue-username" href="/Glench">Glench</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Me? Unfortunately I don't have the time.</p><p>from svelte-seo.</p></section> </section> <section class="issue-comment"> <section id="1025599871" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/63173187?v=4" alt="lubiah avatar" /> <a class="issue-username" href="/lubiah">lubiah</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Quick question <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/artiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/artiebits">@artiebits</a> , is the warning going to be displayed in some sort of modal to the user or it will be displayed in the console?</p><p>from svelte-seo.</p></section> </section> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7917632214101949" data-ad-slot="6627871389" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <section class="issue-comment"> <section id="1025781676" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/29281882?v=4" alt="artiebits avatar" /> <a class="issue-username" href="/artiebits">artiebits</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">good one, I agree with <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Glench/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Glench">@Glench</a></p><p>from svelte-seo.</p></section> </section> <section class="issue-comment"> <section id="1025821192" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/63173187?v=4" alt="lubiah avatar" /> <a class="issue-username" href="/lubiah">lubiah</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><blockquote> <p dir="auto">If it's possible, a warning at compile time would be even better!</p> </blockquote> <p dir="auto">As in when it's being run in <code class="notranslate">dev</code> or <code class="notranslate">build</code>?</p><p>from svelte-seo.</p></section> </section> <section class="issue-comment"> <section id="1025838689" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/63173187?v=4" alt="lubiah avatar" /> <a class="issue-username" href="/lubiah">lubiah</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><blockquote> <p dir="auto">Both, since both dev and build require compiling. That appears to be what the current warnings do in SvelteKit. And outside of SvelteKit compile-time warnings would be useful in other frameworks. No idea if it's possible to raise compile-time warnings from a component though.</p> </blockquote> <p dir="auto">Am gonna try and see</p><p>from svelte-seo.</p></section> </section> <section class="issue-comment"> <section id="1067179973" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/29281882?v=4" alt="artiebits avatar" /> <a class="issue-username" href="/artiebits">artiebits</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">i am going to close this issue for now, because I believe it needs more attention and opinions. As it was discussed in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1144604553" data-permission-text="Title is private" data-url="https://github.com/artiebits/svelte-seo/issues/27" data-hovercard-type="pull_request" data-hovercard-url="/artiebits/svelte-seo/pull/27/hovercard" href="https://github.com/artiebits/svelte-seo/pull/27">#27</a> what if I have a perfect title for my page but it is 61 characters long? Then this warning would annoy me.</p><p>from svelte-seo.</p></section> </section> <section class="issue-comment"> <section id="1067377281" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/63173187?v=4" alt="lubiah avatar" /> <a class="issue-username" href="/lubiah">lubiah</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Yeah you are right 😞</p><p>from svelte-seo.</p></section> </section> </article> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7917632214101949" data-ad-slot="6627871389" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <section> <h2 class="h2">Related Issues (17)</h2> <div class="issue"> <ul> <li> <a href="/artiebits/svelte-seo/issues/14">Canonical doesn't seems to work ?</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 4</span> </li> <li> <a href="/artiebits/svelte-seo/issues/17">Include `<slot/>` between `<svelte:head>` tags</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 5</span> </li> <li> <a href="/artiebits/svelte-seo/issues/18">Include additional options for `og:type`</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 6</span> </li> <li> <a href="/artiebits/svelte-seo/issues/22">Duplicate json-ld schemas</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 4</span> </li> <li> <a href="/artiebits/svelte-seo/issues/28">Automatically filling OpenGraph and Twitter cards object with data from the title and description tags</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/artiebits/svelte-seo/issues/29">Open Graph not working in Svelte Kit</a> </li> <li> <a href="/artiebits/svelte-seo/issues/30">JSON-LD stringification is non-standard</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 3</span> </li> <li> <a href="/artiebits/svelte-seo/issues/43">Minimun required Fields from Backend?</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 8</span> </li> <li> <a href="/artiebits/svelte-seo/issues/44">Suggesting a complete rewrite of this library</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 4</span> </li> <li> <a href="/artiebits/svelte-seo/issues/49">Argument of type 'typeof SvelteSeo' is not assignable to parameter of type ConstructorOfATypedSvelteComponent ......</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 4</span> </li> <li> <a href="/artiebits/svelte-seo/issues/6">Request Feature Keyword</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 3</span> </li> <li> <a href="/artiebits/svelte-seo/issues/61">Tags do not get updated on Sveltekit single page app</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/artiebits/svelte-seo/issues/68">SPA prerender</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/artiebits/svelte-seo/issues/69">User Provided LD+JSON assigned to a `data` property in a wrapper object</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/artiebits/svelte-seo/issues/73">Export declarations for Svelte and Vite not present</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/artiebits/svelte-seo/issues/78">Layout wont get overwritten by Page, but appends. </a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 7</span> </li> </ul> </div> </section> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7917632214101949" data-ad-slot="6627871389" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </main> <section id="more" class="flex-none w-full md:w-60 text-gray-600 bg-gray-50 px-5 md:px-3 rounded-md dark-color"> <div class="w-full md:w-60 h-0.5"></div> <section> <a href="https://glbgpt.com?ref=githubhelp" target="_blank" class="block"> <article id="right-girl-box" class="small-box overflow-hidden" style="padding:0;"></article> </a>  <h2 class="h2 py-3.5">Recommend Projects</h2> <ul> <li class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7917632214101949" data-ad-slot="6627871389" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/facebook/react"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://raw.githubusercontent.com/facebook/create-react-app/master/packages/cra-template/template/public/logo192.png" alt="React photo" /> React </a> </h3> <p class="article-more pt-1">A declarative, efficient, and flexible JavaScript library for building user interfaces.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/vuejs/vue"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" alt="Vue.js photo" /> Vue.js </a> </h3> <p class="article-more pt-1">🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/microsoft/TypeScript"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://www.typescriptlang.org/favicon-32x32.png" alt="Typescript photo" /> Typescript </a> </h3> <p class="article-more pt-1">TypeScript is a superset of JavaScript that compiles to clean JavaScript output.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/tensorflow/tensorflow"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/c04e16c05de80dadbdc990884672fc941fdcbbfbb02b31dd48c248d010861426/68747470733a2f2f7777772e74656e736f72666c6f772e6f72672f696d616765732f74665f6c6f676f5f736f6369616c2e706e67" alt="TensorFlow photo" /> TensorFlow </a> </h3> <p class="article-more pt-1">An Open Source Machine Learning Framework for Everyone</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/django/django"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars2.githubusercontent.com/u/27804?s=200&v=4" alt="Django photo" /> Django </a> </h3> <p class="article-more pt-1">The Web framework for perfectionists with deadlines.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/laravel/laravel"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://laravel.com/img/logomark.min.svg" alt="Laravel photo" /> Laravel </a> </h3> <p class="article-more pt-1">A PHP framework for web artisans</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/d3/d3"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667" alt="D3 photo" /> D3 </a> </h3> <p class="article-more pt-1">Bring data to life with SVG, Canvas and HTML. 📊📈🎉</p> </article> </li> <li> <div> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7917632214101949" data-ad-slot="6627871389" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </li> </ul> </section> <section>  <h2 class="h2 py-3.5">Recommend Topics</h2> <ul> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/javascript"> javascript </a> </h3> <p class="article-more pt-1">JavaScript (JS) is a lightweight interpreted programming language with first-class functions.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/web"> web </a> </h3> <p class="article-more pt-1">Some thing interesting about web. New door for the world.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/server"> server </a> </h3> <p class="article-more pt-1">A server is a program made to process requests and deliver data to clients.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/machine-learning"> Machine learning </a> </h3> <p class="article-more pt-1">Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/visualization"> Visualization </a> </h3> <p class="article-more pt-1">Some thing interesting about visualization, use data art</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/game"> Game </a> </h3> <p class="article-more pt-1">Some thing interesting about game, make everyone happy.</p> </article> </li> <li> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7917632214101949" data-ad-slot="6627871389" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </li> </ul> </section> <section>  <h2 class="h2 py-3.5">Recommend Org</h2> <ul> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/facebook"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/69631?v=4" alt="Facebook photo" /> Facebook </a> </h3> <p class="article-more pt-1">We are working to build community through open source technology. NB: members must have two-factor auth.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/microsoft"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/6154722?v=4" alt="Microsoft photo" /> Microsoft </a> </h3> <p class="article-more pt-1">Open source projects and samples from Microsoft.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/google"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1342004?v=4" alt="Google photo" /> Google </a> </h3> <p class="article-more pt-1">Google ❤️ Open Source for everyone.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/alibaba"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1961952?v=4" alt="Alibaba photo" /> Alibaba </a> </h3> <p class="article-more pt-1">Alibaba Open Source for everyone</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/d3"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1562726?v=4" alt="D3 photo" /> D3 </a> </h3> <p class="article-more pt-1">Data-Driven Documents codes.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/tencent"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/18461506?v=4" alt="Tencent photo" /> Tencent </a> </h3> <p class="article-more pt-1">China tencent open source team.</p> </article> </li> <li> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7917632214101949" data-ad-slot="6627871389" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </li> </ul> </section> </section> </div> </div>  <footer class="sizeing text-xs text-center p-5"> <div>Friends: <a class="hover:underline" target="_blank" href="https://www.chanpinqingbaoju.com">ProductDiscover</a> </div> Copyright © 2024 Coder Social  ❤️ <a class="hover:underline block md:inline" href="mailto:cs.victor.edison@gmail.com">Mail to me</a> </footer> </body> </html>