<Link href={`/user/${username}`}>
<List.Item active={router.query.username === username}>
<List.Icon name="user" size="large" />
<List.Content>
<List.Header>
<a>Account</a>
</List.Header>
</List.Content>
</List.Item>
</Link>
If I use the next Link in the way above, my a tag is not a direct child of the next Link and my question is: is the href passed from Link to the a tag ? Otherwise I think It could hurt my web site SEO
(I now I can directly use Link around the a tag, I ask this because it could save my some styling)
Related
I have a post card, which if clicked brings you to the post's page, i also have a link inside the post card which when clicked brings you to the album of posts the post is from.
The code structure is similar to this one:
<Link href={post.url} className={styles.post}>
...title and stuff
<Link href={post.groupUrl}>
{post.group}
</Link>
</Link>
It worked before updating to Nextjs 13
This is less of a Next.js bug because, at the end, the Link component is just a fancy a tag and also gets rendered as one in the DOM. And, as you can read here, nesting links is illegal.
Both links work exactly the same, do we really need to use the as, can't we use just the href?
import Link from 'next/link'
export default function () {
return (<>
<Link href="/someroute">
<a>WithOUT as</a>
</Link>
<br />
<br />
<Link href="/[param]" as="/someroute">
<a>With as</a>
</Link>
</>
)
}
"as" is used to have a nicer url. for example, since you are in a dynamic route, that param can be something very crazy, maybe a mongodb id or any hash value
// mongodb id
/507f191e810c19729de860ea
// maybe ipfs hash
/mtwirsqawjuoloq2gvtyug2tc3jbf5htm2zeo4rsknfiv3fdp46a
From early docs
href is a file system path used by the page and it shouldn't change at
runtime. as on the other hand, will be dynamic most of the time
according to your needs.
So when next.js navigates, to decide which page to render, it will look at the href but to decide which url to show the user, it will look at the as
when "as" is helpful
Let's say you have a DynamicPostComponent and you are passing post prop
const DynamicPostComponent = ({post}) => {}
Inside this component, you would tell next.js where to go in pages directory. so you use href
// assume we have "pages/posts/[slug]" directory
href="/posts/[slug]"
now inside the page you need to read the id of blog so that you have to fetch the post to show the user. for this you use as
as={`/posts/${post.slug}`
Your Link compnent will look like this
<Link href="/postss/[slug]" as={`/posts/${post.slug}`}>
<a>
</a>
</Link>
as is removed after v10. https://nextjs.org/blog/next-10
Automatic Resolving of href: The as property is no longer needed on next/link
How to enable images to be shown when a link is shared in whatsapp? Like the link above from amprandom.blogspot.com.
OG tags modified as needed. Still does not show images. How to get it work?
You can use the Sharing Debugger to see the information that is used when your website content is shared on Facebook, Messenger and other places. The Batch Invalidator will let you refresh this information for multiple URLs at the same time. Open Graph markup lets you take control over how your website content appears to others.
Reference: https://developers.facebook.com/tools/debug/
Steps:
Add needed og tags ex. og:title, og:image, etc in your website code.
After adding necessary tags, go to Sharing Debugger and enter your website URL there.
Click on Debug. It will show all the data scrapped by it and refreshes them.
Next time you share your website/link, it will scrap metadata added to it.
Edit:
You need to add itemprop to the og:image meta-tag
Ex: change value of url_image to your image/ logo/ favicon url.
<meta property="og:image" itemprop="image" content="url_image">
Thumbnail schema from schema.org inside for WhatsApp
<link itemprop="thumbnailUrl" href="url_image">
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="url_image">
</span>
I am working on a website for a client. They have marked up individual reviews that they display on their site with Microdata, but they have not included the corresponding aggregateRating property.
I have informed them that they need to include the aggregateRating propery in order to get Google to display stars in their organic listing. The client responded saying that this is okay, but I must hide any values associated with aggregateRating - (ratingValue, ratingCount) from the users who interact with their website.
I know that Google frowns upon this practice, but I want to know if anybody has had success hiding review Schema.org with CSS? By success I mean Google still displaying stars in organic listing.
There's no need to hide your schema using CSS. Not all schema data has to be shown on the web page. Consider JSON-LD schema, that's all in the head so none of those values are displayed.
HTML schema allows you to markup content that's not visible on the webpage.
From Schema.org:
Sometimes, a web page has information that would be valuable to mark up, but the information can't be marked up because of the way it appears on the page […]
[…]
<meta itemprop="ratingValue" content="4" />
Full code snippet:
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
<img src="four-stars.jpg" />
<meta itemprop="ratingValue" content="4" />
<meta itemprop="bestRating" content="5" />
Based on <span itemprop="ratingCount">25</span> user ratings
</div>
</div>
How to fill properly a specific tag attribute taking the content from the original page by using Diazo in the following case?
A skeleton for new site has several meta tags like this:
<meta name="Author" content="author" />
XPATH for the author in Plone default welcome page:
//span[#class='documentAuthor']/a
XPATH for the Author meta tag in the new theme skeleton:
/html/head/meta[#name='Author']
So I would like to fill the content="author" to be like content="Admin" from the original page.
You should not try to make this work.
This is about business things and theme should never try to do this kind of things.
This depends on the page. You will have many exceptions
* search page
* collection
* login page
* sitemap
On all theses pages it doesn't make sens to have an author meta.
So you should achieve your goal by creating an addon and developing 'viewlets'.
More on viewlet: http://developer.plone.org/views/viewlets.html
The best solution I have found so far is:
<replace theme="/html/head/meta[#name='Author']">
<xsl:variable name="auth" select="//span[#class='documentAuthor']/a" />
<meta name="Author" content="{$auth}" />
</replace>