Issue
My goal is to tell Google Search Console to crawl https://event.topoint.org in CSR.
My expected result was: The crawled html file app-root is not empty.
My actual result was: The crawled html file is just empty app-root.
The problem is: The crawled html is not consistent. Some have on empty app-root, some do not.
- https://event.topoint.org/experience/1 crawled html file is not just
app-root. - https://event.topoint.org/event/1 crawled html file is just
app-root.
The Source Code: https://github.com/jasonrichdarmawan/angular-structured-data-event-example
experience-page.html
<div style="border: 1px solid;">
<p>experience-page works!</p>
<ng-container *ngIf="experienceData else noExperienceData">
<p>id {{ experienceData.id }}</p>
<p>name {{ experienceData.name }}</p>
<ng-container *ngIf="experienceData.events else noEventData">
<ng-container *ngFor="let eventID of experienceData.events">
<a routerLink="/event/{{eventID}}">event {{ eventID }}</a>
</ng-container>
</ng-container>
<ng-template #noEventData>
<p>event not found</p>
</ng-template>
</ng-container>
<ng-template #noExperienceData>
<p>experience not found</p>
</ng-template>
</div>
event-page.component.html
<div style="border: 1px solid; padding: 8px;">
<p>event-page works!</p>
<ng-container *ngIf="eventData else noEventData">
<p>id {{ eventData.id }}</p>
<p>name {{ eventData.name }}</p>
<p *ngIf="eventData.description">description {{ eventData.description }}</p>
<p>startDate {{ eventData.startDate | date:'long' }}</p>
<p>endDate {{ eventData.endDate | date:'long' }} </p>
<p *ngIf="eventData.eventAttendanceMode">eventAttendanceMode {{ eventData.eventAttendanceMode }}</p>
<p *ngIf="eventData.eventStatus">eventStatus {{ eventData.eventStatus }}</p>
<div style="border: 1px solid; padding: 8px;" *ngIf="eventData.image">
<ng-container *ngFor="let img of eventData.image">
<img [src]="img">
</ng-container>
</div>
<div style="border: 1px solid; padding: 8px;" *ngIf="eventData.offers">
<ng-container *ngFor="let item of eventData.offers">
<div style="border: 1px solid; padding: 8px">
<p>offer type {{ item["@type"] }}</p>
<p>offer availability {{ item.availability }}</p>
<p>offer price {{ item.price }} </p>
<p>offer priceCurrency {{ item.priceCurrency }}</p>
<p>offer validFrom {{ item.validFrom }}</p>
<p>offer url {{ item.url }}</p>
</div>
</ng-container>
</div>
<div style="border: 1px solid; padding: 8px" *ngIf="eventData.organizer">
<p>organizer type {{ eventData.organizer['@type'] }}</p>
<p>organizer name {{ eventData.organizer.name }}</p>
<ng-container *ngIf="eventData.organizer['@type'] === 'Organization'">
<p>organizer url {{ (eventData.organizer | as : Organization).url }}</p>
</ng-container>
</div>
<div style="border: 1px solid; padding: 8px" *ngIf="eventData.performer">
<p>performer type {{ eventData.performer['@type'] }}</p>
<p>performer name {{ eventData.performer.name }}</p>
</div>
<div style="border: 1px solid; padding: 8px" *ngIf="eventData.previousStartDate">
<ng-container *ngFor="let item of eventData.previousStartDate">
<p>previousDate {{ item }}</p>
</ng-container>
</div>
</ng-container>
<ng-template #noEventData>
<p>event not found</p>
</ng-template>
</div>
The actual result:
<!DOCTYPE html>
<html lang="en"><head>
<title>AngularStructuredDataEventExample</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.ef46db3751d8e999.css"></head>
<body>
<app-root></app-root>
<script src="runtime.7611a4bdf3a12cea.js" type="module"></script><script src="polyfills.37aaad03170db895.js" type="module"></script><script src="main.5c0adfd072d8bbc3.js" type="module"></script>
</body></html>
The expected result
<!DOCTYPE html>
<html lang="en"><head>
<title>AngularStructuredDataEventExample</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.ef46db3751d8e999.css" /><style></style><script type="application/ld+json">{"@context":"https://schema.org","@type":"Event","id":"1","location":[{"@type":"VirtualLocation","url":"https://operaonline.stream5.com/"},{"@type":"Place","name":"Snickerpark Stadium","address":{"@type":"PostalAddress","streetAddress":"100 West Snickerpark Dr","addressLocality":"Snickertown","postalCode":"19019","addressCountry":"US","addressRegion":"PA"}}],"name":"The Adventures of Kesha and Macklemore","startDate":"2023-12-16T12:45:53.743Z","description":"The Adventures of Kira and Morrison is coming to Snickertown in a can't miss performance.","endDate":"2023-12-17T12:45:53.743Z","eventAttendanceMode":"https://schema.org/MixedEventAttendanceMode","eventStatus":"https://schema.org/EventScheduled","image":["https://example.com/photos/1x1/photo.jpg","https://example.com/photos/4x3/photo.jpg","https://example.com/photos/16x9/photo.jpg"],"offers":[{"@type":"Offer","availability":"https://schema.org/InStock","price":"30","priceCurrency":"USD","validFrom":"2023-12-15T12:45:53.743Z","url":"https://event.topoint.org/event/1"}],"organizer":{"@type":"Organization","name":"Kira and Morrison Music","url":"https://kiraandmorrisonmusic.com"},"performer":{"@type":"PerformingGroup","name":"Kira and Morrison"}}</script></head>
<body>
<app-root _nghost-poc-c5="" ng-version="13.3.12"><a _ngcontent-poc-c5="" routerlink="/experiences" href="/experiences">Experiences</a> |
<a _ngcontent-poc-c5="" routerlink="/events" href="/events">Events</a><router-outlet _ngcontent-poc-c5=""></router-outlet><app-event-page _nghost-poc-c6=""><div _ngcontent-poc-c6="" style="border: 1px solid; padding: 8px;"><p _ngcontent-poc-c6="">event-page works!</p><p _ngcontent-poc-c6="">id 1</p><p _ngcontent-poc-c6="">name The Adventures of Kesha and Macklemore</p><p _ngcontent-poc-c6="">description The Adventures of Kira and Morrison is coming to Snickertown in a can't miss performance.</p><!----><p _ngcontent-poc-c6="">startDate December 16, 2023 at 4:45:53 AM GMT-8</p><p _ngcontent-poc-c6="">endDate December 17, 2023 at 4:45:53 AM GMT-8 </p><p _ngcontent-poc-c6="">eventAttendanceMode https://schema.org/MixedEventAttendanceMode</p><!----><p _ngcontent-poc-c6="">eventStatus https://schema.org/EventScheduled</p><!----><div _ngcontent-poc-c6="" style="border: 1px solid; padding: 8px;"><img _ngcontent-poc-c6="" src="https://example.com/photos/1x1/photo.jpg" /><!----><img _ngcontent-poc-c6="" src="https://example.com/photos/4x3/photo.jpg" /><!----><img _ngcontent-poc-c6="" src="https://example.com/photos/16x9/photo.jpg" /><!----><!----></div><!----><div _ngcontent-poc-c6="" style="border: 1px solid; padding: 8px;"><div _ngcontent-poc-c6="" style="border: 1px solid; padding: 8px;"><p _ngcontent-poc-c6="">offer type Offer</p><p _ngcontent-poc-c6="">offer availability https://schema.org/InStock</p><p _ngcontent-poc-c6="">offer price 30 </p><p _ngcontent-poc-c6="">offer priceCurrency USD</p><p _ngcontent-poc-c6="">offer validFrom 2023-12-15T12:45:53.743Z</p><p _ngcontent-poc-c6="">offer url https://event.topoint.org/event/1</p></div><!----><!----></div><!----><div _ngcontent-poc-c6="" style="border: 1px solid; padding: 8px;"><p _ngcontent-poc-c6="">organizer type Organization</p><p _ngcontent-poc-c6="">organizer name Kira and Morrison Music</p><p _ngcontent-poc-c6="">organizer url https://kiraandmorrisonmusic.com</p><!----><!----></div><!----><div _ngcontent-poc-c6="" style="border: 1px solid; padding: 8px;"><p _ngcontent-poc-c6="">performer type PerformingGroup</p><p _ngcontent-poc-c6="">performer name Kira and Morrison</p></div><!----><!----><!----><!----><!----></div></app-event-page><!----> This is a live test.
<a _ngcontent-poc-c5="" href="https://github.com/jasonrichdarmawan/angular-structured-data-event-example">Source Code</a>
by <a _ngcontent-poc-c5="" href="https://github.com/jasonrichdarmawan">Jason Rich Darmawan</a></app-root>
<script src="runtime.84ecdfabc7408ad4.js" type="module"></script><script src="polyfills.37aaad03170db895.js" type="module"></script><script src="main.1b11d2bb5473d983.js" type="module"></script>
</body></html>
Solution
If you want consistant and efficient SPA indexation there are no magic tricks.
You have 2 options:
- Enable prerendering
- Switch to SSR.
Answered By - Matthieu Riegler
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.