The Categories on Google Result Page And The Resource Code on The Website

Hi there,

Now I encountered another question about the categories and needs to be solved urgently.

I checked my website this morning by using the Google search engine, and on the search engine result page, I saw some results showed like this:

Screenshot 01: https://gyazo.com/a91e17fc12144b4568a01436594b82a3

As you can see that all the titles are shown in five words or so, and I know that is because these results are extracted directly from my website cause the categories on my website were written just like that way. And here is for you to check:

Screenshot 02: https://gyazo.com/613ebec711c9d279d21fbff439f5b33d
Screenshot 03: https://gyazo.com/111982a4cf386c4880d28a479569d0b2
Screenshot 04: https://gyazo.com/1309f72dfa9ef964e3ce4fa8cfa4d1bc

etc., and on the resource code page you can easily notice that all of those titles were written like:

<title>Pot Magnets – DIYMAG</title>;
<title>Countersunk Magnets – DIYMAG</title>;
and <title>25mm – DIYMAG</title> etc.,

Here comes my question, now I want to add more content on the resource code page between the <title></title> section, however, at the same time I still need the categories on the front page to remain the same, the original type.

Could you tell me how to fulfill that feature and I will appreciate that if you could show me by video recording? Thanks in advance,