search

near-in-minutes / frontend

NEAR in Minutes is a NEAR-COOP (NEAR Community Owned and Operated Project) that invites you to binge-watch lessons about the NEAR platform in your favorite language.
https://near-in-minutes.com
0 stars 0 forks source link

feat(global): add meta tags #69

Closed oceanByte closed 3 years ago

oceanByte commented 3 years ago

Google recommends (https://www.youtube.com/watch?v=Op8Q8bUAKNc) using meta tags in Vue apps as a best practice for google bot indexing to optimize link titles and link descriptions. In addition, open graph tags help users to get a better preview of the webpage when a link is shared on social media platforms like Twitter et al.

This PR utilizes the Vue 3 teleport feature to set the meta tags for all pages as the vue-meta library is not ported to Vue 3 yet (and we might not need it at all). In addition, it uses i18n to set the meta tags based on the selected language.

I recommend prioritizing the review of this pull request as it might improve visibility in google search (and potentially other search engines) and as I am not aware of the roadmap for this application I implemented the most straightforward version for now.

PS: Sorry, I committed this code to the main branch by accident. I fixed this by reverting my commit. So this PR is still necessary if you think that it is useful.

Edit: Seems like Twitter et all do not execute any Javascript so the open graph preview will not work. If we want to have this feature we should switch to SSR. The mentioned advantage for Google Search is still applicable though as their crawler executes Javascript (if our web app is quick enough).

render[bot] commented 3 years ago

Your Render PR Server URL is https://near-in-minutes-com-pr-69.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c3ollgc6fj33so8vbihg.

amgando commented 3 years ago

my understanding is that this would also require a change in the deployment architecture of the system -- we're currently running on a free static site instance on render.com -- this would require a server side component, right?

oceanByte commented 3 years ago

this would require a server side component, right?

Yes, this is correct. If we want to fully optimize for SEO then we would need SSR and need a server to run this properly as each page is pre-rendered on the server and only the rendered html/css/js files are sent to the user.

But for now, we can at least have these tags for the google bot crawlers. This PR works with the current system.

hiba-machfej commented 3 years ago

@amgando @oceanByte should I merge this PR?

oceanByte commented 3 years ago

@amgando @oceanByte should I merge this PR?

I'd argue it adds value to the project by potentially improving google bot indexing.

oceanByte commented 3 years ago 
<meta property="og:image" :content="@/assets/logo.png" />

This should resolve to something like "/img/logo.dbccf5a9.png" but Open Graph expects a full path. I created a preview image file in the public folder and linked it to that public file directly via https://near-in-minutes.com/og-preview-image.jpg.

This is not ideal for testing as it will always reference the prod system. It could be dynamic if we create the link during the build phase. But I chose this solution as changes to the preview images that must be tested specifically are unlikely to happen here.

oceanByte commented 3 years ago

@hiba-machfej can you help me to debug why the build is failing? I changed nothing but a URL

hiba-machfej commented 3 years ago

@hiba-machfej can you help me to debug why the build is failing? I changed nothing but a URL

You just need to run yarn fix. We just added some rules related to style.