Next JS SEO dynamic Title - next.js

Im using a custom app.js and setting the SEO fields inside the head tag. I noticed that on the initial load the SEO title and other information are set in the head tags and when using the router to redirect to a new page, the SEO set initially will be there in the head tags but the title changes to the URL of the new route.
for example, the initial load the title of the tab would be WELCOME and the user clicks on a button that would redirect to someDomain.com/HEY. Now the WELCOME title is overwritten by someDomain.com/HEY, however, if I refresh the page when in the HEY page, I can see WELCOME title till the HEY page API calls are done.
As a temp fix, I am setting a title for all these pages in the respective head tags and the other fields have to be common. is this a good approach to set the SEO fields?

I recommend using next-seo (https://www.npmjs.com/package/next-seo).
It allows you to have a default config used for every page and override it where needed.

Related

Classes on the body tag are same after redirecting to other pages

I am a new guy in the wordpress development town. I have mobius theme installed in wordpress. And implemented one child theme for that. I'm using style.css for styling all the pages. As i'm using one css for multiple pages I am checking the class on the body to ensure my styles will get applied on that page only. This is very important for me to have the required class with page id on the body tag. But all the classes are getting messed up after redirecting to any other page.
This is scenario happening with me.
Classes on the body present when visited home page for first time was:
'home page page-id-40 page-template-default'
After redirecting to other pages e.g. 'meet the team' page, I was expecting to have different classes. 'page page-id-1195 page-template-default'. But the classes on the body tags are unaffected.
But If I refresh the redirected page 'meet the team' I can see all the expected classes on the body tag.
Since your theme is using ajax to load page content, you must follow the way it works when trying to implement custom style and javascript.
Your theme must have some javascript functions which trigger ajax call to get a new page and then replace the current page content with it. Find those functions and add your custom js based on the loaded page in its ajax callback function.
I see it is using jQuery, so you can refer to the documentation:
http://api.jquery.com/jquery.ajax/
http://api.jquery.com/jquery.get/
Your style could be done the same way, but it's better to provide all custom styles during the first page load.

How do i add a page to a wordpress site?

I need to add a page to a wordpress site. However, for legal reasons, the page cannot be placed in/managed by wordpress as we are not allowed to make any changes to the page or it's content. How can I add this page to our site, but keep it outside wordpress management.
Odd request, but here's one idea:
Create a page template with no dynamic content from the post, load this content into it. The only way to edit the file would be through raw code. Anything entered into the post/page content area would not appear.

Site Does Not Reflect Edits Inside Wordpress CMS

Anything I do inside our Wordpress CMS for some of our pages does not reflect on the actual website. It's like as if it's disconnected. The other pages are confirmed connected though.
Why is this and where should I look especially that it happens only to selected pages?
Btw, I probably should've indicated a sample of the problematic pages. Here's one: http://www.criminal-lawyers.com.au/courts/locations.
Look the template of effected pages.
Take that page on admin panel on the right side of that page you can see page attribute section ,Look on the template that set for that page. It may be a static template that do not accept the content.
Just change the template to default template.
Then view that page .If content are reflected then request the developer to do that in the selected template also.
(NOTICE:entire style of the page is lost.You need to reselect to previous template and save it after seeing the change )

Like button on each page

I have a like button on my main page (master page in asp.net).
I added a like button on each dynamic page.
When I try to enter the link:
http://www.friend.co.il/details.aspx?id=2321
to one of the dynamic page in face book developer page:
http://developers.facebook.com/docs/reference/plugins/like/
I get the same number of like as the total site number and not just a number for the specific page.
Any body know whats I'm doing wrong?
Using Facebook's URL Linter on your dynamic page's URL shows that it has Open Graph tags that refer to your website's main page. As a result, Facebook thinks that the canonical URL for http://www.friend.co.il/details.aspx?id=2321 is http://www.friend.co.il/.
You should either remove the meta tags from your subpages, or construct them so that they properly represent the content on each page.
Remove your og:url meta tag and also be sure to not include the Facebook javascript file multiple times like you are currently doing.

Changing open graph image tag based on blog post item

I am maintaining a wordpress blog and am familiar with using the og:image meta tag to set the default image that is included when a like button is pressed. What I want to know is if there is a way to make this image dynamic based on the item liked.
I am trying to build it so that the first image in a particular blog post that is liked is what is pushed to the facebook feed post, with the blog's default image only used if there is no image in the post. Does facebook provide any way to do this with the graph api?
I tried writing javascript to change the meta tag on article pages (rather than the homepage) but found out later the crawler does not run javascript, so am now considering implementing the same but server side with PHP. This still would not solve the problem of Likes from the blog homepage, where there are multiple blog items on the page though. Any advice would be greatly appreciated.
Thanks
The only is changing how the meta tags get rendered to the client, in server code or in your layout template. There is no graph api method for this and you can't modify the tags with javascript as their scraper doesn't execute javascript.
Also, the scraper won't keep re-visiting your site so once it access it, it will be cached until you go to the url linter tool manually. so for the home page, you would probably just want the default image.

Resources