Closed oceanByte closed 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.
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?
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.
@amgando @oceanByte should I merge this PR?
@amgando @oceanByte should I merge this PR?
I'd argue it adds value to the project by potentially improving google bot indexing.
<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.
@hiba-machfej can you help me to debug why the build is failing? I changed nothing but a URL
@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.
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).