ਐਂਗੂਲਰ ਐਸਐਸਆਰ ਅਤੇ ਐਸਈਓ ਚੁਣੌਤੀਆਂ ਨੂੰ ਸਮਝਣਾ
ਲਈ ਇੱਕ ਕੋਣੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣਾ ਐਸਈਓ ਮੁਸ਼ਕਲ ਹੋ ਸਕਦੀ ਹੈ, ਖ਼ਾਸਕਰ ਜਦੋਂ ਵਰਤੋਂ ਕਰਦੇ ਹੋ ਸਰਵਰ-ਸਾਈਡ ਰੈਡਰਿੰਗ (ਐਸਐਸਆਰ). ਬਹੁਤ ਸਾਰੇ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਉਮੀਦ ਹੈ ਕਿ ਗਤੀਸ਼ੀਲ ਮੈਟਾ ਟੈਗਸ, ਜਿਵੇਂ ਕਿ ਵਰਣਨ ਅਤੇ ਕੀਵਰਡਸ, ਪੇਜ ਸਰੋਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾਣਗੇ, ਪਰ ਉਹ ਅਕਸਰ ਸਿਰਫ ਬ੍ਰਾ .ਜ਼ਰ ਦੇ ਇੰਸਪੈਕਟਰ ਵਿੱਚ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ. 🧐
ਇਹ ਮੁੱਦਾ ਵੀ ਜਾਰੀ ਹੈ ਕੋਣੀ ਯੂਨੀਵਰਸਲ ਸੰਜੋਗ 16, 17, ਅਤੇ ਹੋਰ ਵੀ ਨਵੇਂ ਹੋਣਗੇ. ਸਮਰੱਥ ਹੋਣ ਦੇ ਬਾਵਜੂਦ ਕਲਾਇੰਟ ਹਾਈਡਰੇਸ਼ਨਇਸ ਤੋਂ ਇਲਾਵਾ, ਜਦੋਂ ਕਿ ਪੇਜ ਦਾ ਸਿਰਲੇਖ ਸਹੀ ਤਰ੍ਹਾਂ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਜੋ ਮੈਟਾ ਟੈਗ ਸਰਵਰ ਦੁਆਰਾ ਪੇਸ਼ ਕੀਤੇ ਆਉਟਪੁੱਟ ਵਿੱਚ ਮੈਟਾ ਟੈਗਸ ਗੈਰਹਾਜ਼ਰ ਰਹਿੰਦੇ ਹਨ. ਐਸਈਓ ਸੇਵਾ ਲਾਗੂਕਰਣ ਸਹੀ ਜਾਪਦੀ ਹੈ, ਪਰ ਪੰਨਾ ਸਰੋਤ ਵਿੱਚ ਅਨੁਮਾਨਤ ਮੈਟਾ ਟੈਗ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦੇ.
ਇੱਕ ਨਵੇਂ ਉਤਪਾਦ ਪੇਜ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਅਤੇ ਇਸ ਨੂੰ ਸਮਝਾਉਣ ਦੀ ਕਲਪਨਾ ਕਰੋ ਖੋਜ ਇੰਜਣ ਤੁਹਾਡੇ ਧਿਆਨ ਨਾਲ ਤਿਆਰ ਕੀਤੇ ਮੈਟਾ ਵਰਣਨ ਨਹੀਂ ਦੇਖ ਸਕਦੇ. ਇਹ ਤੁਹਾਡੇ ਦਰਜਾਬੰਦੀ ਨੂੰ ਬਹੁਤ ਪ੍ਰਭਾਵਤ ਕਰ ਸਕਦਾ ਹੈ! ਅਜਿਹੀ ਹੀ ਸਥਿਤੀ ਇਕ ਸ਼ੁਰੂਆਤ ਨਾਲ ਵਾਪਰਿਆ ਜਿਸ ਦੇ ਗਤੀਸ਼ੀਲ ਪੰਨੇ ਰੈਂਕ ਕਰਨ ਲਈ ਸੰਘਰਸ਼ ਕੀਤਾ ਗਿਆ ਕਿਉਂਕਿ ਗੂਗਲ ਦਾ ਕਰਵਾਲਾ ਉਨ੍ਹਾਂ ਦੇ ਵਰਣਨ ਦਾ ਪਤਾ ਨਹੀਂ ਲਗਾ ਰਿਹਾ ਸੀ. 😨
ਇਸ ਲੇਖ ਵਿਚ, ਅਸੀਂ ਤੋੜ ਜਾਵਾਂਗੇ ਕਿਉਂ ਇਹ ਪ੍ਰਦਾਨ ਕੀਤੇ ਕੋਡ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰਦਾ ਹੈ, ਅਤੇ ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਨ ਲਈ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੱਲਾਂ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗਾ ਐਂਗੂਲਰ ਐਸ ਐਸ ਆਰ ਪੰਨੇ ਐਸਈਓ ਲਈ ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਨੁਕੂਲ ਹਨ. ਆਓ ਅੰਦਰ ਗੋਤਾਖੋਰੀ ਕਰੀਏ! 🚀
ਕਮਾਂਡ | ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਣ |
---|---|
makeStateKey | ਸਰਕਾਰੀ ਕੁੰਜੀ ਨੂੰ ਸਟੋਰ ਕਰਨ ਅਤੇ ਸਰਵਰ ਅਤੇ ਕਲਾਇੰਟ ਦੇ ਵਿਚਕਾਰ ਸਟੋਰ ਕਰਨ ਲਈ ਇੱਕ ਵਿਲੱਖਣ ਕੁੰਜੀ ਬਣਾਉਣ ਲਈ ਇੱਕ ਅਨੌਖੀ ਕੁੰਜੀ ਬਣਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ. |
TransferState | ਐਂਗਣਕ ਸੇਵਾ, ਜੋ ਕਿ ਸਰਵਰ ਤੋਂ ਡਾਟਾ ਨੂੰ ਕਲਾਇੰਟ ਤੇ ਤਬਦੀਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਮੈਟਾ ਟੈਗਸ ਨੂੰ ਐਸਐਸਆਰ ਵਿੱਚ ਸਹੀ rensed ੰਗ ਨਾਲ ਪੇਸ਼ ਆਉਣ. |
updateTag | ਐਂਗੂਲਰ ਮੈਟਾ ਸੇਵਾ ਦਾ ਹਿੱਸਾ, ਇਹ ਇਸ ਨੂੰ ਡੁਪਲਿਕੇਟੇਸ਼ਨ ਦੀ ਬਜਾਏ ਮੈਟਾ ਟੈਗ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ, ਇਕਸਾਰਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ. |
renderModuleFactory | ਐਂਗੂਲਰ ਪਲੇਟਫਾਰਮ-ਸਰਵਰ ਪੈਕੇਜ ਤੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਜੋ ਗਾਹਕ ਨੂੰ ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ ਸਰਵਰ ਤੇ ਇੱਕ ਐਂਗਿ module ਲ ਨੂੰ ਪੇਸ਼ ਕਰਦਾ ਹੈ. |
AppServerModuleNgFactory | ਐਂਗੂਲਰ ਸਰਵਰ ਮੋਡੀ module ਲ ਦਾ ਸੰਜੀਵ ਸੰਸਕਰਣ ਐਂਗੂਲਰ ਯੂਨੀਵਰਸਲ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਐਸਐਸਆਰ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ. |
req.url | ਸਹੀ ਐਂਗੂਲਰ ਰੂਟ ਨੂੰ ਆਰਜੀ ਤੌਰ ਤੇ ਪੇਸ਼ ਕਰਨ ਲਈ ਇੱਕ ਐਕਸਪ੍ਰੈਸ. ਜੇਐਸਐਸ ਸਰਵਰ ਵਿੱਚ ਲੋੜੀਂਦਾ ਯੂਆਰਐਲ ਕੱ racts ਾਉਂਦਾ ਹੈ. |
res.send() | ਐਲੀਬਿਟ ਮੈਟਾ ਟੈਗ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਸੋਧਿਆ ਗਿਆ, ਗਾਹਕ ਨੂੰ ਅੰਤਮ ਪੇਸ਼ਕਾਰੀ HTML ਜਵਾਬ ਵਾਪਸ ਭੇਜਦਾ ਹੈ. |
ng-server-context | ਇੱਕ ਐਂਗੁਲਰ ਐਸਐਸਆਰ ਵਿਸ਼ੇਸ਼ਤਾ ਜੋ ਸਰਵਰ-ਰੇਡਡ ਅਤੇ ਕਲਾਇੰਟ-ਰੀਡਰੇਟਡ ਸਮੱਗਰੀ ਵਿੱਚ ਅੰਤਰ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ. |
ngh | ਐਂਗੂਲਰ ਹਾਈਡਰੇਸਨ ਮਾਰਕਰ ਐਸ ਐਸ ਐੱਸ ਹਾਈਡਰੇਸ ਦੇ ਦੌਰਾਨ ਐਲੀਮੈਂਟਸ ਨੂੰ ਟਰੈਕ ਕਰਦਾ ਸੀ, ਸਰਵਰ ਅਤੇ ਕਲਾਇੰਟ ਦੇ ਵਿਚਕਾਰ ਇਕਸਾਰਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ. |
meta.addTag | ਕੋਣੀ ਵਿਧੀ ਜੋ ਹੱਥੀਂ ਮੈਟਾ ਟੈਗ ਪਾਉਂਦੀ ਹੈ, ਪਰ ਜੇ ਤੁਸੀਂ ਸਹੀ ਤਰ੍ਹਾਂ ਨਹੀਂ ਸੰਭਾਲਿਆ ਤਾਂ ਬਟਲੀਬਾਂ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦਾ ਹੈ. |
ਐਂਗੂਲਰ ਐਸ ਐਸ ਆਰ ਵਿੱਚ ਐਸਈਓ ਨੂੰ ਵਧਾਉਣਾ: ਲਾਗੂ ਕਰਨ ਨੂੰ ਸਮਝਣਾ
ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਐਂਗੂਲਰ ਐਸ ਐਸ ਆਰ ਕਿਸ ਲਈ ਮੈਟਾ ਟੈਗਸ ਨੂੰ ਸਹੀ ਤਰ੍ਹਾਂ ਪੇਸ਼ ਕਰਦਾ ਹੈ ਐਸਈਓ. ਪ੍ਰਦਾਨ ਕੀਤੇ ਸਕ੍ਰਿਪਟਾਂ ਦਾ ਉਦੇਸ਼ ਇਸ ਮੁੱਦੇ ਨੂੰ ਸੰਬੋਧਿਤ ਕਰਨਾ ਹੈ ਜਿੱਥੇ ਮੈਟਾ ਵਰਣਨ ਬ੍ਰਾ ser ਜ਼ਰ ਇੰਸਪੈਕਟਰ ਵਿੱਚ ਪ੍ਰਗਟ ਹੁੰਦੇ ਹਨ ਪਰ ਪੇਜ ਸਰੋਤ ਵਿੱਚ ਨਹੀਂ. ਪਹਿਲੀ ਸਕ੍ਰਿਪਟ ਐਂਗੂਲਰ ਦਾ ਲਾਭ ਮੈਟਾ ਅਤੇ ਸਿਰਲੇਖ ਆਰਜੀ ਤੌਰ ਤੇ ਅਪਡੇਟ ਕਰਨ ਲਈ ਸੇਵਾਵਾਂ, ਪਰ ਇਹ ਤਬਦੀਲੀਆਂ ਗਾਹਕ ਦੇ ਪਾਸੇ ਹੁੰਦੀਆਂ ਹਨ, ਉਹ ਸਰਵਰ ਦੁਆਰਾ ਦਿੱਤੀਆਂ ਗਏ ਸ਼ੁਰੂਆਤੀ HTML ਸਰੋਤ ਵਿੱਚ ਨਹੀਂ ਰਹਿੰਦੇ. ਇਹ ਦੱਸਦਾ ਹੈ ਕਿ ਖੋਜ ਇੰਜਣਾਂ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਸਹੀ ਤਰ੍ਹਾਂ ਨਿਰਧਾਰਤ ਨਹੀਂ ਕਰ ਸਕਦੇ.
ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ, ਦੂਜੀ ਸਕ੍ਰਿਪਟ ਪੇਸ਼ ਕੀਤੀ ਟ੍ਰਾਂਸਫਰਸਟੇਟ, ਇਕ ਐਂਗਿਅਲ ਵਿਸ਼ੇਸ਼ਤਾ ਜੋ ਸਰਵਰ ਅਤੇ ਗ੍ਰਾਹਕ ਦੇ ਵਿਚਕਾਰ ਡੇਟਾ ਟ੍ਰਾਂਸਫਰ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ. ਵਿੱਚ ਮੈਟਾਡੇਟਾ ਨੂੰ ਸਟੋਰ ਕਰਕੇ ਟ੍ਰਾਂਸਫਰਸਟੇਟ, ਅਸੀਂ ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹਾਂ ਕਿ ਸਰਵਰ ਦੁਆਰਾ ਜਾਣਕਾਰੀ ਪਹਿਲਾਂ ਤੋਂ ਪੇਸ਼ ਕੀਤੀ ਗਈ ਹੈ ਅਤੇ ਗਾਹਕ ਦੁਆਰਾ ਨਿਰਵਿਘਨ ਤੌਰ ਤੇ ਚੁੱਕਿਆ ਗਿਆ ਹੈ. ਇਹ ਵਿਧੀ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਕਾਰਜਾਂ ਲਈ ਵਿਸ਼ੇਸ਼ ਤੌਰ ਤੇ ਲਾਭਦਾਇਕ ਹੈ ਗਤੀਸ਼ੀਲ ਰੂਟਿੰਗ, ਜਿਵੇਂ ਕਿ ਇਹ ਮੈਟਾਡੇਟਾ ਨੂੰ ਨੈਵੀਗੇਸ਼ਨ ਸਮਾਗਮਾਂ ਵਿੱਚ ਬਰਕਰਾਰ ਰੱਖਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਬਿਨਾਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਲਾਇੰਟ-ਸਾਈਡ ਅਪਡੇਟਸ ਤੇ. ਇਕ ਈ-ਕਾਮਰਸ ਸਾਈਟ ਦੀ ਕਲਪਨਾ ਕਰੋ ਜਿੱਥੇ ਹਰੇਕ ਉਤਪਾਦ ਪੇਜ ਵਿੱਚ ਇੱਕ ਵਿਲੱਖਣ ਮੈਟਾ ਵੇਰਵਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ - ਇਹ ਤਰੀਕਾ ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਖੋਜ ਇੰਜਨ ਸ਼ੁਰੂ ਤੋਂ ਸਹੀ ਮੈਟਾਡੇਟਾ ਨੂੰ ਵੇਖਦੇ ਹਨ. 🛒
ਅੰਤ ਵਿੱਚ, ਐਕਸਪ੍ਰੈਸ.ਸ ਸਰਵਰ ਸਕ੍ਰਿਪਟ ਮੁਟਕੇ ਨੂੰ ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ ਤਿਆਰ ਕੀਤੇ ਐਚਟੀਐਮਐਲ ਨੂੰ ਸੋਧ ਕੇ ਇੱਕ ਹੋਰ ਮਜਬੂਤ ਹੱਲ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ. ਇਹ ਵਿਧੀ ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦੀ ਹੈ ਕਿ ਮੈਟਾ ਟੈਗ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਪੂਰਵ-ਰੇਡ ਕੀਤੇ HTML ਵਿੱਚ ਟੀਕੇ ਲਗਾਏ ਜਾਂਦੇ ਹਨ, ਜੋ ਕਿ ਉਹ ਸ਼ੁਰੂਆਤੀ ਪੇਜ ਸਰੋਤ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ. ਇਹ ਵੱਡੇ ਪੱਧਰ 'ਤੇ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਖਾਸ ਤੌਰ' ਤੇ ਮਹੱਤਵਪੂਰਨ ਹੈ, ਜਿੱਥੇ ਸਿਰਫ ਐਂਗੂਲਰ ਦੇ ਬਿਲਟ-ਇਨ ਐਸ ਐਸ ਆਰ 'ਤੇ ਨਿਰਭਰ ਕਰਨਾ ਕਾਫ਼ੀ ਨਹੀਂ ਹੋ ਸਕਦਾ. ਉਦਾਹਰਣ ਦੇ ਲਈ, ਹਜ਼ਾਰਾਂ ਲੇਖ ਬਣਾਉਣ ਵਾਲੀ ਇੱਕ ਖ਼ਬਰ ਵੈਬਸਾਈਟ ਨੂੰ ਆਰਜੀ ਤੌਰ ਤੇ ਇੰਡੈਕਸਿੰਗ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ ਮੈਟਾ ਟੈਗਸ ਦੇ ਸਰਵਰ-ਸਾਈਡ ਇੰਜੈਕਸ਼ਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ. 🔍
ਕੁਲ ਮਿਲਾ ਕੇ, ਐਂਗੁਲਰ ਦੇ ਸੁਮੇਲ ਦਾ ਸੁਮੇਲ ਮੈਟਾ ਸੇਵਾ, ਟ੍ਰਾਂਸਫਰਸਟੇਟ, ਅਤੇ ਐਕਸਪ੍ਰੈਸ.ਜੇਜ਼ ਦੁਆਰਾ ਬੈਕਐਂਡ ਸੋਧਾਂ ਇਸ ਆਮ ਐਸਈਓ ਮੁੱਦੇ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਇੱਕ ਵਿਆਪਕ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ. ਹਰ method ੰਗ ਦੇ ਇਸਦੇ ਫਾਇਦੇ ਹੁੰਦੇ ਹਨ: ਜਦੋਂ ਕਿ ਟ੍ਰਾਂਸਫਰਸਟੇਟ ਕਲਾਇੰਟ-ਸਰਵਰ ਡਾਟਾ ਇਕਸਾਰਤਾ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ, ਐਕਸਪ੍ਰੈਸ.ਐਕਸ ਸਰਵਰ ਨੂੰ ਸੋਧਣਾ ਪੂਰਾ ਐਸ ਐਸ ਆਰ ਦੀ ਪਾਲਣਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ. ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਉਹਨਾਂ ਦੀ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਗੁੰਝਲਦਾਰਤਾ ਅਤੇ ਐਸਈਓ ਦੀਆਂ ਜ਼ਰੂਰਤਾਂ ਦੇ ਅਧਾਰ ਤੇ ਸਭ ਤੋਂ suitable ੁਕਵੀਂ ਪਹੁੰਚ ਦੀ ਚੋਣ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ. ਇਹਨਾਂ ਤਕਨੀਕਾਂ ਨੂੰ ਲਾਗੂ ਕਰਕੇ, ਅਸੀਂ ਇਹ ਯਕੀਨੀ ਬਣਾ ਸਕਦੇ ਹਾਂ ਕਿ ਸਾਡੀਆਂ ਐਂਗਲ ਐਸ ਐਸ ਆਰ ਐਪਲੀਕੇਸ਼ਨ ਨਾ ਸਿਰਫ ਕਾਰਜਸ਼ੀਲ ਹਨ ਬਲਕਿ ਸਰਚ ਇੰਜਣਾਂ ਲਈ ਅਨੁਕੂਲ ਵੀ ਹਨ. 🚀
ਐਂਗੂਲਰ ਐਸ ਐਸ ਆਰ ਪੇਜ ਸਰੋਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਵਾਲੇ ਮੈਟਾ ਟੈਗ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾਂਦੇ ਹਨ
ਸਰਵਰ-ਸਾਈਡ ਰੈਡਰਿੰਗ (ਐਸਐਸਆਰ) ਅਤੇ ਡਾਇਨਾਮਿਕ ਐਸਈਓ ਪ੍ਰਬੰਧਨ ਦੇ ਨਾਲ ਕੋਣੀਕ੍ਰਿਤੀ
import { Injectable } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
@Injectable({ providedIn: 'root' })
export class SeoService {
constructor(private titleService: Title, private meta: Meta) {}
setTitle(title: string) {
this.titleService.setTitle(title);
}
updateMetaTags(description: string) {
this.meta.updateTag({ name: 'description', content: description });
}
}
ਵਿਕਲਪਕ ਪਹੁੰਚ: ਪ੍ਰੀ-ਰੈਂਡਰਡ ਐਸਈਓ ਟੈਗਾਂ ਲਈ ਟ੍ਰਾਂਸਫਰਸਟੇਟ ਦੀ ਵਰਤੋਂ ਕਰਨਾ
ਸੁਧਾਰੀ ਐਸਈਓ ਲਈ ਯੂਨੀਵਰਸਲ ਅਤੇ ਟ੍ਰਾਂਸਫਰਸਟੇਟ ਦੇ ਨਾਲ ਕੋਣੀ
import { Injectable } from '@angular/core';
import { Meta, Title, TransferState, makeStateKey } from '@angular/platform-browser';
const SEO_KEY = makeStateKey('seoTags');
@Injectable({ providedIn: 'root' })
export class SeoService {
constructor(private titleService: Title, private meta: Meta, private state: TransferState) {}
setTitle(title: string) {
this.titleService.setTitle(title);
}
updateMetaTags(description: string) {
this.meta.updateTag({ name: 'description', content: description });
this.state.set(SEO_KEY, { description });
}
}
ਐਕਸਪ੍ਰੈਸ.ਜਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਿਆਂ ਐਸਈਓ ਮੈਟਾ ਟੈਗਾਂ ਦਾ ਬੈਕਐਂਡ ਪੇਸ਼ਕਾਰੀ
ਪੂਰੀ ਮੈਟਾ ਰੈਂਡਰਿੰਗ ਲਈ ਐਕਸਪ੍ਰੈਸ ਅਤੇ ਐਂਗੂਲਰ ਐਸਐਸਆਰ ਦੇ ਨਾਲ ਨੋਡ. ਜੇ
const express = require('express');
const { renderModuleFactory } = require('@angular/platform-server');
const { AppServerModuleNgFactory } = require('./dist/server/main');
const app = express();
app.get('*', (req, res) => {
renderModuleFactory(AppServerModuleNgFactory, { document: '<app-root></app-root>', url: req.url })
.then(html => {
res.send(html.replace('<head>', '<head><meta name="description" content="Server Rendered Meta">'));
});
});
app.listen(4000, () => console.log('Server running on port 4000'));
ਐਸਈਓ ਲਈ ਐਂਗੂਲਰ ਐਸਐਸਆਰ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣਾ: ਮੈਟਾ ਟੈਗ ਤੋਂ ਪਰੇ
ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹੋਏ ਮੈਟਾ ਟੈਗਸ ਵਿੱਚ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਪੇਸ਼ ਕੀਤੇ ਗਏ ਹਨ ਐਂਗੂਲਰ ਐਸ ਐਸ ਆਰ ਐਸਈਓ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ, ਇਕ ਹੋਰ ਮਹੱਤਵਪੂਰਨ ਪਹਿਲੂ ਬਿਹਤਰ ਇੰਡੈਕਸਿੰਗ ਲਈ struct ਾਂਚਾਗਤ ਡੇਟਾ ਨੂੰ ਸੰਭਾਲਣਾ ਹੈ. Struct ਾਂਚਾਗਤ ਡੇਟਾ, ਅਕਸਰ ਜੇਐਸਓਐਨ-ਐਲ ਡੀ ਫਾਰਮੈਟ ਵਿੱਚ, ਖੋਜ ਇੰਜਣਾਂ ਨੂੰ ਤੁਹਾਡੀ ਸਮਗਰੀ ਦੇ ਪ੍ਰਸੰਗ ਨੂੰ ਸਮਝਣ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ. ਇਸਦੇ ਬਿਨਾਂ, ਭਾਵੇਂ ਤੁਹਾਡੀ ਮੈਟਾ ਟੈਗ ਮੌਜੂਦ ਹਨ, ਖੋਜ ਇੰਜਣ ਪੇਜ ਦੀ ਸਾਰਥਕਤਾ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਝ ਨਹੀਂ ਸਕਦੇ. ਉਦਾਹਰਣ ਦੇ ਲਈ, ਇੱਕ ਈ-ਕਾਮਰਸ ਸਾਈਟ ਗੂਗਲ ਸ਼ਾਪਿੰਗ ਦੇ ਨਤੀਜਿਆਂ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਿਆਂ, ਉਤਪਾਦ ਦੇ ਵੇਰਵਿਆਂ ਨੂੰ ਪ੍ਰਭਾਸ਼ਿਤ ਕਰਨ ਲਈ struct ਾਂਚਾਗਤ ਡੇਟਾ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੀ ਹੈ. 🛒
ਇਕ ਹੋਰ ਜ਼ਰੂਰੀ ਰਣਨੀਤੀ ਡੁਪਲਿਕੇਟ ਸਮਗਰੀ ਦੇ ਮੁੱਦਿਆਂ ਨੂੰ ਰੋਕਣ ਲਈ ਕੈਨੋਨੀਕਲ ਯੂਆਰਐਲ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰ ਰਹੀ ਹੈ. ਜੇ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਇਕੋ ਸਮਗਰੀ ਵੱਲ ਜਾਣ ਵਾਲੇ ਕਈ URL ਤਿਆਰ ਕਰਦੀ ਹੈ, ਤਾਂ ਖੋਜ ਇੰਜਣ ਤੁਹਾਡੀ ਰੈਂਕਿੰਗ ਨੂੰ ਜੁਰਮਾਨਾ ਕਰ ਸਕਦੇ ਹਨ. ਵਰਤ ਕੇ ਇਕ ਪ੍ਰਮਾਣਿਕ ਟੈਗ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਐਂਗੂਲਰ ਐਸ ਐਸ ਆਰ ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਸਹੀ ਪੇਜ ਇੰਡੈਕਸ ਕੀਤਾ ਗਿਆ ਹੈ. ਇੱਕ ਅਸਲ-ਵਿਸ਼ਵ ਉਦਾਹਰਨ ਸ਼੍ਰੇਣੀ ਅਤੇ ਟੈਗ ਪੰਨਿਆਂ ਦਾ ਇੱਕ ਬਲਾੱਗ ਹੈ - ਬਿਨਾਂ ਸਹੀ ਕੰਟਰੀਜ਼ੇਸ਼ਨ ਦੇ, ਗੂਗਲ ਉਨ੍ਹਾਂ ਨੂੰ ਖੋਜ ਰੈਂਕਿੰਗ ਨੂੰ ਪ੍ਰਭਾਵਤ ਕਰ ਸਕਦਾ ਹੈ. 🔍
ਅੰਤ ਵਿੱਚ, ਇੱਕ ਐਸਐਸਆਰ ਸੈਟਅਪ ਵਿੱਚ ਪੇਜ ਲੋਡ ਸਪੀਡ ਸਾਇਓ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ. ਖੋਜ ਇੰਜਣ ਫਾਸਕ ਲੋਡਿੰਗ ਪੰਨਿਆਂ ਨੂੰ ਤਰਜੀਹ ਦਿੰਦੇ ਹਨ, ਅਤੇ ਮਾੜੀ ਕਾਰਗੁਜ਼ਾਰੀ ਉੱਚ ਤੋਂ ਉਛਲ ਦੀਆਂ ਦਰਾਂ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੀ ਹੈ. ਤਕਨੀਕਾਂ ਜਿਵੇਂ ਕਿ ਆਲਸੀ ਲੋਡਿੰਗ ਚਿੱਤਰ, ਸਰਵਰ ਦੇ ਜਵਾਬ, ਅਤੇ ਕੁਸ਼ਲ ਕੈਚਿੰਗ ਰਣਨੀਤੀਆਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਵਾਲੇ ਉਪਭੋਗਤਾ ਦਾ ਤਜਰਬਾ ਨੂੰ ਮਹੱਤਵਪੂਰਣ ਰੂਪ ਵਿੱਚ ਲਾਗੂ ਕਰਨਾ. ਕਲਪਨਾ ਕਰੋ ਕਿ ਹਜ਼ਾਰਾਂ ਰੋਜ਼ਾਨਾ ਮਹਿਮਾਨਾਂ ਨਾਲ ਖ਼ਬਰਾਂ ਦੀ ਕਲਪਨਾ ਕਰੋ - ਜੇ ਹਰ ਬੇਨਤੀ ਇੱਕ ਪੂਰਾ ਸਰਵਰ-ਸਾਈਡ ਰੀਡਰ ਚਾਲੂ ਕਰਦੀ ਹੈ, ਪ੍ਰਦਰਸ਼ਨ ਦੁੱਖ ਭੰਗ ਹੋਵੇਗੀ. ਕੈਚਿੰਗ ਸਮਗਰੀ ਨੂੰ ਪਹਿਲਾਂ ਤੋਂ ਲੋਡ ਟਾਈਮਜ਼ ਘੱਟ ਕਰ ਸਕਦਾ ਹੈ ਅਤੇ ਐਸਈਓ ਰੈਂਕਿੰਗ ਵਿੱਚ ਸੁਧਾਰ ਕਰ ਸਕਦਾ ਹੈ. 🚀
ਐਂਗੂਲਰ ਐਸਐਸਆਰ ਅਤੇ ਐਸਈਓ ਬਾਰੇ ਆਮ ਪ੍ਰਸ਼ਨ
- ਮੇਰੇ ਕਿਉਂ ਹਨ meta ਪੇਜ ਸਰੋਤ ਵਿੱਚ ਟੈਗਸ ਨਹੀਂ ਆਉਂਦੇ?
- ਮੈਟਾ ਟੈਗ ਕੋਣੀ ਦੇ ਨਾਲ ਸੈੱਟ ਕੀਤਾ Meta ਸੇਵਾ ਅਕਸਰ ਕਲਾਇੰਟ-ਸਾਈਡ ਨੂੰ ਅਪਡੇਟ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਭਾਵ ਉਹ ਸਰਵਰ-ਰੈਂਡਰ ਪੇਜ ਸਰੋਤ ਵਿੱਚ ਨਹੀਂ ਦਿਖਾਈ ਦਿੰਦੇ. ਦੀ ਵਰਤੋਂ TransferState ਜਾਂ ਐਕਸਪ੍ਰੈਸ ਸਰਵਰ ਦੇ ਜਵਾਬ ਨੂੰ ਸੋਧਣਾ ਇਸ ਨੂੰ ਹੱਲ ਕਰ ਸਕਦਾ ਹੈ.
- ਮੈਂ ਇਹ ਕਿਵੇਂ ਯਕੀਨੀ ਬਣਾ ਸਕਦਾ ਹਾਂ canonical URL ਸਹੀ ਸੈੱਟ ਕੀਤੇ ਗਏ ਹਨ?
- ਦੀ ਵਰਤੋਂ ਕਰੋ Meta ਆਰਜੀ ਤੌਰ ਤੇ ਪਾਉਣ ਦੀ ਸੇਵਾ link ਟੇਲਸ ਨਾਲ ਟੈਗਸ ("ਕੈਨੋਨੀਕਲ" ਗੁਣ. ਵਿਕਲਪਿਕ ਤੌਰ ਤੇ, ਸੋਧੋ index.html ਸਰਵਰ ਤੇ.
- ਯੋਗ ਕਰਦਾ ਹੈ Client Hydration ਐਸਈਓ ਨੂੰ ਪ੍ਰਭਾਵਤ?
- ਹਾਂ, ਕਿਉਂਕਿ ਹਾਈਡਰੇਸ਼ਨ ਨੇ ਡੋਮ ਪੋਸਟ-ਰਿਡਰ ਨੂੰ ਅਪਡੇਟ ਕੀਤਾ ਹੈ, ਕੁਝ ਖੋਜ ਇੰਜਣ ਗਤੀਸ਼ੀਲ ਸੰਮਿਲਿਤ ਕੀਤੀ ਸਮੱਗਰੀ ਨੂੰ ਨਹੀਂ ਪਛਾਣ ਸਕਦੇ. ਸਾਰੇ ਨਾਜ਼ੁਕ ਐਸਈਓ ਤੱਤ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣਾ ਪਹਿਲਾਂ ਤੋਂ ਪੇਸ਼ਕਾਰੀ ਇਸ ਨੂੰ ਘਟਾਉਣ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ.
- ਕੀ Struct ਾਂਚਾਗਤ ਡੇਟਾ ਮੇਰੇ ਐਸਈਓ ਨੂੰ ਐਂਗੂਲਰ ਐਸਐਸਆਰ ਨਾਲ ਸੁਧਾਰ ਸਕਦਾ ਹੈ?
- ਬਿਲਕੁਲ! ਦੀ ਵਰਤੋਂ JSON-LD ਅੰਗੂਲੇ ਹਿੱਸੇ ਖੋਜ ਇੰਜਣਾਂ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹਨ ਖੋਜ ਇੰਜਣ ਤੁਹਾਡੀ ਸਮਗਰੀ ਨੂੰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਮਝ ਸਕਦੇ ਹਨ, ਅਮੀਰ ਸਨਿੱਪਟ ਯੋਗਤਾ ਨੂੰ ਬਿਹਤਰ ਬਣਾ ਸਕਦੇ ਹਨ.
- ਐਸਐਸਐਸ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਵਿੱਚ ਸੁਧਾਰ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਕੀ ਹੈ?
- ਸਰਵਰ-ਸਾਈਡ ਕੈਚਿੰਗ ਨੂੰ ਲਾਗੂ ਕਰੋ, ਬੇਲੋੜੀ ਏਪੀਆਈ ਕਾਲਾਂ ਨੂੰ ਘੱਟ ਤੋਂ ਘੱਟ ਕਰੋ, ਅਤੇ ਵਰਤੋਂ lazy loading ਪੇਸ਼ਕਾਰੀ ਨੂੰ ਤੇਜ਼ ਕਰਨ ਲਈ ਚਿੱਤਰਾਂ ਅਤੇ ਮੋਡੀ ules ਲਾਂ ਲਈ.
ਐਸਈਓ ਲਈ ਐਂਗੂਲਰ ਐਸਐਸਆਰ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ ਅੰਤਮ ਵਿਚਾਰ
ਵਿੱਚ ਐਸਈਓ ਵਿੱਚ ਸੁਧਾਰ ਐਂਗੂਲਰ ਐਸ ਐਸ ਆਰ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਖੋਜ ਇੰਜਣ ਪੇਜ ਸਰੋਤ ਵਿੱਚ ਗਤੀਸ਼ੀਲ ਮੈਟਾ ਟੈਗ ਤੱਕ ਪਹੁੰਚ ਸਕਦੇ ਹਨ. ਬਹੁਤ ਸਾਰੇ ਡਿਵੈਲਪਰ ਇਸ ਮੁੱਦੇ ਨਾਲ ਸੰਘਰਸ਼ ਕਰਦੇ ਹਨ, ਕਿਉਂਕਿ ਇਹ ਟੈਗਸ ਅਕਸਰ ਗਾਹਕ ਵਾਲੇ ਪਾਸੇ ਪੋਸਟ-ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ. ਹੱਲ ਜਿਵੇਂ ਕਿ ਵਰਤੋਂ ਟ੍ਰਾਂਸਫਰਸਟੇਟ ਜਾਂ ਸਰਵਰ ਦੇ ਜਵਾਬ ਨੂੰ ਸੋਧਣਾ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਦੇ ਹਨ ਕਿ ਮੈਟਾ ਟੈਗਸ ਸਹੀ ਤਰ੍ਹਾਂ ਪੇਸ਼ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਸਰਚ ਇੰਜਣਾਂ ਨੂੰ ਖੋਜ ਇੰਜਣਾਂ ਨੂੰ ਅਸਰਦਾਰ ਤਰੀਕੇ ਨਾਲ ਸੂਚਕਾਂਕ ਤੋਂ ਪ੍ਰਭਾਵਸ਼ਾਲੀ .ੰਗ ਨਾਲ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ. 🔍
ਤਕਨੀਕੀ ਤੌਰ 'ਤੇ ਅਧਾਰਤ ਡੇਟਾ, ਕੈਨੋਨੀਕਲ ਯੂਆਰਐਲ ਪ੍ਰਬੰਧਨ, ਅਤੇ ਕੁਸ਼ਲ ਸਰਵਰ-ਸਾਈਡ ਰੈਡਰਿੰਗਜ਼, ਡਿਵੈਲਪਰ ਐਸਈਓ ਦੇ ਅਨੁਕੂਲ ਐਂਗੂਲਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਬਣਾ ਸਕਦੇ ਹਨ. ਭਾਵੇਂ ਤੁਸੀਂ ਈ-ਕਾਮਰਸ ਸਟੋਰ ਜਾਂ ਸਮਗਰੀ-ਸੰਚਾਲਿਤ ਪਲੇਟਫਾਰਮ ਬਣਾ ਰਹੇ ਹੋ, ਇਨ੍ਹਾਂ ਰਣਨੀਤੀਆਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਨਾਲ ਅਟਵੇਲੀ ਅਤੇ ਰੈਂਕਿੰਗ ਵਿੱਚ ਮਹੱਤਵਪੂਰਣ ਸੁਧਾਰ ਕਰਨਗੇ. ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਨਾ ਕਿ ਮੈਟਾਡਾਟਾ ਖਾਤਾ ਪ੍ਰਗਟ ਹੁੰਦਾ ਹੈ ਤਾਂ ਸਰਵਰ-ਪਾਸੇ ਅਖੀਰ ਵਿੱਚ ਉਪਭੋਗਤਾ ਦੇ ਤਜ਼ਰਬੇ ਅਤੇ ਖੋਜ ਇੰਜਨ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਵਧਾਏਗਾ. 🚀
ਸਰੋਤ ਅਤੇ ਐਂਗੂਲਰ ਐਸਐਸਆਰ ਐਸਈਓ ਓਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਲਈ ਹਵਾਲੇ ਅਤੇ ਹਵਾਲੇ
- ਐਂਗਲੀਲੇ ਸਰਕਾਰੀ ਦਸਤਾਵੇਜ਼ ਸਰਵਰ-ਸਾਈਡ ਰੈਡਰਿੰਗ (ਐਸਐਸਆਰ) ਅਤੇ ਵਿਆਪਕ: ਐਂਗਲੇਰ ਯੂਨੀਵਰਸਲ ਗਾਈਡ
- ਸੰਭਾਲਣ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸ ਮੈਟਾ ਟੈਗਸ ਅਤੇ ਐਂਗੂਲਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿਚ ਐਸ.ਈ.ਓ. ਐਂਗਲੇਰ ਮੈਟਾ ਸੇਵਾ
- ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਵਿੱਚ struct ਾਂਚਾਗਤ ਡੇਟਾ ਨਾਲ ਐਸਈਓ ਨੂੰ ਸੁਧਾਰਨ ਲਈ ਰਣਨੀਤੀਆਂ: ਗੂਗਲ struct ਾਂਚਾਗਤ ਡੇਟਾ ਗਾਈਡ
- ਅਨੁਕੂਲ ਐਕਸਪ੍ਰੈਸ.ਜੇ ਐਂਗੁਲਰ ਐਸ ਐਸ ਆਰ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਬੈਕਐਂਡ ਵਜੋਂ: ਐਕਸਪ੍ਰੈਸ.ਜੇਸ ਵਧੀਆ ਅਭਿਆਸ
- ਐਂਗੁਲਰ ਹਾਈਡਰੇਸਨ ਅਤੇ ਇਸ ਦੇ ਪ੍ਰਭਾਵ 'ਤੇ ਵਿਚਾਰ ਵਟਾਂਦਰੇ: ਐਂਗਲੇਰ ਵੀ 17 ਰੀਲਿਜ਼ ਨੋਟਿਸ