Metatag HTML zapewnia metadane dotyczące dokumentu HTML. Metadane nie są wyświetlane na stronie, ale można je analizować na komputerze. Meta elementy są zazwyczaj używane do określenia opisu strony, słów kluczowych, autora, ostatniej modyfikacji i innych metadanych. Metadane mogą być używane przez przeglądarki (jak wyświetlać zawartość lub przeładowywać stronę), wyszukiwarki (słowa kluczowe) lub inne usługi internetowe. Znaczniki meta odgrywają ważną rolę w SEO. W Angular 4 , istnieje usługa o nazwie „Meta”, która może być używana do pobierania i dodawania metatagów. Ta usługa może pomóc Ci ustawić odpowiednie metatagi na podstawie aktywnych tras, co z kolei wpływa na SEO Twojej witryny. Ten post mówi o tym, jak korzystać z tej usługi i pobierać / ustawiać metatagi HTML za pomocą Angular 4.
Usługa Angular 4 Meta jest bardzo łatwa w użyciu i ma następujące metody i nazwy są oczywiste. Zobaczymy wszystkie metody w działaniu z przykładem.
- addTag
- Dodaj tagi
- getTag
- getTags
- updateTag
- Usuń oznaczenie
- removeTagElement
Musimy zaimportować tę usługę z @ angular / platform-browser i wstrzyknąć ją do twojego komponentu lub usługi. Lubić:
importuj {Meta} z '@ angular / platform-browser';
Nazwa metody wyjaśnia jej cel. Służy do dodawania metatagów. Lubić:
Metoda addTag dodaje metatagi jeden po drugim, ale za pomocą addTagów można wiele metatagów w jednym zestawie. Lubić:
Zarówno metody addTag, jak i addTags akceptują również drugi parametr (forceCreation), który jest bool. Wartość (prawda / fałsz) wskazuje, czy znacznik powinien zostać utworzony, nawet jeśli już istnieje. Lubić:
a poniżej jest generowany HTML. 
Tutaj metatag opisu został dodany dwukrotnie, ponieważ tworzenie siły jest ustawione na true.
Metoda getTag zwraca wartość znacznika Meta. Ta metoda pobiera ciąg selektora atrybutu i zwraca element HTMLMetaElement. Oto przykład użycia getTag.
Podobnie jak getTag, getTags pobiera również ciąg selektora atrybutu i zwraca tablicę HTMLMetaElement. Lubić:
Ta metoda aktualizuje zawartość dowolnego istniejącego tagu. Lubić:
Tutaj treść metatagu opisu zostaje zaktualizowana. W tym przypadku jest ustawiony na „Angular 4 meta service”.
Metoda removeTag pobiera selektor atrybutu i usuwa znacznik. W prawdziwym zastosowaniu prawie nie ma sytuacji, w których chciałbyś to zrobić. Jeśli jednak jest to wymagane, możesz użyć tej metody, aby usunąć dowolny metatag. Lubić:
Podobnie do metody removeTag, removeTagElement usuwa również metatag. Ale pobiera bezpośrednio HTMLTagElement zamiast selektora napisów. Lubić:
Tutaj najpierw otrzymujemy metatag autora i przekazujemy to samo w removeTagElement, aby go usunąć.
to jest to! Możesz sprawdzić demo pod adresem plnkr .
Wniosek
Usługa meta Angular 4 pozwala dodawać, aktualizować, pobierać i usuwać metatagi. Pomaga w tworzeniu dynamicznych metatagów opartych na aktywnych trasach aplikacji Angular dla lepszego SEO. Ten post pokazuje, jak korzystać z meta usługi Angular 4 i całej jej metody z przykładami.