Как я могу динамически реализовать Google Hreflang в Angular8? - PullRequest
0 голосов
/ 22 апреля 2020

Я пытаюсь реализовать Google hreflang внутри индекса. html in Angular

// index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Commontown</title>
  <base href="/">
  <meta name="google-site-verification" content="jb7HCud2Xsfwwefwef3GEGDSVVDEERDE" />
  <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=0"/>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="/assets/css/type.css">
  <link rel="alternate" hreflang="en" href="https://www.example.co/en">
  <meta property="og:type" content="website" />
</head>
<body>
  <app-root></app-root>
  <script>
    const path = window.location.path // /en
  </script>
</body>
</html>

Предположим, я хочу вставить

<link rel="alternate" hreflang="en" href="https://www.example.co/en/blog">

в эту строку. Но я не хочу жестко кодировать его между тегом head.

Я хочу javascript читает URL-адрес 'blog' и заменяет "href = https://www.example.co/en" на "href = https://www.example.co/en/blog "динамически.

Однако window.location.href внутри тега сценария работает только один раз, когда сайт изначально отображается, поэтому я получаю только '/ en' .

Возможно ли реализовать тег hreflang внутри шаблона angular, кроме индекса. html?

1 Ответ

1 голос
/ 22 апреля 2020

Вы можете попробовать это для динамического добавления ссылки

import {DOCUMENT} from "@angular/common";
import {Renderer2} from '@angular/core';


constructor(@Inject(DOCUMENT) private document: any, private renderer: Renderer2)
{
}

constructor()
{

    const linkElt = this.renderer.createElement('link');
    this.renderer.setAttribute(linkElt, 'rel', 'alternate');
    this.renderer.setAttribute(linkElt, 'hreflang', 'en');
    this.renderer.setAttribute(linkElt, 'href', https://www.example.co/en/blog");
    this.renderer.appendChild(this.document.head, linkElt);
}

Если вы хотите изменить существующее значение ссылки, вам нужно сначала указать ссылку

let arr = Array.from(this.document.head.children);
let linkElt = arr.find(e => e.rel == "alternate" && e.hreflang =="en");
this.renderer.setAttribute(linkElt, 'href', https://www.example.co/en/blog");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...