Font icon names are indexed by search engines #498
Comments
|
Hi @deepfriedbrain, In this case, we recommend that you reference the icon using its codepoint. For <i class="material-icons"></i>You can find the complete mapping between icon names and their codepoints here: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints |
|
That's what I ended up doing but it's a very poor workaround. I lose the advantage of using readable icon names or add those readable names as comments wherever I'm using Material Icons. Why doesn't Material Icons use the approach similar to Font Awesome (make the icon name a CSS class)? Were you not aware of the problems with search engines (especially Google) indexing those names? |
|
A year and a half later, are there any better solutions for this yet? |
|
Maybe this solution could help https://stackoverflow.com/questions/37281861/how-to-use-google-material-icons-as-class-instead-of-i-tag |
|
This problem is huge problem for SEO And I prepared a repository for solution(SEO Friendly). <!-- Using of material-icons font with classes. -->
<span class="material-icons m_i_ICON_TAG_HERE"></span>
<!-- Example -->
<span class="material-icons m_i_home"></span>Please give star to repository to make people reach. |
This link is no more working. Did any one found solution to this issue? |
|
The best solution is don't use font icons. Use SVG icons. |
|
Any official updates to this? |
|
The attribute |
|
There's a more recent answer in stackoverflow thread mentioned above, which offers a pretty convenient solution. Similar solution is also mentioned in a linked issue. |
|
https://stackoverflow.com/a/61659184 is great, but unfortunately it requires control of the DOM, like all other answers I've seen here. And since I'm using those icons via Angular components mat-icon, it's unfortunately not an option (AFAIK). |
The new way to use ligature icons, via a dedicated attribute, allow to hide the font name from search engine results. Otherwise the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusingto read. New recommended usage is: ```diff - <mat-icon>my-icon-name</mat-icon> + <mat-icon icon="my-icon-name"></mat-icon> ``` Fixes angular#23195 Fixes angular#23183 Fixes google/material-design-icons#498
The new way to use ligature icons, via a dedicated attribute, allow to hide the font name from search engine results. Otherwise the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusingto read. New recommended usage is: ```diff - <mat-icon>my-icon-name</mat-icon> + <mat-icon icon="my-icon-name"></mat-icon> ``` Fixes angular#23195 Fixes angular#23183 Fixes google/material-design-icons#498
The new way to use ligature icons, via a dedicated attribute, allow to hide the font name from search engine results. Otherwise the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusingto read. New recommended usage is: ```diff - <mat-icon>my-icon-name</mat-icon> + <mat-icon icon="my-icon-name"></mat-icon> ``` Fixes angular#23195 Fixes angular#23183 Fixes google/material-design-icons#498
The new way to use ligature icons, via a dedicated attribute, allows to hide the font name from search engine results. Otherwise the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusing to read. New recommended usage is: ```diff - <mat-icon>my-icon-name</mat-icon> + <mat-icon icon="my-icon-name"></mat-icon> ``` Fixes angular#23195 Fixes angular#23183 Fixes google/material-design-icons#498
The new way to use ligature icons, via a dedicated attribute, allows to hide the font name from search engine results. Otherwise the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusing to read. New recommended usage is: ```diff - <mat-icon>my-icon-name</mat-icon> + <mat-icon icon="my-icon-name"></mat-icon> ``` Fixes angular#23195 Fixes angular#23183 Fixes google/material-design-icons#498
The new way to use ligature icons, via a dedicated attribute, allows to hide the font name from search engine results. Otherwise the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusing to read. New recommended usage is: ```diff - <mat-icon>my-icon-name</mat-icon> + <mat-icon icon="my-icon-name"></mat-icon> ``` Fixes angular#23195 Fixes angular#23183 Fixes google/material-design-icons#498
The new way to use ligature icons, via a dedicated attribute, allows to hide the font name from search engine results. Otherwise the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusing to read. New recommended usage is: ```diff - <mat-icon>my-icon-name</mat-icon> + <mat-icon icon="my-icon-name"></mat-icon> ``` Fixes angular#23195 Fixes angular#23183 Fixes google/material-design-icons#498
The new way to use ligature icons, via the `fontIcon` attribute, allows to hide
the font name from search engine results. Otherwise, the font name, which was
never intended to be read by any end-users, would appear in the middle of legit
sentences in search results, thus making the search result very confusing to read.
New recommended usage is:
```diff
- <mat-icon>home</mat-icon>
+ <mat-icon fontIcon="home"></mat-icon>
```
To also enable this for custom font, include the special `ligature-font` class
when registering the font alias. So like this:
```ts
iconRegistry.registerFontClassAlias('f1', 'font1 ligature-font');
```
And use like this:
```html
<mat-icon fontSet="f1" fontIcon="home"></mat-icon>
```
Fixes angular#23195
Fixes angular#23183
Fixes google/material-design-icons#498
The new way to use ligature icons, via the `fontIcon` attribute, allows to hide
the font name from search engine results. Otherwise, the font name, which was
never intended to be read by any end-users, would appear in the middle of legit
sentences in search results, thus making the search result very confusing to read.
New recommended usage is:
```diff
- <mat-icon>home</mat-icon>
+ <mat-icon fontIcon="home"></mat-icon>
```
To also enable this for custom font, include the special `mat-ligature-font` class
when registering the font alias. So like this:
```ts
iconRegistry.registerFontClassAlias('f1', 'font1 mat-ligature-font');
```
And use like this:
```html
<mat-icon fontSet="f1" fontIcon="home"></mat-icon>
```
Fixes angular#23195
Fixes angular#23183
Fixes google/material-design-icons#498
The new way to use ligature icons, via the `fontIcon` attribute, allows to hide
the font name from search engine results. Otherwise, the font name, which was
never intended to be read by any end-users, would appear in the middle of legit
sentences in search results, thus making the search result very confusing to read.
New recommended usage is:
```diff
- <mat-icon>home</mat-icon>
+ <mat-icon fontIcon="home"></mat-icon>
```
To also enable this for custom font, include the special `mat-ligature-font` class
when registering the font alias. So like this:
```ts
iconRegistry.registerFontClassAlias('f1', 'font1 mat-ligature-font');
```
And use like this:
```html
<mat-icon fontSet="f1" fontIcon="home"></mat-icon>
```
Fixes angular#23195
Fixes angular#23183
Fixes google/material-design-icons#498
The new way to use ligature icons, via the `fontIcon` attribute, allows to hide
the font name from search engine results. Otherwise, the font name, which was
never intended to be read by any end-users, would appear in the middle of legit
sentences in search results, thus making the search result very confusing to read.
New recommended usage is:
```diff
- <mat-icon>home</mat-icon>
+ <mat-icon fontIcon="home"></mat-icon>
```
To also enable this for custom font, include the special `mat-ligature-font` class
when registering the font alias. So like this:
```ts
iconRegistry.registerFontClassAlias('f1', 'font1 mat-ligature-font');
```
And use like this:
```html
<mat-icon fontSet="f1" fontIcon="home"></mat-icon>
```
Fixes angular#23195
Fixes angular#23183
Fixes google/material-design-icons#498
The new way to use ligature icons, via the `fontIcon` attribute, allows to hide
the font name from search engine results. Otherwise, the font name, which was
never intended to be read by any end-users, would appear in the middle of legit
sentences in search results, thus making the search result very confusing to read.
New recommended usage is:
```diff
- <mat-icon>home</mat-icon>
+ <mat-icon fontIcon="home"></mat-icon>
```
To also enable this for custom font, include the special `mat-ligature-font` class
when registering the font alias. So like this:
```ts
iconRegistry.registerFontClassAlias('f1', 'font1 mat-ligature-font');
```
And use like this:
```html
<mat-icon fontSet="f1" fontIcon="home"></mat-icon>
```
Fixes #23195
Fixes #23183
Fixes google/material-design-icons#498
The new way to use ligature icons, via the `fontIcon` attribute, allows to hide
the font name from search engine results. Otherwise, the font name, which was
never intended to be read by any end-users, would appear in the middle of legit
sentences in search results, thus making the search result very confusing to read.
New recommended usage is:
```diff
- <mat-icon>home</mat-icon>
+ <mat-icon fontIcon="home"></mat-icon>
```
To also enable this for custom font, include the special `mat-ligature-font` class
when registering the font alias. So like this:
```ts
iconRegistry.registerFontClassAlias('f1', 'font1 mat-ligature-font');
```
And use like this:
```html
<mat-icon fontSet="f1" fontIcon="home"></mat-icon>
```
Fixes #23195
Fixes #23183
Fixes google/material-design-icons#498
(cherry picked from commit b37c96d)
|
THIS IS NOT FIXED WHATSOEVER THE CODEPOINT IS A WORKAROUND. this workaround only works on google search but does not work on other search engines
"Seo friendly ligature icons" my ass. What happened to the old ? this should work as before and my example is seo friendly because there is no text to get indexed.
|
I'm using font icons in my page h1 header for e.g.:
I noticed that my page shows up as
thumb_up My Page Titlein Google SRPs. Is there a way to avoid this, other than removing the icons from the header or switching to image icons?Thanks.
The text was updated successfully, but these errors were encountered: