Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

Implement Open Graph meta tags in AnnuncioDettaglio for improved SEO and social sharing

Browse source
This commit is contained in:
Marco Pedone 2025-08-08 14:13:27 +02:00
parent 0744d032a3
commit 3748afbd7e
1 changed files with 90 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
apps/infoalloggi/src/pages/annuncio/[cod].tsx
View file

@ -73,37 +73,7 @@ const AnnuncioDettaglio: NextPage<AnnuncioProps> = ({
flag, flag,
meta, meta,
}: AnnuncioProps) => { }: AnnuncioProps) => {
const session = useSession();
const { locale } = useTranslation();
const { data, isLoading } = api.annunci.getAnnuncio.useQuery(
{
cod: cod,
},
{ refetchOnMount: false },
);
const isDesktop = useMediaQuery("(min-width: 768px)");
if (isLoading || session.status === "pending") return <LoadingPage />;
if (
(!isLoading && !data) ||
session.status === "error" ||
(data && data.stato === "Sospeso")
) {
return <FailedAnnuncioLoading />;
}
if (!isLoading && data) {
const titolo = (locale === "it" ? data.titolo_it : data.titolo_en) || "";
const description = (locale === "it" ? data.desc_it : data.desc_en) || "";
const filteredCaratt = data.caratteristiche
? filteredCaratteristiche(data.caratteristiche)
: null;
return ( return (
<AnnuncioContext.Provider value={data}>
<TouchProvider>
<main> <main>
<Head> <Head>
<title>{`${cod} | ${meta.title}`}</title> <title>{`${cod} | ${meta.title}`}</title>
@ -121,6 +91,43 @@ const AnnuncioDettaglio: NextPage<AnnuncioProps> = ({
/> />
<meta property="og:site_name" content="Infoalloggi.it" /> <meta property="og:site_name" content="Infoalloggi.it" />
</Head> </Head>
<AnnuncioView cod={cod} flag={flag} />
</main>
);
};
const AnnuncioView = ({ cod, flag }: Omit<AnnuncioProps, "meta">) => {
const session = useSession();
const { locale } = useTranslation();
const { data, isLoading } = api.annunci.getAnnuncio.useQuery(
{
cod: cod,
},
{ refetchOnMount: false },
);
const isDesktop = useMediaQuery("(min-width: 768px)");
if (isLoading || session.status === "pending") return <LoadingPage />;
if (
!data ||
session.status === "error" ||
(data && data.stato === "Sospeso")
) {
return <FailedAnnuncioLoading />;
}
const titolo = (locale === "it" ? data.titolo_it : data.titolo_en) || "";
const description = (locale === "it" ? data.desc_it : data.desc_en) || "";
const filteredCaratt = data.caratteristiche
? filteredCaratteristiche(data.caratteristiche)
: null;
return (
<AnnuncioContext.Provider value={data}>
<TouchProvider>
<div className="mx-auto w-full px-2 sm:px-8"> <div className="mx-auto w-full px-2 sm:px-8">
<CarouselAnnuncio immagini={data.url_immagini} /> <CarouselAnnuncio immagini={data.url_immagini} />
@ -145,8 +152,7 @@ const AnnuncioDettaglio: NextPage<AnnuncioProps> = ({
/> />
)} )}
{data.tipo && {data.tipo &&
(data.tipo == "Transitorio" || (data.tipo == "Transitorio" || data.tipo == "Stabile") && (
data.tipo == "Stabile") && (
<> <>
<Pricing <Pricing
tipologia={ tipologia={
@ -180,12 +186,9 @@ const AnnuncioDettaglio: NextPage<AnnuncioProps> = ({
} }
/> />
</div> </div>
</main>
</TouchProvider> </TouchProvider>
</AnnuncioContext.Provider> </AnnuncioContext.Provider>
); );
}
return <div>Errore</div>;
}; };
export async function getStaticProps( export async function getStaticProps(
@ -201,6 +204,7 @@ export async function getStaticProps(
await ssg.annunci.getAnnuncio.prefetch({ cod: cod }); await ssg.annunci.getAnnuncio.prefetch({ cod: cod });
const meta = await ssg.annunci.getAnnuncioMeta.fetch({ cod: cod }); const meta = await ssg.annunci.getAnnuncioMeta.fetch({ cod: cod });
console.log("meta", meta);
const flag = await ssg.settings.GetFlagValue.fetch({ const flag = await ssg.settings.GetFlagValue.fetch({
id: "ANNUNCIO_INTERACTIONS_DISABLED", id: "ANNUNCIO_INTERACTIONS_DISABLED",