I've tried to change meta tag content like
document.title = response.data.seo_page_title[0].text;
document.head.querySelector('meta[name=description]').content = response.data.seo_description;
it change the content when inspect the page but not when i use view soure. So Google, FB and Twitter can't recognize the updated content and doesn't load the proper text when i try to share the page on social media.
View Source shows the original source that has been fetched from the network - it is not the current snapshot of the page. As you have noticed - the current snapshot of the page is available in the DevTools. If you need Google / FB / etc. to see the proper text - you will have to produce this text on the server side (when composing the HTML template) instead of in the browser.
Related
I have an array of content coming from a database that will be displayed on a page as a group of FAQs. Some of the content will have links to other internal pages on the site. How do I link to the pages using Inertia's link component so that a full page refresh doesn't happen?
It depends on what is returned after using the link. If you return a full view in the response, the page is reloaded. If you return a small JSON object or something else, you can process it without full loading.
Can someone tell me why the following component is loaded when I refresh the browser?
Sandbox link: https://codesandbox.io/s/lucid-darkness-vwklt?file=/pages/index.vue
Let me explain.
What I want to happen and my expected output:
1.) Click "doss" --> Profile and Settings --> [The Profile Page with data is shown]
2.) Then, REFRESH/RELOAD the browser, the profile page is STILL shown with the same data
3.) The URL did not change.
What actually happens and the unexpected output:
1a.) Click "doss" --> Profile and Settings --> [The Profile Page with data is shown]
2a.) Then, REFRESH/RELOAD the browser, the profile page is NOT shown but instead another component is loaded with the title "The Post Detail Page" .
3a.) The URL did not change.
Why does #2a happen? The URL has not changed but the component did.
What am I doing wrong? Here is my NuxtJS folder structure:
To add a dynamic route in Nuxt, create a file starting with a dash. You already did that, which is totally fine, like;
_myPage.vue or add a folder named _myPage containg a index.vue file inside.
But your example won't work because nuxt is missing the "doss" route from your link / menu item.
Working example;
https://codesandbox.io/s/holy-voice-6pofd?file=/pages/doss/_displayName/index.vue
URL path will result in /doss/xxx
Also see; Nuxt dynamic pages
I published my website (a SPA made with vue) to Github-Pages. This website uses "history mode", so the # does not appear when navigating to a different "page".
When direct URL navigation (user types website.com/downloads for example) or a refresh while not on the root page happens, the website tries to display 404.html.
When the 404.html loads, it redirects to the homepage, passing the route name taken from the URL:
<script>
const segment = 1;
//Gets the relative path and the hash of the URL.
sessionStorage.redirect = location.pathname.split('/').slice(0, 1 + segment).join('/');
sessionStorage.hash = location.hash;
//Forces the navigation back to the main page, since it's the only entry point that works.
location.replace('/' + location.pathname.slice(1).split('/').slice(segment).join('/'));
</script>
For the user, it is a bit noticeable, but it will display the correct page.
But while loading, it will report a 404 in the network tab, which could cause issues in integrations with other websites.
Is there anyway to fake a 200 response when loading these pages?
This is a typical issue with Single Page Applications using history mode (history.pushState) to simulate a full URL so that a page isn’t reloaded when the URL changes.
Since vue.js is an SPA framework, it means there is only one HTML and tag containing the “app” id. Due to this disadvantage, Google bots would not be able to read the content of a particular landing page and your website might not get the higher rankings. To make Google bots read the content, you can use two method, “Pre-rendering” and “Server-side rendering.”
Also you can try using routing in <li> and <a> tags and buttons instead of href=“/path”. Using a router link makes page navigation very fast and it benefits the SEO of your website as well.
I'm trying to create a modified product page in my BigCommerce Cornerstone theme and I'm following the video on the following link:
https://stencil.bigcommerce.com/docs/custom-layout-templates
The video claims that I need to use a live URL when I create a new HTML under /template/pages/custom/product and map it in the .stencil file.
The way I created a new live URL is that I created a completely empty web page. The first difference I notice though, compared to the video is that when I navigate to the page it's not completely empty as shown in the video but shows the header and footer of the website.
When the video asks to copy the contents of the original product.html into my newly created HTML under /template/pages/custom/product, the HTML markup doesn't get picked up i.e. the page will not show components of a product page.
I got stuck at this point and cannot continue with modifying the template.
If you are creating a custom product template, you would need to map it to the live URL for a product in your store. Mapping a custom product template to a web content page won't work.
It's important to note the difference between page types. If you are creating a custom category template, you would map it to an existing category page in your store, etc.
After you map the product page URL in your .stencil file, be sure to restart Stencil CLI. You'll need to restart to see the changes reflected on localhost in your browser (i.e. a blank page at the product page url if you mapped an empty html file to it).
My goal is to display YouTube search results in my website based on a keywords search (e.g through YouTube API or GoogleCustomSearch using youtube.com), but change it so when you click on the link - instead of redirecting you to the youtube video page, it will get the link's URL and transfer it to a PHP file as a variable.
You can read the result page with a CURL command, and use regular expressions to change the link urls to a link to your own link, wrapping the target url.
Something like this :
http://www.youtube.com/watch?v=XJ87Lsx40PI
turn it into :
http://yoursite.com/youtube.php?XJ87Lsx40PI